Gadget de Posts Aleatórios com Imagens no Blogger

Coloque um acessório no blog para mostrar links e imagens das postagens recentes do seu blog. Você pode configurar esse gadget escolhendo o tamanho da imagem ou se mostrará o titulo da postagem junto com o banner. Depois que colocar o gadget de banners das postagens recentes cada vez que uma pagina do seu blog for visitada será mostrado um link e imagem diferente ajudando a despertar o interesse de seus visitantes por outros posts do seu blog.

Gadget de Posts Aleatórios com Imagens no Blogger

Entre na pagina layout > adicionar gadget > html/javascript e cole esse código:

<style type="text/css">
#bp_recent img{padding-bottom: 10px;}
</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://www.acessoriosparablogs.com.br/banner-aleatorio.js"></script>
<script style='text/javascript'>
var titleLength = 150;
var imgDim = 250;
var numberOfPosts = 5;
document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");
</script>

Personalizar o Gadget de Posts Recentes com Imagens


Antes de colocar o gadget no blog você precisa colocar o endereço do seu blog neste trecho do código:
document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5

Aqui temos outras modificações que você pode fazer no gadget alterando algumas partes do código:

var numberOfPosts = 5 - Quantidade de postagens mostradas no gadget, mas além deste trecho você precisa modificar também max-results=5 que está na linha de código onde você colocou o endereço do seu blog que mostramos anteriormente, portanto para alterar o numero de postagens toque o numero 5 destes dois trechos do código e claro use o mesmo numero em ambos.

var titleLength = 150 - Isto é a quantidade de caracteres do titulo das postagens que serão exibidos, portanto se quiser mostrar somente as imagens altere esse valor para zero.

var imgDim = 250 - Tamanho das imagens, ou melhor, dizendo a largura da imagem porque o código redimensiona a imagem para a largura que você escolher, mas a altura de cada imagem dependerá do formato original dela. A razão disso é para evitar distorções na imagem.

padding-bottom: 10px - Espaço entre as imagens mostradas

Quando terminar de fazer esses ajustes é só colocar o código no seu blog e pronto. Outro detalhe interessante é que você poderá saber o numero de cliques que esse gadget recebeu nas estatísticas das campanhas do Google Analytics e procurando o item bp_recent.

Leia também:
Gadget ou Pagina com Postagens Aleatórias e Miniatura das Imagens
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Mostrar Lista de Postagens mais Compartilhadas em Redes Sociais

Veja abaixo uma demonstração do gadget em funcionamento. Clique no link a seguir e recarregará essa pagina mostrando outras imagens e links de postagens aleatórias.



Esse gadget é recomendado para blogs com mais de 60 postagens porque devido ao funcionamento do código o gadget pode não funcionar todas as vezes em blogs com menos postagens.

17 comentários:

  1. Renata Pimenta veja os detalhes na hora de trocar o endereço da pagina porque qualquer detalhe dá erro.

    também pode ocorrer erros em blogs com poucas postagens

    ResponderExcluir
  2. Fabiano,

    Perfeito, como todas as tuas dicas. Funcionou direitinho!!

    Abraço

    ResponderExcluir
  3. Oi Fabiano meu blog tem 16.864 postagens.
    tiro "http://www.dicasparablogs.com.br e coloco o meu http://blogdarenata.com ,qdo salvo aparece bem pequeno o nome dicas de blogs clico e vem para essa página,

    ResponderExcluir
  4. Renata a parte do endereço do blog fica deste jeito:

    script src=\"http://www.blogdarenata.com/feeds/posts/default?start-index


    talvez você tenha colocado uma barra a mais no endereço no blog, testei agora e funcionou.

    <style type="text/css">

    #bp_recent img{padding-bottom: 10px;}

    </style>

    <div id='bp_recent'></div>

    <script type="text/javascript" src="http://www.acessoriosparablogs.com.br/banner-aleatorio.js"></script>

    <script style='text/javascript'>

    var titleLength = 150;

    var imgDim = 250;

    var numberOfPosts = 5;

    document.write("<script src=\"http://www.blogdarenata.com/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");

    </script>

    ResponderExcluir
  5. Perfeito... Todas suas dicas até agora são muito cabanas. Com certeza esta última dica eu irei colocar no meu blog no qual vou comprar um domínio pago. Não é muito do tema da postagem mais eu vou falar, ei quando você começou a partir de quanto tempo teve muitas visitas? E o que foi que você fez no início para conseguir essas várias visitas? Obrigado se puder me responder, e se der manda pelo email juniormp316@hotmail.com e parabéns.

    ResponderExcluir
  6. Junior Silva demora um pouco para conseguir visitas para o blog principalmente porque no começo o blog aparece nos resultados do google em posições muito ruins.

    mas tenha paciência os primeiros 3 meses são complicados. Existem muitas coisas para conseguir visitas veja o item mais visitas em nosso menu lateral.

    comece colocando botões de compartilhamento e principalmente se preocupando em ter um conteúdo de qualidade para ser notado e compartilhado pelos seus visitantes.

    eu comecei com blogs em 2006 então não tem como comparar aquela época com a realidade de agora, mas no começo eu tinha 10 visitas por dia.

    ResponderExcluir
  7. Fabiano, obrigada, funcionou,mas eu pensei q fosse passando várias imagens , ha não sei o nome q usa

    ResponderExcluir
  8. Adorei a postagem. Já tinha usado um código assim.
    Mas quero perguntar uma coisa pois já procurei em vários blogs e não achei. No meu blog abaixo dos títulos aparece uma borda. Não dar para vê-la pois ela está na cor branca. Eu quero eliminá-la e diminuir o espaço entre o título e a postagem. Você pode me ajudar indicando alguma postagem sua sobre isso?

    ResponderExcluir
  9. Márcio entre no html e procure por border: .....

    deve ter a palavra solid e o codigo #fff se for branca mesmo a barra.

    então tente apagar e visualizar o blog.

    por exemplo a linha, border:3px solid #ffffff; no trecho:

    #blog-wrapper {
    text-align:center;
    position:relative;
    width:980px;
    background:#ffffff;
    border:3px solid #ffffff;
    margin:0 auto 15px;
    padding:7px;
    }

    ResponderExcluir
  10. Obrigado por responder, entendi tudo... Vou tentar a criatividade para fazer uma boa divulgação, e postar bom conteúdo então. Parabéns novamente pelo blog, suas dicas são únicas.

    ResponderExcluir
  11. Gostei muito dessa postagem pois queria agregar gadgets legais no meu blog.
    Queria saber se tem como as imagens e os titulos ficarem centralizadas ao inves de a esquerda.
    Ë sem querer desmerecer os creditos ao seu blog tem como retirar o link q fica no final depois que aplica o gadget "Dicas para Blogs" que redireciona para essa postagem? Foi a mesma duvida da Renata Pimenta ali acima. Li o codigo varias vezes e nao encontrei o que seria o erro.
    Obrigado!

    ResponderExcluir
  12. para deixar centralizado coloque o código que mostramos dentro deste aqui:

    < center > código < / center >

    não pode retirar o link do gadget

    ResponderExcluir
  13. muito bom esse gadget, mas ele tem um pequeno problema, ele não é totalmente aleatorio, eu queria saber se é possivel os posts terem uma certa distancia de datas entre um e outro , pois soh aparecem em sequencia exata

    ResponderExcluir
  14. sim esse código segue a sequencia que as postagens foram feitas. O que é aleatório é onde a lista começa...

    já viu códigos que mostram todos os links aleatórios mas eles deixam a pagina muito lenta e mostravam apenas links de texto sem imagens.

    ResponderExcluir
  15. Muito bom... gostei muito, parabéns... http://topletra-gospel.blogspot.com.br/

    ResponderExcluir