Lista aleatória das postagens recentes do blog

Mostrar uma lista com títulos de varias postagens que já fez no blog é muito bom isso ajuda a melhorar as pageviews, ou seja, as pessoas visitarem mais paginas do seu blog. Além disso, é um acessório bem legal para colocar no blog.

Veja também sobre:
slides das postagens recentes
Gadget ou Pagina com Postagens Aleatórias e Miniatura das Imagens.

Lista aleatória de postagens no Blogger
Porém mostrar sempre a mesma lista torna-se repetitivo então o código abaixo mostras essa lista alterando entre suas postagens mais recentes, fazendo assim uma lista aleatória entre das postagens recentes do seu blog, clique em qualquer item do menu ao lado(ajuda para Blogueiros) e verá que a lista mudará quando carregar novamente a pagina. Isso foi a maneira que encontramos para não deixar sua lista de links ser algo sempre igual se alterando apenas quando fizer novas postagens, coisa que acontece quando usamos o feed do blog para criar a lista de posts recentes.

Para colocar esse acessorio no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

<style type="text/css">
<!--
.lista a{
display: block;
padding-top: 1px;
padding-bottom: 1px;
text-decoration: none;
}
.lista a:hover{
text-decoration: underline overline;
}
-->
</style>
<span class="lista">
<script style="text/javascript" src="http://acessoriosparablogs.com.br/scripts/todos.js"></script>
<script style="text/javascript">
var comecar = 5 + Math.floor(Math.random() * 30);
document.write("<script src=\"http://dicasparablogs.com.br/feeds/posts/default?start-index="+comecar+"&max-results=10&alt=json-in-script&callback=loadtoc\"><\/script>");
</script>
</span>

Veja quais alterações são necessárias antes de colocar esse código no seu blog:

Coloque o endereço do seu blog
document.write("<script src=\"http://dicasparablogs.com.br/feeds/posts/default?start-index="+comecar+"...

A partir de qual postagem começará a lista
var comecar = 5 + Math.floor(Math.random() * 30);

O valor 5 é a partir de qual postagem poderá começar a sua lista e o numero 30 é a quantidade de opções (numero aleatório) que será somado ao inicio (5), ou seja, será sorteado entre 5 e 35, isso será de onde a lista começará. Mas não use um valor muito alto lembre-se que essas são postagens do seu blog, então antes de fazer alterações seja quantas postagens você já fez no blog.

Quantidade de itens na lista, o numero 10 no trecho abaixo é o numero de postagens mostradas na lista.

mecar+"&max-results=10&alt=json-in-script&callback=loadtoc\">

O trecho inicial do código (até a linha </style>) é a formatação desta lista de links, então poderá facilmente criar botões ou formatar o texto dos links como desejar. Por exemplo para dar mais espaço entre os links, aumente os valores 1px, neste trecho:
padding-top: 1px;
padding-bottom: 1px;

Achamos esse código bem interessante justamente por mostrar uma lista diferente cada vez que o blog é carregado, assim seus visitantes sempre terão novas opções para ver na lista de links do seu blog. Talvez tenha achado um pouco confusa essa estória de lista aleatória de postagens recentes, mas o funcionamento é simples, se alterar somente o endereço, ele mostrará uma lista de 10 postagens iniciando a partir de um numero aleatório entre 5 e 35.

58 comentários:

  1. achei interessante, vou experimentar no meu blog

    ResponderExcluir
  2. Apesar das dicas daqui do blog serem sempre ótimas, eu, por ser um pouco leigo com html e tal, nunca coloquei nenhuma em prática no meu blog. Nunca TINHA colocado nenhuma dica em prática, essa foi a primeira dica do blog que colocquei em prática, e adorei.

    ResponderExcluir
  3. oi precisava de ajuda
    eu fiz um blog e coloquei uma pagina e usei uma imagem como link p ir para essa pagina
    mais quando clica na imagem ela abre outra aba p exibir a pagina
    não tem como fazer com q essa pagina abra na mesma janela saindo da janela inicio e indo para a outra janela invez de abrir outras janelas ???
    é meio confuso mas acho q deu pra entender né
    obrigada .

    ResponderExcluir
  4. haa outra duvida é saber como eu posso colocar na pagina nova algo q os visitantes do blog possam deixar perguntas e resposta ???

    ResponderExcluir
  5. Gisa
    sobre o link da imagem abrir em uma nova janela apague o target="_blank" e abrirá na mesma janela.

    você falou sobre um lugar para colocar perguntas e respostas no blog, acho que um mural de recados deve servir:
    Colocar mural de recados ou chat no blog

    ResponderExcluir
  6. Como posso colocar um risco ou algo que separe umas postagem da outra tem como ??

    ResponderExcluir
  7. Olá, é a primeira visita ao seu site... e achei matérias muito interessantes, parabéns.
    Mas fica a dica para mudar o layout que é tá bem ruim.
    Boa sorte

    ResponderExcluir
  8. Gisa
    na parte .lista a{.. coloque border-bottom: 1px solid #000000; isso cria uma bordar embaixo de cada link, veja aqui sobre bordas
    Colocar ou alterar as bordas

    ResponderExcluir
  9. Oi Fabiano
    Tem como colocar uma imagem antes dos links para dar um destaque melhor ao widget.
    Valeu por mais esta dica

    Cleisson

    ResponderExcluir
  10. mas eu coloco esse codigo esatamente onde ???

    ResponderExcluir
  11. eu tb tentei colocar um botão RT no blog mas ñ consegui pq ñ achu esse trecho
    e fiz a inscrição no site para envio de post diretos pro twitter mas tb ñ deu certo quando termino a etapa 2 do site e clico para ir pra tres ele volta na 2 novamente

    ResponderExcluir
  12. Glamorous Woman
    esse código você coloca pela pagina layout, adicionar gadget, html/javascript.

    sobre qual código está falando da lista de postagens ou do botão retweet, se for do botão veja aqui:
    Botão Retweet Personalizado - Topsy

    planetadobem
    vamos preparar outro com imagens, mas veja o link no inicio deste tutorial sobre slides das postagens recentes

    ResponderExcluir
  13. oi desculpa é que eu e Gisa somos a mesma pessoa e ñ percebi q estava em contas diferentes quando respondi o conmentario sobre a linha.
    quero saber onde coloco esse codigo border-bottom: 1px solid #000000;
    e sobre o botão de RT eu queria para cada postagem

    ResponderExcluir
  14. o estilo da borda vc coloca neste trecho: .lista a{...

    o botão retweet vc pode em um dos links abaixo:
    Colocar botão retweet no blog

    Botão Retweet Personalizado - Topsy

    ResponderExcluir
  15. então Fabiano mas o problema é q ñ acho nenhum dos trechos q vc diz no html do meu blog

    ResponderExcluir
  16. essas tags variam um pouco conforme o modelo do blog se optar por colocar o botão na sidebar é mais facil, senão procure por post.body é mais facil de achar

    ResponderExcluir
  17. olha não consigo achar msm
    ja peguei muitas coisas do seu blog para fazer no meu mas essa é a unica q ñ consigo de geito nenhum
    eu enviei um email pra vc com o html do meu blog todo se puder grife onde tenho q colocar os botão RT para aparecer em cada postagem
    e a borda q separa um postagem da outra
    obrigada por enquanto

    ResponderExcluir
  18. Glamorous Woman , vou ler e responder seu email.

    ResponderExcluir
  19. gostei dessa Lista aleatória, ja coloquei no meu blog.
    valeu pelo javascript

    ResponderExcluir
  20. uma coisa q notei.
    que tinha quer ter pelo menos um espaço entre os nome das postagens.
    como o código é seu eu nao vou mexer,
    gostaria de q vc desse uma olhada nisso, valeu denovo

    ResponderExcluir
  21. MaximoS-ADMIN

    no tutorial falei sobre editar os links, talvez não tenha ficado bem explicado, mas na parte
    padding-top: 1px;
    padding-bottom: 1px;

    é só aumentar esses valores e terá mais espaço entre os links.

    vou colocar isso no tutorial, assim ficar melhor explicado.

    ResponderExcluir
  22. Fabiano.
    Obrigada pela ajuda e paciencia
    Consegui colocar a linha e o botão

    ResponderExcluir
  23. Obrigado, pela a explicação.
    valeu.

    ResponderExcluir
  24. Oi,
    Adorei o post super explicativo e jà coloquei no meu blog http://minhacasinhavirtual.blogspot.com/
    Obrigada pela ajuda.

    ResponderExcluir
  25. Olá! Coloquei esta lista aleatória das postagens do blog, ficou muito legal, ....mas... fica aparecendo só um pedaço do que está escrito ao lado das fotos...como faço para deixar aparecendo a foto e também o que está escrito, ou mesmo, só as fotos...Desde já agradeço!
    Meu blog é http://patriciaquadros.blogspot.com

    ResponderExcluir
  26. Patricia Quadros
    a idéia deste código é esse mesmo, mostrar um trecho do texto para deixar as pessoas curiosas e clicarem para ver o restante.

    não tem como alterar isso, veja aqui agora você pode também Criar uma Pagina para divulgar blog (postagens aleatórias)

    ResponderExcluir
  27. Olá Fabiano!

    Este ´etudo que eu queria pois a maioria de widgets deste tipo é em java script,e não é muito bom colocar muitos acripts no blog.

    Abraço!

    ResponderExcluir
  28. webprincipiante.com
    concordo com você que não devemos colocar muitos códigos no blog ao mesmo tempo, justamente por isso precisamos escolher o que achamos que vale mais a pena colocar, e claro fazer testes para achar o melhor.

    ResponderExcluir
  29. Fabiano, eu já tenho esse acessório no meu blog. Mas queria saber se tem algum do mesmo estilo desse, mas que o próprio proprietário do dono escolhesse as postagens que ele ache interessante para aparecer nessa lista. Será que tem?

    ResponderExcluir
  30. Billycious Böy
    não conheço um código que permita escolher as postagens, acho que precisa fazer os links manualmente

    ResponderExcluir
  31. Oi fabiano, eu adoro seu blog me ajuda mto mais eu peguei esse código fiz oque você mando colocar noo layout... etc e apareceu as suas FERRAMENTAS, apareceu a maioria dos seus links e o meu não; oque será, bgs ..

    ResponderExcluir
  32. Elouise
    você trocou o endereço do seu blog no local indicado no código?

    ResponderExcluir
  33. Eu posso modificar o código, mas deixando os créditos pelo original?

    ResponderExcluir
  34. pode modificar o código somente como mostramos neste tutorial, colocando o endereço do seu blog e o numero de postagens que deseja mostrar

    ResponderExcluir
  35. É possível incluir também uma imagem do post?

    ResponderExcluir
  36. vamos preparar outro código mostrando as imagens

    ResponderExcluir
  37. Não funcionou no meu manow :( eu fis tudo certo mudei o endereço aê mais não aparece

    ResponderExcluir
  38. Sega-Downs
    qual o endereço do blog que usou?

    veja aqui se o problema não está no seu feed: Miniaturas das Imagens não aparecem

    ResponderExcluir
  39. Usei o endereço do meu próprio blog

    ResponderExcluir
  40. envie para nosso email o código do jeito que está usando no seu blog

    ResponderExcluir
  41. não quer fucionar como meu site webnode porque será http://passartempo.webnode.com.br/

    ResponderExcluir
  42. Olá, gostei da dica, mas não estou com dificuldade na alteração e inclusão do endereço do blog.preciso de ajuda.help!

    ResponderExcluir
  43. é neste trecho do código ipt src=\"http://dicasparablogs.com.br/feeds/pos

    só precisa tirar o endereço do nosso blog e colocar o seu

    ResponderExcluir
  44. Não consegui, não aparece nada no blog, apesar de fazer tudo que aparece ae D:

    ResponderExcluir
  45. talvez tenha colocado o endereço errado na hora de alterar o código, nós usamos nosso endereço como exemplo, mas ele é .com.br, se você não tiver dominio proprio tem que usar o endereço blogspot, igual faz para acessar seu blog

    ResponderExcluir
  46. parceiro....fiz tudo certinho..mais nao deu certo ;/

    ve o ta acontecendo com esse codigo..abraços

    ResponderExcluir
  47. Fabiano...me tira essa duvida ae por favor...pq o meu nao está dando certo...coloquei o endereço certinho ;/

    to precisando mt dessas postagens recentes aleatorias
    me ajuda
    :)
    abraços

    ResponderExcluir
  48. Mp3 Samba e Pagode
    veja o endereço do seu blog na hora de alterar o código colocar ou não a barra no final do endereço faz o código não funcionar

    ResponderExcluir
  49. coloquei o endereço certinho ;/

    buáááá
    rs

    jah testou o codigo novamente pra ver se ta certinho?
    abraços

    ResponderExcluir
  50. olá, como faço para colocar um espaço antes do link da postagem? Não entre os links, mas sim antes dos links.
    Exemplo:

    Dicas para blogs
    COM ESPAÇO:
    Dicas para blogs

    Queria saber como colocar o espaço pois fica muito junto a linha do gadget.
    tentei colocar center, mas ficou meio estranho. Ajuda ai...vlw

    ResponderExcluir
  51. no caso deste código que mostramos poderia aumentar o valor 1px no padding (bottom - abaixo ou top - acima)

    ResponderExcluir
  52. oi, mudo legal esse widget, funcionou certinho, mas como faço pra mudar a cor preta das letras?

    ResponderExcluir
  53. Rocames no trecho .lista a{......

    coloque color:#000;

    isso é a cor preta, se precisar veja aqui o Código das Cores

    ResponderExcluir
  54. Como que Faço Para Minhas Postagem ,Colocar em outra Pagina ?

    ResponderExcluir
  55. Gel Jefferson não entendi sua pergunta.

    quer colocar o que em outra pagina?

    ResponderExcluir
  56. Não deu certo... =/

    ResponderExcluir
  57. muitas vezes dá erro porque na hora de trocar o endereço do blog fica faltando ou sobrando algum sinal como por exemplo uma barra / " ' e outros

    ResponderExcluir