10/09/2012

Mostrar Só Imagens (Thumbnail) no Gadget Postagens Populares

Recebemos perguntas sobre como mostrar apenas as miniaturas das imagens do gadget postagens populares lado a lado como usamos em nosso site de Frases Curtas. Esse tipo de organização de layout mostrando as imagens em sequencia como uma exposição pode ser útil principalmente em blogs onde as imagens sejam importantes e mostrem de fato o tema de cada postagem.

Mostrar Miniatura das imagens

O primeiro passo é instalar normalmente o Gadget Postagens Populares no seu blog, entre na pagina Layout, clique para adicionar um gadget procure por Postagens Populares.

Configure como quiser, ou seja, escolha se vai mostrar as postagens mais visitadas do blog nos últimos 30 dias, última semana ou tudo. E escolha também a quantidade de postagens que será exibida, mas a configuração para mostrar miniatura da imagem ou snippet são desnecessárias, pois vamos alterar completamente o HTML deste gadget.

gadget Postagens Populares

Agora vamos deixar o código HTML pronto para ser colocado no blogger, então copie e veja o que podemos personalizar no código abaixo:
<div class='widget-content popular-posts'>
<b:loop values='data:posts' var='post'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_top'> <img expr:src='data:post.thumbnail' height='72' style='float:left;padding:9px;' width='72'/></a>
</b:loop><a href='http://www.frasescurtas.com.br/p/mensagens-e-frases-diversas.html' title='Mais Frases, Mensagens e Imagens'><img height='72' src='http://4.bp.blogspot.com/-srJdtMIfDA8/UDaO-MYXxqI/AAAAAAAAFH8/6k7XXbpbItM/s1600/seta-imagens.gif' style='border:none;padding:9px;float:right' width='41'/></a>

Podemos modificar o espaço entre as miniaturas das imagens no trecho style='float:left;padding:9px;' apenas alterando o numero 9 para dar mais ou menos espaço entre as imagens.

Esse outro trecho de código é o que faz aquela setinha no final da galeria de imagens para o visitante ver mais imagens.

<a href='http://www.frasescurtas.com.br/p/mensagens-e-frases-diversas.html' title='Mais Frases, Mensagens e Imagens'><img height='72' src='endereço da imagem' style='border:none;padding:9px;float:right' width='41'/></a>

Mas ele não faz parte do código das postagens populares, ou seja, se quiser pode simplesmente apagar esse trecho e o resto do código funcionará perfeitamente mostrando as miniaturas das imagens mais visitadas.

Porém na verdade esse é um link para uma pagina de nosso blog onde publicamos uma lista de links e miniaturas das imagens em ordem aleatória, se quiser criar uma pagina deste tipo pode usar o javascript que mostramos no tutorial: Gadget ou Pagina com Postagens Aleatórias e Miniatura das Imagens. E veja também Criar Imagens para Usar em Blog.

Colocando o Código HTML no Blogger

Agora que temos o código pronto entre na pagina editar HTML e faça um backup do seu template para evitar erros no código do seu blog, marque a opção Expandir modelos de widgets e procure pelo código:
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<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>

Sabemos que é um trecho longo de código, mas apague esse HTML e coloque aquele código que acabamos de preparar no lugar dele. Agora clique para visualizar e se ficou como você queria é só salvar. Lembramos que esse código mantem as miniaturas das imagens uma do lado da outra deste que haja espaço (largura) suficiente no gadget.

Veja outras dicas e tutoriais:
Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

Clique na Imagem para ver a demonstração do
Gadget Postagens Populares somente com as imagens
Imagens e Frases Curtas

Lembramos que você pode alterar a qualquer momento a configuração do gadget normalmente pela pagina layout mudando o numero de miniaturas ou o período (ultima semana, mês ou tudo) sem precisar mexer na pagina editar HTML. Mas se você retirar o gadget e depois decidir recolocar então será necessário fazer todo o trabalho deste tutorial novamente.
Related Posts with Thumbnails

22 comentários:

  1. Era exatamente o que eu queria, mas aí percebi que ele não aceita imagens de outras hospedagens, como o Imageshack, que é o que eu uso. Então ficava sempre aquele ícone usado para quando não tem imagem :/

    ResponderExcluir
  2. sim o gadget posts populares usa as imagens hospedadas no proprio blogger.

    ResponderExcluir
  3. Como que Faço Pra Colocar uma em Baixo da outra ,sem os Sub Texto ?

    ResponderExcluir
  4. Entao é por isso que nao ta aparecendo nenhuma umagem ¬¬

    ResponderExcluir
  5. Gel Jefferson apague o trecho float:left; nesta linha:

    img expr:src='data:post.thumbnail' height='72' style='float:left;padding:9px;' width='72'/

    ResponderExcluir
  6. Olá Fabiano gostaria de saber se você sabe como instalar o gadgets com popular, tags e arquivo e quando clicar abre separadamente

    ResponderExcluir
  7. Rodrigo não entendi o que você está querendo fazer.

    esses 3 gadgets que falou são separados. Quando falou tags está querendo dizer o gadget marcadores?

    ResponderExcluir
  8. São separados mais já vi em alguns sites que ele abre quando damos um clique Ex:
    Postagens Populares = marcadores = arquivo
    fica desce jeito em linha horizontal.Se darmos um clique em Postagens Populares abre postagens Populares se darmos um clique em marcadores abre os marcadores e por último o arquivo.
    Desde já agradeço e me despeço

    ResponderExcluir
  9. Fabiano obrigado pela atenção achei um blog que tem o que desejo fazer se possivel da uma olhada nele para ver se é possivel fazer.O gadget está assim:Popular-Tags-Arquivo do Blog
    http://rodrigotechblog.blogspot.com.br/

    ResponderExcluir
  10. isso que falou são códigos de abas, mas faz tempo que não faço testes com códigos deste tipo.

    mas acho melhor usar separadamente

    ResponderExcluir
  11. Ei Fabiano, tudo bem!

    A maioria das minhas imagens foi hospedada no imageshack será que é por isso que não aparecem?

    O que eu posso fazer para modificar isso?

    Obrigada!
    Beijos!

    ResponderExcluir
  12. acho que o unico jeito é hospedar as imagens nas proprias postagens ou seja no blogger.

    ResponderExcluir
  13. Eu consigo aumentar o tamanho da imagem tumbnail, sem perder qualidade da imagem?
    Eu queria usar imagens maiores tipo 175x175 com a qualidade da imagem boa.
    Tem como?
    Alguém me ajuda?

    Abraço

    ResponderExcluir
  14. Giovana Miosso para o gadget de postagens populares acho que não tem como alterar o tamanho das imagens, mas se quiser aqui tem um Código para Mostrar Postagens Aleatórias com Imagens no Blogger

    ResponderExcluir
  15. minhas postagens não se atualizam, fica sempre nas mesmas, já exclui e instalei denovo e nada, vc sabe como alterar isso, pois no blogger já mostra outras postagens populares? Meu blog:

    http://fotosemomentoss.blogspot.com.br/

    Se puder me ajudar, agradeço.

    ResponderExcluir
  16. Leticia veja se a configuração do gadget está em semana, mês ou tudo.

    talvez você esteja comparando coisas diferentes e por isso acha que não atualiza

    ResponderExcluir
  17. Obrigado, acho que entendi é porque os comentarios são em maior numero sempre, outras postagens não foram melhores. Valeu

    ResponderExcluir
  18. Cara Vlw isso erá Tudo que Eu Estava à Procura!

    ResponderExcluir
  19. Eu consegui deixar somente as imagens sem precisar mudar nada do código html, apenas usei o css. É bem mais simples. Primeiro eu configurei o gadget no para não exibir o resumo do post (snipett) depois eu adicionei a propriedade display:none ao elemento .item-title (q corresponde aos títulos dos posts) desta forma os títulos não aparecem sendo mostrado só as imagens. Depois adicionei display:inline-block no elemento #PopularPosts1 li para que as imagens ficassem lado a lado em forma de bloco, aí foi só ajustar as medidas margin e padding para alinhar direito, e no fim ficou exatamente como eu queria. Quem quiser conferir é só acessar meu blog, o gadget tá na sidebar com o título de destaques.

    ResponderExcluir
  20. Como faz para deixar o título embaixo das imagens? Somente o título?

    ResponderExcluir
    Respostas
    1. no código apague o trecho float:left;

      que está no código da imagem

      Excluir