Gadget de Posts Populares onde as miniaturas das imagens giram ao passar o mouse

Oieee. Hoje eu trouxe um tutorial bem fácil para personalizar seu gadget de postagens populares! Quando você passa o mouse da imagem, ela mexe e aparece uma tool-tip dizendo o título do post popular. Entendeu? Fica bem legal, vamos ver como faz?

*exemplo

1- Quando você criou seu gadget de posts populares para o 1º Estilo marcou as opções miniatura de imagem e snippet. Para este estilo marque apenas miniatura da imagem e coloque Exibir até 9 postagens que é o máximo que exibe.

2- Acesse o Editor de HTML do seu blog em » Modelo » Editar HTML » Procure pela linha: ]]></b:skin> e cole este código acima desta linha. Use Ctrl+F

/*----- Popular Posts on Grid With Rotational Effect-----*/
.PopularPosts .item-thumbnail{float:left;margin-left:5px;}
.PopularPosts ul{padding-left:5px;}
.PopularPosts ul li {list-style-image: none;list-style-type: none;display:inline;}
.PopularPosts ul li img {padding:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
3- Ainda no Editor de HTML do blog procure pelas tags:
<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>…</b:widget> 

Observação Importante: Se você não encontrar exatamente desta forma é porque alterou o título de seu gadget, neste caso procure por 'PopularPosts1' que você encontrará da mesma forma.

Selecione o código deste widget todo desde <b:widget… até </b:widget> e substitua por este abaixo:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7CbojLDdT0ogzTtKIxg9hs6NmTmNBArkTZinKmD7YWdkViv9A7NZE9DZqyZzgSoG5kZdysQBcB-IUfnE20WYxKhoLPt-X80DmZALGJHKhfdr_w1gBQAiCEGs6HTty4_iA1GHoAkx3rY/s72-c/default.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Clique em Salvar modelo e Visualize o seu blog em outra aba.

---------------------------------

Prontinho! Espero que tenham gostado! Créditos a este blog.