25/07/2017

Tutorial: 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:
<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:
<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:
<img src="https://3.bp.blogspot.com/-IUCK0CQmdHk/WXwKEGWRUDI/AAAAAAAApC4/PjBcqFuQp5w5SbP986S_Jt_mXSN277gDgCLcBGAs/s1600/post.png"/>

Então o código ficara assim:
<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>
Você pode inserir outra imagem no lugar, deixando mais apropriado ao seu blog. =)

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram