Postagens Populares com efeito no titulo

Oi biscoitinhos com carinha de coelhos, como vão nesse dia? Hoje eu não tenho muito o que dizer então vou direito ao assunto da postagem. No tutorial de hoje vou mostrar como personalizar o widget de postagens populares, personalizada com efeito no título. Eu usei ele no layout free Oliver Vocal. É muito simples é fácil adicionar em seu blog, achei esse tutorial uma gracinha além do efeito diferente dele. Para quem quiser dar uma olhada basta clicar no botão abaixo.

Brevia do efeito

Ao passar o mouse sobre a imagem aparece o titulo em forma de balão, que pode se personalizar de várias formas. No demo esta bem simples, pois o layout pede isso, mas vocês podem arrumar da forma que desejar. Esse tutorial encontrei a bastante tempo porém estava dando alguns errinhos, recentemente criei coragem de arruma-lo e trazer para vocês, eu não me recordo de onde havia encontrado ou criado o código original, então se souberem por favor me avisem para creditar, obrigada. Esse tutorial é executado em dois passos bem simples, mas o código é um cadinho longo. 

1. O primeiro passo é bem simples vamos adicionar o widget/gadget de Postagens Populares. Para isso vá ate a pagina Layout > Adicionar um Gadget > Postagens Populares. Não desmarque nada, apenas arrume a quantidade de postagens a serem exibidas ao seu agrado e salve.

2.Agora siga ate Editar HTML, e usando o atalho CTRL+F procure por ]]></b:skin>, acima dele cole:

Códigos

/*Postagens Populares
----------------------------------------------- */
.popular-posts {
margin-top:10px;
}
.popular-posts ul {
margin: 0 auto;
text-align:center;
}
.popular-posts .item-snippet{
display: none;
}
.popular-posts ul li {
position:relative;
float:left;
list-style-type: none;
padding: 0 0 0 5px ;
}
.popular-posts ul li a {
text-decoration:none;
color: #000;
}
.popular-posts li img {
background: #ccc;
width: 65px;
height: 70px;
padding: 3px;
filter:alpha(
opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.popular-posts li img:hover {
filter:alpha(opacity=60);
-moz-opacity:.6;
-webkit-opacity:.6;
-o-opacity:.6;
-ms-opacity:.6;
opacity:.6;
}
.popular-posts li .item-title a {
z-index:1;
width: 150px;
height: auto;
line-height: 16px;
padding: 5px;
font-style: italic;
font-size: 10px;
text-decoration:none;
text-align: center;
border: 1px solid #cbcbcb;
background: rgba(255,255,255,0.8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 5px;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: -75px;
bottom:190px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0);
-moz-opacity:0;
-webkit-opacity:0;
-o-opacity:0;
-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.popular-posts li:hover .item-title a {
bottom:80px;
filter:alpha(opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
}

Salve e prontinho! Agora é só divar deixando ele lindo e combinando com seu site/blog.