[Tutorial] Como colocar botão post aleatório no blog?

Olá pessoal tudo bem hoje irei ensinar como criar um post aleatório e personalizá-lo. Este widget é útil em blogs que tenham muitas postagens e deste modo fica mais fácil para o leitor poder ter acesso a postagens mais antigas.
O código é em JavaScript, ele permite edição.

Em primeiro lugar vamos aprender a criar um botão de Post aleatório com imagem. Vamos em -> Adicionar Adicionar Gadjet -> Selecione HTML/JAVASCRIPT e adicione o código abaixo.

<div id="myLuckyPost1"></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 = ''; document.getElementById('myLuckyPost1').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>

<span class="wlWriterPreserve" id="preserve0494d138efe349cc96867b72108cbb45"><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="http://uuuiiii.zip.net/arr_blog_109_ran2.jpg"/>'; document.getElementById('myLuckyPost1').appendChild(a); } </script></span> <span class="wlWriterPreserve" id="preserved0d51eabe3024fba8115ec3460b82bbb"><script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=feelingLucky"></script></span>

A imagem, ficara deste forma:

Pronto! Agora salve e visualize!

Podem substituir a imagem alterando a parte que está em vermelho por outra.

Gostou? Então deixe seu Comentário e Compartilhe com seus amigos!