Botão de Postagem Aleatória (Random Post) no Blogger

8 de abril de 2014

5 comentários:
Um recurso bem interessante e útil em blogs com muitas postagens e com temas variados é o botão de Postagens Aleatórias, o Random Post. Este recurso tem a simples função de carregar uma postagem aleatória do seu blog, quando clicado. Não levando em consideração nenhum termo de busca ou referência para a escolha do artigo, algo realmente aleatório.

Este recurso é muito útil em blogs com temas como curiosidades, onde o número de posts é grande e nem sempre se releva a questão da data de um artigo ou se ele é recente ou não, em blogs com este tema. Para inserir o recurso você deverá inserir um gadget HTML/JavaScript, com o código deixado na postagem. Faça os passos descritos abaixo:

Insira um gadget HTML/JavaScript.

1. No painel de controle, clique em Layout.


2. Clique no link Adicionar um Gadget.
3. Será aberta uma guia, nela procure pelo gadget HTML/JavaScript.

4. Cole o código (encontrado no item seguinte) no gadget, e clique em Salvar.


Sobre o código do botão

O código do gadget é em JavaScript, com algumas alterações possíveis (caso tenha conhecimento sobre a linguagem), ao contrário será possível apenas alterar o nome de exibição ou então o nome por uma imagem. Reforço que encontrei este código na internet, e não fui eu quem o desenvolveu, e até por isso não saberei dar um suporte a dúvidas referentes a ele. Vamos ao código:
<div id="myLuckyPost"></div> <span id="preserve0494d138efe349cc96867b72108cbb45" class="wlWriterPreserve"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script></span> <span id="preserved0d51eabe3024fba8115ec3460b82bbb" class="wlWriterPreserve"><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></span>
O trecho destacado em vermelho, o Random Post pode ser alterado por outro nome de exibição, como Postagem Aleatória, ou algo que desejar.

Se você desejar alterar o nome de exibição por uma imagem, basta apenas inserir este código no lugar do nome Random Post:
<img src="https://lh4.googleusercontent.com/-ccz7AKVrwXw/U0RpqOtrHbI/AAAAAAAAEZo/DKqgIkRDs7U/h40/img.png"/>
Deixando o código final desta maneira:
<div id="myLuckyPost"></div> <span id="preserve0494d138efe349cc96867b72108cbb45" class="wlWriterPreserve"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = '<img src="https://lh4.googleusercontent.com/-ccz7AKVrwXw/U0RpqOtrHbI/AAAAAAAAEZo/DKqgIkRDs7U/h40/img.png"/>'; document.getElementById('myLuckyPost').appendChild(a); } </script></span> <span id="preserved0d51eabe3024fba8115ec3460b82bbb" class="wlWriterPreserve"><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></span>

Esta será a imagem de exibição, se desejar usar o botão com imagem, ao invés do link:

 

Se você possuir outra imagem que deseje inserir no lugar desta, bastará alterar o link em vermelho pelo link do URL da sua imagem. O uso de um link comum ou de uma imagem não afetará na exibição ou funcionamento do recurso, apenas altera seu visual, portanto isso fica a gosto de cada um. E é isso, aí. Dúvidas? Comentem!

5 comentários:

  1. Olá, quando você começou a se interessar pelo Blogger?

    ResponderExcluir
    Respostas
    1. Olá Michael,

      A uns 2 anos, quando conheci o Blogger com pretensões de criar blogs de downloads, se não me engano :)

      Excluir
  2. Olá Henrique.

    Eu utilizei uma ferramenta muito parecida com esta, mas enfrentei um problema de demora no carregamento, então tive que remover. Mas funciona :D

    Calebe B.
    pramsopa.blogspot.com

    ResponderExcluir
  3. Olá, Henrique! Tudo bem? Por gentileza, mano, você sabe se há como evitar que postagens de determinada categoria sejam excluídos dessa "aleatorização"? Tipo, tenho as categorias no blog, mas prefiro que os posts de uma em específico não saiam quando o visitante clicar no botão de postagem aleatória. Agradecido, cara. Deus te abençoe! =]

    ResponderExcluir