Postagens Aleatórias ou Postagens Recentes com Imagens

Gadget para mostrar Posts aleatórios na sidebar do Blogger com imagens usando o mesmo estilo dos assuntos relacionados que muitos blogs usam no final das postagens. Esse é um código HTML que permite você escolher se quer mostrar os novos posts do seu blog ou links de postagens diferentes cada vez que a pagina é carregada. Além disso, é possível escolher o tamanho da miniatura da imagem (thumbnail) e a formatação do titulo da postagem. Veja no final deste tutorial uma demonstração do gadget em funcionamento.

Postagens Aleatórias ou Postagens Recentes com Imagens

Esse código é muito parecido com o Gadget de Posts Aleatórios com Imagens. A única diferença entre eles é que esse gadget do link o titulo da postagem aparece ao lado da imagem e esse que vamos mostrar agora o titulo aparece escrito sobre a imagem com uma aparência muito semelhante ao gadget dePostagens Relacionadas do nrelate.

Entre na pagina layout > adicionar gadget > HTML/javascript e coloque esse código:

<style type="text/css">
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {clear:both;}
.bsrp-gallery:after {display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 12px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #fff;float: left;border: 2px solid #000;}
.bsrp-gallery a:hover img {padding:1px;border: 1px dashed #000;}
/* BloggerSentral Recent Posts Image Gallery CSS End */
</style>
<script>
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = (5 +(2*(hoje.getSeconds())))
var bsrpg_thumbSize = 140;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

Como Personalizar o Gadget

Você pode alterar alguns detalhes no código como, por exemplo, trocar o endereço da imagem que aparece caso não seja possível localizar o thumbnail (imagem) na sua postagem, isso é feito trocando esse endereço de imagem:
http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png
Veja como é simples Hospedar Imagens no Blogger
Para escolher se o gadget mostrará as postagens recentes ou postagens aleatórias modifique esse trecho do código:
numposts = (1 +(hoje.getSeconds()))

Desde jeito o gadget mostra posts aleatórios, mas se quiser mostrar postagens recentes troque essa linha por:
numposts = 1

Esse numero 1 pode ser alterado, por exemplo, se colocar o numero 5 a lista de posts recentes começa na sua quinta postagem mais recente. Sobre os posts aleatórios eles são "sorteados" entre os 60 posts mais recentes do seu blog, portanto se o seu blog ainda não tiver essa quantidade de postagens poderá gerar erro.

Layout do Gadget e Tamanho das Imagens

Você pode alterar o espaço entre as imagens modificando essa linha de código:
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 20px

O valor 15 é o espaço ao lado de cada imagem e o numero 20 o espaço abaixo então altere como achar melhor.

Para alterar as bordas das imagens modifique o código border nessas linhas:

.bsrp-gallery a img {....
.bsrp-gallery a:hover img {....
Veja aqui sobre: Colocar ou alterar as bordas

A quantidade de imagens (links de postagens) é nesta parte do html: max-results=4, apenas altere o numero 4 para a quantidade que desejar.

Finalmente o tamanho das miniaturadas das imagens é nesta parte:  var bsrpg_thumbSize = 145. Então faça testes para ajudar o tamanho das imagens ao seu template mas lembre-se que quanto maior a quantidade e tamanho das imagens mais lento seu blog ficará. Leia sobre: Editar e Otimizar as Imagens do Blog: Carregar Imagens mais Rápido.

Adaptamos esse código a partir do tutorial publicado no Blogger Sentral (em inglês) e esperamos que goste deste acessório para seu blog e que ele ajude a manter as pessoas mais tempo no seu blog afinal a principal utilidade de gadgets de posts relacionados é fazer as pessoas visitarem mais paginas do blog para diminuir a taxa de rejeição e assim melhorar seu posicionamento no Google, conseguir que mais pessoas compartilhem suas postagens e muitas outras vantagens de fazer as pessoas visitarem mais paginas do seu site.

Demonstração do Gadget de Postagens Aleatórias (Aperte o F5 e veja outras imagens)

51 comentários:

  1. Olá, eu gostaria de saber se eu consigo escolher apenas um marcador para exibir as imagens?
    Fico no aguardo!

    ResponderExcluir
  2. Dar pra fazer isso com marcador especifico?

    ResponderExcluir
  3. é possivel fazer isso com apenas um marcador.

    quase no final do código tem essa linha::

    script src=\"/feeds/posts/default?start-index=.....

    troque esse trecho por:

    script src=\"/feeds/posts/default/-/Marcador?start-index=......


    a palavra Marcador é o nome do marcador que você quer, mas precisa escrever exatamente igual está no seu blog inclusive letras maiúsculas, por exemplo, aqui no Dicas para Blogs temos o marcador Gadgets se colocar no código "gadgets" com letra minúscula não vai funcionar (o mesmo vale para acentos e espaços em branco).

    ResponderExcluir
    Respostas
    1. Meu Deus muito obrigado! Você não sabe o quanto eu procurei por isso :')

      Excluir
    2. No meu não deu certo! Eu coloquei lá bem direitinho e não pegou. Como meu blog começou agora postei só 5 coisas no marcador e mesmo assim não mudou nada. O que faço?

      Excluir
  4. da para colocar TODAS as postagens ou somente nas últimas 60 postagens ???

    ResponderExcluir
  5. na linha de código

    numposts = (5 +(2*(hoje.getSeconds())))

    altere o numero 2 por 3, 4, 5.....

    cada numero que aumentar são mais 60 postagens.

    ResponderExcluir
  6. Fabiano,

    Obrigado pela resposta, deu certo aqui no meu blog, você é o cara rsrs.

    Só mais uma pergunta, eu consigo centralizar as imagens dentro do gadget, tentei colocar a tag center mais não rolou.

    ResponderExcluir
  7. Lucas
    neste código usamos o float: left; isto faz a imagem ficar a esquerda, se quiser apagar está no trecho:

    .bsrp-gallery a img {background: #fff;float: left;border: 2px solid #000;}

    ResponderExcluir
    Respostas
    1. não consigo centralizar o gadget, ja mudei left para center e não deu certo

      Excluir
    2. o float é que faz as imagens ficarem lado a lado, para centralizar o texto do gadget o código é

      text-align: center

      não existe float:center

      Excluir
    3. nao consigo centralizar o gadget o que preciso apagar?Fabiano?

      Excluir
    4. centralizar o gadget inteiro?

      se for altere a primeira linha do css .bsrp-gallery, deste jeito:

      .bsrp-gallery {clear:both;text-align: center;margin:auto}

      Excluir
  8. ooi, eu nao estou conseguindo achar o HTML/javascript na part ede add um gadget :(( me ajuda ?

    ResponderExcluir
  9. Brenda entre na pagina layout, clique no botão adicionar gadget e procure por html/javascript

    ResponderExcluir
  10. Fabiano,
    E da pra colocar esse codigo no wordpress?

    ResponderExcluir
  11. esse código é feito com base no feed gerado pelo blogger eu não testei no wordpress.

    mas tente colocar o endereço do seu blog nele para ver o que acontece. Se funcionar veja se não deixou sua pagina muito lenta

    ResponderExcluir
  12. faz um tempaõ que eu estava atrás de um codigo desses , obrigada mesmo

    ResponderExcluir
  13. Tem como deixar ele na vertical o invés de horizontal para deixar na lateral do blog?

    ResponderExcluir
  14. mas o código como está eles já aparecem na vertical... se no seu blog não está aparecendo um do lado do outro é porque está com pouco espaço (largura da coluna onde está o gadget)

    ResponderExcluir
  15. Acho que esse blog é um dos melhores que eu acesso quando quero melhorar meu Blog. Vocês estão de parabéns.

    ResponderExcluir
  16. projetonebula obrigado pelos elogios..

    ResponderExcluir
  17. Olá!

    Funcionou aqui, mas nem sempre que atualizo a página as postagens aleatórias aparecem. Hora aparecem, hora não aparecem. Sabe dizer alguma causa?

    http://musicacafe.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. fiz alguns testes e notei o problema também... contudo ainda não achei como arrumar isso.

      assim que possível vou publicar um novo post sobre o assunto

      Excluir
    2. Hummm

      pensei que fosse problema de conflito de scripts.
      Tudo bem! Obrigado pela atenção!

      Obrigado!

      Excluir
    3. se tiver muitos scripts no blog isso também pode causar falhas e deixar seu blog mais lento.

      se achar que tem scripts demais no seu blog sugiro que remova algum que tenha pouca utilidade, assim seu blog pode carregar mais depressa. Mas isso não deve ser a solução para esse bug do código.

      Excluir
  18. Boa tarde Fabiano, era exatamente este tipo de widget que estava procurando, porém com os títulos logo abaixo das imagens, e que eu pudesse regular o tamanho e não encontrei nem mesmo nos sites internacionais. Mas este que você publicou é muito bom e estou usando.

    Abraços,
    Aldo

    ResponderExcluir
  19. Olá amigo! Tem como adaptar esse script para exibir posts recentes de um blog externo? Grato.

    ResponderExcluir
    Respostas
    1. sim é possível fazer.

      na parte final do código procure por:

      script src=\"/feeds/posts/default?.....

      e adicione o endereço do blog antes do "/feed", desta forma:

      script src=\"http://www.dicasparablogs.com.br/feeds/posts/default? .......

      Excluir
  20. Ola Amigo urgente me ajude a s resolver um problema nesse script! meu problema e que, nas novas postagesn nao esta mais aparecendo as imagens das postagens - meu blog olha ai http://blogarafaelcds.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. notei que as imagens do blogger agora aparecem com o endereço https e por isso não aparece a miniatura da imagem na pagina inicial.

      apenas apague esse s no https e deve funcionar.

      Excluir
  21. Respostas
    1. quando estiver criando a postagem.

      em vez de usar a guia escrever use html assim poderá visualizar os códigos.

      mas acho que em breve o blogger corrigirá esse problema

      Excluir
    2. vlw amigo - problema resolvido - e eu jurava que era só o meu - quando acessei paginas de amigos percebi que algo de errado estava acontecendo no blogger, mas sem saber o que era, VLW AI PELA DICA UM ABRAÇO

      Excluir
  22. Fabiano, tem como por os links abaixo da imagem, ou seja colocar o titulo das postagens abaixo da imagem?

    ResponderExcluir
    Respostas
    1. tente apagar a linha

      .bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 12px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}

      mas eu não testei.

      esse tipo de código é possível alterar mas tem que refazer o código completo e infelizmente não tenho isso pronto.

      Excluir
    2. ok nunca consegui kkk faz ele ai coloca os titulos em baixo

      Excluir
    3. no trecho do código:

      < a href="' + postUrl + '" title="' + postTitle + '" >' + imgTag + pTitle + '< /a >

      tente trocar de lugar os itens: imgTag + pTitle

      colocando deste jeito:
      pTitle + imgTag

      Excluir
  23. Tem como tirar essa proporção de quadrado e colocar outra?

    ResponderExcluir
    Respostas
    1. sim, é possível retirar a proporção.

      porém as imagens podem ficar distorcidas dependendo da largura da imagem de cada post.

      caso queria fazer, procure essa linha:

      orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'

      e apague o -c no final, deixando assim:
      orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + ''

      Excluir
  24. Olá, Fabiano!
    Muito, muito obrigada pelo código e por todas as formas de personalizá-lo. Gostaria de perguntar mais uma: tem como tirar o título da postagem? Minhas imagens iniciais já contém o título.
    Tentei trocar algumas coisas no código mas não deu certo.

    ResponderExcluir
  25. o código do titulo da postagem é < data:post.title/ >

    você deve procurar e apagar no seu html, mas tem varios, portanto faça testes até achar o certo... e confira também a versão para celular do seu blog quando estiver fazendo os testes.

    ResponderExcluir
    Respostas
    1. Obrigada, mas acho que escrevi mal. Quis dizer o título da postagem que aparece nesse gadget.

      Excluir
  26. tente fazer um teste

    onde está < span class="ptitle" >' + postTitle +

    apague o + postTitle +

    ResponderExcluir
  27. Sensacional, deu certo!
    Mas precisou deixar um dos sinais de +.
    Muito obrigada!

    ResponderExcluir
  28. Agora voltei a movimentar meu blog www.atituderocknroll.com.br e este codigo me ajudou muito para deixar mais informações para meus vizitantes, obrigado pelo belo artigo.

    ResponderExcluir