Efeito hover no widget postagens populares

DEMO

É sempre bom poder aumentar o tempo de permanência dos leitores em seu blog, por isso, há widgets tão importantes como é o caso do widget dos posts populares. Que tal então dar a ele maior visibilidade como coloca-lo abaixo do cabeçalho e dar a ele um visual moderno ? Siga a tutorial que é bem facinho. Claro, será necessário ter o widget em seu blog e depois, arrasta-lo para baixo do cabeçalho.



Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Popular post ------------------------------------------------*/

.PopularPost ul {list-style: none;}
.PopularPosts img{padding:0px;border-radius: 5px;-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;display: inline-block;
transition: all 0.2s ease-in-out;border: 0px;
box-shadow: 0px 0px 10px #222;}
.PopularPosts img:hover {-webkit-filter: saturate(1.1);
-moz-filter: saturate(1.1);}
#PopularPosts1 ul li:hover .item-title{opacity:1;top:-23px;width: 100%;padding: 6px;}
.PopularPosts .item-title {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding-bottom: .2em;
position: absolute;
font-size: 12px;
width: 0px;
background: #ddd;
padding: 0px;
top: -25px;
opacity: 0;
left: 0px;
border-bottom: 1px solid #222;
border-top: 1px solid #222;
font-family: 'Playfair Display SC', serif;
text-align: center;
overflow:hidden;
}
.PopularPosts .item-thumbnail {
float: left;
margin: 15px 5px 25px 0;
height: 72px;
padding: 5px;
}

#PopularPosts1 ul li {padding: 0px;
border: 0px solid #ddd;
float: left;
margin: 2px;
height: 71px;
width: 71px;
margin-left: 37px;}

#PopularPosts1 h2:before {
content: "";
position: absolute;
bottom: 14px;
left: -9px;
border-width: 21px 8px 0px 0px;
border-style: solid;
border-color: transparent #000;
display: block;
width: 0;
}

#PopularPosts1 h2{
position: absolute;
top: -22px;
left: 20px;
background: #ddd;
padding: 5px 15px 5px 15px;
font-size: 18px;
font-weight: normal;
border: 1px solid #666;
box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.8), 0 7px 14px #222;
border-radius: 0px 0px 5px 5px;
font-family: 'Playfair Display SC', serif;
text-shadow: 1px 1px 1px #bbb;
color: #222;
letter-spacing: -1px;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.