» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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: ]]></b:skin> 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


Postagens Populares1Este 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?


Postagens Populares1- 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: ]]></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='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/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.

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

2 Estilos de Gadget de Posts Populares onde as Miniaturas das Imagens Giram ao passar o Mouse 2 Estilos de Gadget de Posts Populares onde as Miniaturas das Imagens Giram ao passar o Mouse Reviewed by Aurea R C on 11/22/2013 Rating: 5

20 comentários:

  1. Áurea,eu tinha visto algo parecido,mas bonita iguais a esta,eu não conhecia.
    Parabéns,sucesso para você,bjs

    ResponderExcluir
    Respostas
    1. Graça,
      Você é demais! Obrigada por seu apoio e por estar sempre por aqui!
      Bjks no seu coração!

      Excluir
  2. Parabéns Áurea e obrigado por compartilhar o seu conhecimento. Conheci o site por acaso na net e já estou utilizando os conhecimentos adquiridos. Muito bom!

    ResponderExcluir
    Respostas
    1. Obrigada Alerta,
      Fico feliz em ajudar! Não deixe de conhecer os outros tutoriais do TPV. Tenho certeza de que você vai gostar!
      Seja bem vindo ao TPV.

      Excluir
  3. Parabéns Áurea e obrigado por compartilhar o seu conhecimento. Eu conheci o site na net e já estou utilizando o conhecimento adquirido. Muito bom!

    ResponderExcluir
    Respostas
    1. Obrigada Alerta,
      Seja sempre bem vindo ao TPV!

      Excluir
  4. O código esta com erro no tema viagem do Blogger

    ResponderExcluir
    Respostas
    1. Olá Humor Fanho,
      Obrigada por comentar e avisar. Já corrigi o erro. Pode usar o gadget em seu template que irá funcionar.
      Seja sempre bem vindo ao TPV.

      Excluir
  5. Boa tarde, é possível alterar o período das postagens populares ? Gostaria de fazer uma estatística das postagens mais populares entre um ano e outro separado. Grato.

    ResponderExcluir
    Respostas
    1. Olá Fernando,
      O período das postagens é o disponível no gadget para ultimos 30 dias, ultima semana ou tudo.
      Você pode fazer a sua estatística utilizando o Analytics é opção que tenho em mente.
      Seja sempre bem vindo ao TPV.

      Excluir
  6. Olá, Aurea!
    Suas dicas são ótimas. Pena que meu blog é word press. Queria tanto esse plugin...

    ResponderExcluir
    Respostas
    1. Olá Fábio,
      Uai! Vem pro blogger!!!
      Brincadeirinha... :-)
      O wordpress é uma excelente plataforma.
      Logo criam este plugin não desanime!
      Seja sempre bem vindo ao TPV!

      Excluir
  7. O meu nao aparece as imagens, só aparece o titulo e a sinopse.

    ResponderExcluir
  8. O meu não está aparecendo o gadget da segunda opção. Ao invés disso só muda o título da gadget mas ela permanece do jeito que o blogger libera.

    ResponderExcluir
  9. Olá, Aurea!
    Só um duvida: os artigos selecionados pelo o gadget, são os mais VISITADOS ou COMENTADOS???

    ResponderExcluir
    Respostas
    1. Olá Fábio,
      São os posts mais visitados do seu blog!
      O que acontece é que muitas vezes posts que são muito visitados também recebem muitos comentários.

      Excluir
  10. Eai Aurea, seu site é perfeito, acompanho alguns posts lá de 2012, queria que você criasse o gadget de postagem popular e recente, que nem do tecmundo.com.br. Por favor, estou atrás desse estilo de gadget a dias e não acho :(

    ResponderExcluir
  11. Ola, Parabens, fico muito bom, só um pequeno detalhe, que ate passa despercebido, mas pra quem é um pouco detalhista como eu (rsrsr) acaba não passando, As imagens não preenchem todo o espaço dentro das bordas. vc saberia arrumar isso? No mais ta ótimo!!
    Grato!!

    http://golbolinhaecia.blogspot.com.br

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.