25/10/2012

Gadget para Mostrar Imagens em Miniatura dos Posts Recentes

Aprenda como colocar um gadget para exibir miniaturas das imagens das postagens recentes do seu blog horizontalmente ou seja imagens uma do lado da outra. Esse acessório permite varias configurações para personalizar as imagens mostradas no blog, por exemplo, quantas imagens aparecem, tamanho e espaço entre as imagens e espaço entre as imagens. Além disso, é um gadget muito simples de instalar.

Colocar Gadget de Miniaturas de Postagens Recentes

A instalação do gadget é muito simples: entre na pagina layout > adicionar gadget > HTML/javascript e cole o código abaixo:
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 125;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Gadget para Mostrar Imagens em Miniatura dos Posts Recentes

Como personalizar o Gadget de Posts Recentes

Veja algumas opções que você pode ou deve alterar para mostrar as imagens das postagens recentes no seu blogger. A principal configuração é nesta linha que fica no final do código:
src=’http://www.dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published

Você deve colocar o endereço do seu blog onde está o nosso (http://www.dicasparablogs.com.br), mas não altere o resto do código. O numero de miniaturas que deseja mostrar trocando o numero 5 neste trecho: max-results=5, mas também é necessário mudar a linha: var numberOfPosts = 5 usando o mesmo valor nas duas.

Outras opções do gadget:
var myMargin = 5; - espaço entre as imagens.
var imgDim = 125; - tamanho das imagens.

Veja outros gadgets para blogs:
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Gadget com Postagens mais Recomendados nas Redes Sociais
Colocar Gadget com Numeração das Paginas do Blog

Veja abaixo a demonstração deste código em funcionamento.

Acompanhe os Cliques no Gadget de Posts Recentes

Uma função interessante neste gadget é que ele já tem instalado a função campanha do Google Analytics (fontes de trafego > origens > campanhas) que é um código de acompanhamento de cliques pelo Google Analytics. Assim você poderá saber quantas pessoas clicaram nas imagens deste gadget para poder avaliar diversas coisas como, por exemplo, o melhor posicionamento do gadget e até mesmo se esse acessório é útil para seu blog.
Related Posts with Thumbnails

49 comentários:

  1. Adorei e já estou usando!!!
    Eu adoro e recomendo muito aqui ^^
    Beijus...

    ResponderExcluir
  2. Amei a dica e claro vou ver se consigo colocar no meu blog...muito obrigada..
    beijos e sucesso!
    http://blog-everygirl.blogspot.com.br/

    ResponderExcluir
  3. Tem como configura para usar verticalmente (uma img abaixo da outra)?

    ResponderExcluir
  4. JCM vou fazer uns testes e se possivel publicarei um tutorial sobre isso.

    mas se deixar as imagens em tamanho grande elas ficam uma embaixo da outra, por exemplo se a coluna do blog tiver largura de 250 e você colocar o tamanho das imagens em 130 ou mais elas ficam uma embaixo da outra porque não vai caber duas lado a lado.

    ResponderExcluir
  5. Adorei! muito bom e obrigado, ficou ótimo no meu blog http://blowxme.blogspot.com.br/

    ResponderExcluir
  6. show de bola, to usando ja.... muito boa a dica.... será que ñ dava para personalizar a altura e a largura com width e height ??

    ResponderExcluir
  7. Bertê você pode personalizar o tamanho da imagem aqui:
    var imgDim = 125;

    mas ela é quadrada por isso não precisa alterar a altura e largura separadamente.

    ResponderExcluir
  8. isso eu ja saquei fabiano, mas eu digo assim, e se eu quizesse alterar a altura e largura separadamente ?? haveria possibilidade ??

    ResponderExcluir
  9. não tem como fazer a configuração separadamente

    ResponderExcluir
  10. Olá Fabiano...No meu blog não apareceram todas as imagens você pode me ajudar?

    ResponderExcluir
  11. Aleksandra esse tutorial só funciona com imagens enviadas ao blogger, ou seja se a postagem tiver uma imagem hospedada em outro site não vai funcionar

    ResponderExcluir
  12. ok! Resolvido o problema.Modifiquei as imagens. Ah... mais uma coisa já tentei colocar o
    widget '' você pode gostar de'' no blog,mas não consegui. Segui todos os passos bem pelo menos eu acho... vc pode me ajudar mais essa vez... grande abraço e obrigada pela ajuda. abraços

    ResponderExcluir
  13. Olá Fabiano, tem como eu fazer essa dica com marcador especifico?

    Para aparecer no gadget apenas, o marcador escolhido...

    ResponderExcluir
  14. Rui Carlos é possivel fazer.

    Veja esse trecho que está no final do código

    ....script src='http://dicasparablogs.com.br/feeds/posts/default?max-results=5&orderby=published&alt=json-in-....

    altere o endereço do blog: http://dicasparablogs.com.br/feeds/posts/default

    desta forma:

    http://dicasparablogs.com.br/feeds/posts/default/-/Sites Úteis

    o trecho Sites Úteis é o nome do marcador, mas você tem que escrever extamente igual está no seu blog inclusive as letras maiúsculas .

    no exemplo que mostramos se escrever sites úteis não vai funcionar.

    ou seja ficaria deste jeito:

    http://dicasparablogs.com.br/feeds/posts/default/-/Sites Úteis?max-results=5&orderby=publish.....

    ResponderExcluir
  15. Valeuu ae Fabiano...
    A dica funcionou perfeitamente...

    ResponderExcluir
  16. Fabiano,
    gostaria de saber se tem como colocar borda ao redor do total de imagens. Se tiver também gostaria de saber se tem como mudar a cor da borda.
    Outra questão, uma das minhas 5 imagens não aparece, nas configurações relacionadas a feed, já está em "completa". Se você poder me ajudar eu agradeceria muito.

    Blog
    www.mulheresquejogam.blogspot.com.br

    email
    kellendsm@hotmail.com

    Obrigada por sua atenção

    ResponderExcluir
  17. Kellen na pagina editar html você pode colocar esse código:

    #bp_recent img{border: solid 1px #ff0}

    para criar uma borda da cor que desejar

    ResponderExcluir
  18. Adorei mas estou precisando que ele mostre o titulo da postagem e queria pode configurar a altura e largura da imagem...tem como?

    ResponderExcluir
  19. Herbert nesta linha você pode configurar o tamanho da imagem

    var imgDim = 125;

    mas ela será quadrada.

    ResponderExcluir
  20. Fabiano beleza de post!

    É possível alterar para que exiba as postagens populares? Uso imagens externas e o widget do Blogger não mostra as miniaturas. Preciso muito de mostrar as miniaturas dos posts mais acessados =/

    ResponderExcluir
  21. Nanda Poziq infelizmente esse gadget só funciona para imagens enviadas ao blogger

    minha sugestão é editar as postagens populares. Salve as imagens e envie as imagens para o blogger nas postagens populares.

    quando editar uma postagem popular enviando a imagem ela passa aparecer a miniatura imediatamente.

    ResponderExcluir
  22. só falta aparecer o titulo

    ResponderExcluir
  23. no meu blog depois deste trecho:

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>



    tem isso aqui que é o código do titulo



    <h1 class='post-title entry-title'>

    <b:if cond='data:post.link'>

    <a expr:href='data:post.link'><data:post.title/></a>

    <b:else/>

    <b:if cond='data:post.url'>

    <b:if cond='data:blog.url != data:post.url'>

    <a expr:href='data:post.url'><data:post.title/></a>

    <b:else/>

    <data:post.title/>

    </b:if>

    <b:else/>

    <data:post.title/>

    </b:if>

    </b:if>

    </h1>


    então você pode tentar fazer isso no seu blog, mas faça um backup antes de mexer no html

    ResponderExcluir
  24. Cara no meu blog nao deu muito certo confira se poder http://universomangakabrasil.blogspot.com.br/

    ResponderExcluir
  25. Vinicius

    entrei no seu site agora e parece normal..... qual o problema que você notou?

    ResponderExcluir
  26. Não funciona no meu blog. Fiquei tão feliz quando encontrei esse gadget, mas não aparece nada na página do blog :-(

    ResponderExcluir
  27. Testei em outro blog, mas só funciona com o feed do "dicas para blogs" com meus feeds não funciona... hummm, acho que já sei o que é! Vou entrar no feed burner e depois volto para contar se deu certo.

    ResponderExcluir
  28. Deu certo!!

    Eu estava usando, no local onde é para eu colocar meu feed, o endereço do feed que colocamos no blog. Agora substitui pela alimentação (feed) original, que fica no feedburner. Obrigada

    MAIS UMA DÚVIDA!
    Se eu quiser adicionar feeds de blogs de outra plataforma que nAo o blogger, não vai funcionar?

    :-)

    ResponderExcluir
  29. ...E eu de novo!! Há como fazer essas imagens flutuarem? quase como um slide?

    ResponderExcluir
  30. Renata não testei o código com feed de outros blogs então não sei dizer se funciona.

    fazer slide usando esse código não dá mas é possivel fazer imagens deslizando usando o código marquee, veja aqui: Banners deslizando

    ResponderExcluir
  31. não publiquei o outro comentário como você pediu, mas não tenho os códigos para ajudar nisso.

    mas se publicar feeds de outros blogs é plagio e poderá ser penalizada pelo google. (mesmo que o outro blog seja seu também) por causa do conteúdo duplicado

    ResponderExcluir
  32. Fabiano,

    Nao da pra fazer com dois marcadores diferentes, eu tentei fazer e colocar em lugares diferentes do blog, mais eles entram em conflito e acabam ficando tudo junto.

    É possivel fazer separadamente?

    ResponderExcluir
  33. Fernando acho que não tem como usar duas vezes o mesmo código na mesma pagina.

    mas você poderia usar o código em uma pagina extra do blog e depois usar esse link como menu

    ResponderExcluir
  34. Ótimo gadget, exatamente o que eu estava procurando...

    ResponderExcluir
  35. Não ha maneira de as miniaturas funcionarem com publicações apenas com um video?

    ResponderExcluir
  36. Nelson
    vídeos não geram miniaturas, então a solução é colocar uma imagem dentro da postagem que tem vídeo

    ResponderExcluir
  37. Olá!

    Por acaso esse gadget funciona como postagens aleatórias? Eu usei outro tutorial para postagens aleatórias do seu blog...porém quando instalei deu conflito com o script do slide. Testei esse e funcionou perfeitamente, mas quero configurá-lo para mostrar postagens aleatórias. É possível?

    P.S. O que sugere para evitar esses conflitos de scripts?

    ResponderExcluir
  38. Sorry. Confundi as coisas. rs
    Testei tantos gadgets similares a esse que não lembro mais a origem dele.
    Mas eu testei outro gadget com postagens aleatórias do seu blog (http://www.dicasparablogs.com.br/2013/06/postagens-imagens-aleatorias.html)...achei a formatação legal, mas daí percebi que nem sempre ele aparecia quando atualizava a página. Acho que comentei na postagem a respeito.

    Vc postou outro código esse aqui: http://www.dicasparablogs.com.br/2013/01/gadget-posts-aleatorios-imagens-blogger.html

    Eu gostaria de saber se dava pra colocar as imagens lado a lado ao invés de uma lista. Dá?

    ResponderExcluir
    Respostas
    1. infelizmente no caso daquele código não posso alterar para colocar lado a lado

      Excluir
  39. Fabiano tem como colocar os títulos das postagens embaixo das fotos?

    ResponderExcluir
    Respostas
    1. com esse código não tem como colocar o titulo embaixo das fotos.

      mas vou modificar o código e se funcionar corretamente publicarei um novo tutorial sobre isso nos próximos dias.

      obrigado pela sugestão.

      Excluir
  40. Olá Fabiano, gostaria de saber se no lugar das postagens mais recentes tem como colocar postagens aleatórias ?! :)

    ResponderExcluir
  41. Como se faz pra mesclar isso no cabeçalho? Ou pra fazer um efeito hover quanto tu passa o mouse na imagem? Preciso muito aprender isso...

    ResponderExcluir
    Respostas
    1. precisa adicionar um código css para criar o efeito hover (não é no mesmo lugar que coloca esse código do tutorial).

      o código do efeito hover é

      #bp_recent img:hover {border: solid 1px #000}

      se precisar de ajuda para colocar os códigos css veja aqui:

      Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

      e veja também:
      Efeito Girar (Rotacionar) Imagens ao Passar o Mouse usando CSS

      Excluir
  42. E se eu quiser exibir também a data e quem postou (Autor) que ponto eu teria que altera nesse código.

    ResponderExcluir
    Respostas
    1. troque a palavra false por true na linha:

      var showPostDate = false;

      Excluir