2 Estilos de Gadget de Posts Populares onde as Miniaturas das Imagens Giram ao passar o Mouse
O Gadget de Posts Populares é um recurso bem legal, porque podemos destacar os posts que trazem mais visitas ao nosso espaço.
Ao longo do tempo vários blogs que ensinam hacks para o blogger têm desenvolvido estilos para esta gadget em especial.
Encontrei alguns hacks que acho muito legais e dão um destaque maior a esta gadget.
A medida que for encontrando mais hacks interessantes para esta gadget acrescento aqui.
☺ A maior vantagem que vejo nestas duas opções de destaque do gadget de postagens populares é que não é preciso usar nenhum recurso JavaScript, ou seja, elimina o trabalho de hospedar códigos, problemas com largura de banda etc. Só usaremos o CSS3.
♦ Antes de aprender os estilos para o Gadget de Posts Populares você deve colocá-lo em seu blog:
Vá em Layout » Clique em Adicionar um Gadget » Selecione o Gadget de Postagens Populares » Clique em Salvar e depois posicione-o onde preferir em seu blog.
Se já tiver este gadget em seu blog escolha o estilo que mais gostar, aplique e faça as alterações necessárias.
1º Estilo: Lista de Posts com Título, Snippet (resumo do post) e as Miniaturas das Imagens (thumbnails) Rodam ao passar o Mouse
Este estilo é muito fácil porque só precisa adicionar o código CSS dos Posts Populares no HTML do Template.
A demonstração deste estilo está no
Template Gray Left disponibilizado aqui para download.
Veja como Fica! Como fazer?
1– Acesse o Editor de HTML do seu blog em »
Modelo »
Editar HTML » Procure pela linha:
))> e cole este código acima desta linha.
/* ----- Popular Posts With Thumbnails Rotational Effect----- */
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !important;}
.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) ;}
.PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;}
Se você tiver dúvidas sobre o Editor de HTML do blogger clique neste link→»Leia:
Como Acessar o Editor de HTML do Blog e Ativar o Search ♦ Clique em Salvar modelo e Visualize o seu blog em outra aba.
Uma opção Interessante:
Se você quiser que as bordas das imagens fiquem arredondadas. Deve acrescentar o código
-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; na linha
.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;} Ficando assim:
.PopularPosts ul li img {padding:0;
-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; -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;}
Fonte: http://redeando.blogspot.com.br/2011/11/entradas-populares-con-zoom-en-blogger.html
2º Estilo: Os Posts Populares em Grade sem Snippet somente com as Miniaturas das Imagens que Rodam ao passar o Mouse
Este estilo tem um passo a mais que o anterior onde você terá que alterar o código html do gadget de popular posts. Mas mesmo assim é muito fácil.
Veja como Fica! Como Fazer?
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 este hack exibe.
2- Acesse o Editor de HTML do seu blog em »
Modelo »
Editar HTML » Procure pela linha:
))> 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:
… 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 e substitua por este abaixo:
♦ Clique em Salvar modelo e Visualize o seu blog em outra aba.
Observações
♦Para voltar ao título que você colocou originalmente, volte em Layout e edite o Gadget
♦Para voltar ao gadget original vá em Layout apague este gadget e crie outro.
Fonte:http://www.exeideas.com/2013/06/animated-grid-style-popular-posts.html
©2014
Templates para Você Aproveite que você assina o nosso Feed e nos acompanhe no
Facebook e no
G ;)