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

Hey! Como vão hoje queridos bunnie's? Estou um pouco cansada hoje, então a postagem sera bem simples e rápida, hoje venho trazer um widget de postagem aleatórias, na verdade é um botão que ao clicar o visitante para em uma postagem surpresa, isso é incentiva o leitor fica mais tempo em seu blog, e ate mesmo brincarem um pouco com o botão. Deixei um exemplo dele logo abaixo, você pode personalizar como desejar, como também pode utilizar uma linda imagem. Créditos ao blog TDW. 

1. Vá em Layout e abra um novo  Gadget Java/Script  e dentro dele cole:

Códigos

<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>

A parte onde esta escrito em Random Post, marcado em negrito você pode mudar por outra palavra, como Postagem aleatória, ou Estou com sorte.

2. Agora vamos personalizar com CSS, deixar o nosso nosso botão bonitinho.  Para isso vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, procure por  ]]></b:skin>, e abaixo dele cole:

Códigos

<style>
div#myLuckyPost {
position: relative;
display: inline-block;
margin: 20px;
}
div#myLuckyPost:after {
content: "";
height: 100%;
width: 100%;
padding: 4px;
position: absolute;
bottom: -15px;
left: -4px;
z-index: -1;
background-color: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#myLuckyPost a:active {
top: 10px;
background-color: #F78900;
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}
div#myLuckyPost a {
color: white;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-align: center;
text-decoration: none;
background-color: #f45145;
display: block;
position: relative;
padding: 20px 40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);
-webkit-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #CA2121;
-moz-box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #CA2121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>

Salve e veja o resultado! Se você desejar alterar o nome de exibição por uma imagem, basta apenas inserir este código no lugar do nome Random Post:

Códigos

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVc0IDlAv2o5Zgg5N0lzNtKAr0pIrOG6EDI9cLwh_FkNU7njvSkPUfWmA17CN0_wEpInzpe0JcFpjCqE8oNysMhlk6obI8znlAHq6GfbltzhbW4ee0u89kfFFZdxUaN_scjRH7ltYW3TA/s1600/post.png"/>

Então o código ficara assim:

Códigos

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6XvctOslsVbQdQlPQBttw8JHRUyRhngL67IjjbhpCiwQMq2fc0Jz3WNhEsyEqmh8M6jgRCX2TAL-JovGHNcsr4D2HvczSP8BO7jwF3H_8ycVAzVik0I0zA5VD5TcqY_-nPdFymnFF0DNW/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>

Você pode inserir outra imagem no lugar, deixando mais apropriado ao seu blog. =)