Aprenda a inserir um botão para exibir postagens aleatórios - Blogger

Um leitor pediu-me para o ajudar a colocar no seu blog um botão que coloca-se para leitura do seu visitante um post aleatório, como ainda não tinha disponibilizado esta funcionalidade para os meus leitores e seguidores decidi explicar para todos os interessados como isso se faz..

Esta funcionalidade é bastante interessante e fácil de se aplicar, vamos então ver como o fazer;

1º passo: Comece por abrir o painel de controle do seu blog.

2º passo: Vá até o editor de Layout.

3º passo: Neste clique em adicionar um Widget.

4º passo: Escolha a HTML/JavaScript

5º passo: Dentro desta cole o código abaixo.

<div id="aliatoryPost"></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 = '<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Ver Post Aleatório" border="0" alt="Ver Post Aleatório" src="https://dl.dropboxusercontent.com/u/3883727/CarlinhosExplica/FuncionalidadesPosts/images/aliatorio.png" width="120" height="120" /></p>'; document.getElementById('aliatoryPost').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>

6º passo: Pode agora alterar a imagem do botão, basta para isso que coloque o url dessa imagem no scr do código acima e que está a vermelho.

Pronto agora é só guardar e testar. Se ficar a seu gosto, deixe como está e agora os visitantes do seu blog já podem clicar neste botão e terem um post aleatório para lerem

Share This :