Uma boa maneira de manter seus visitantes ocupados e permitir que eles passem mais tempo em seu site é usar o botão “Publicação aleatória”. Recentemente, um de nossos visitantes nos perguntou como adicionar um botão de postagem aleatória no Blogger. Este botão pode ser colocado em qualquer lugar do seu site, proporcionando aos visitantes a flexibilidade de que, quando clicado, levará os visitantes a uma postagem aleatória completa. Em outras palavras, ele exibirá postagens aleatórias, toda vez que o botão for clicado. Isso é realmente fácil de conseguir, então neste artigo mostraremos como adicionar um botão de postagem aleatória no Blogger.
Antes de começar, confira a demonstração ao vivo deste widget "Publicação aleatória". Você pode jogar com ele, e ele o levará ao post aleatório em cada acerto.
Postagens aleatórias
A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger e ir para a seção Modelo >> Editar HTML. Agora, dentro da codificação do modelo, procure a tag final </body> e logo acima dela cole a seguinte parte da codificação JavaScript.
<script type="text/javascript">/*<![CDATA[*/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('mbl-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">/*]]>*/</script>
Agora, para criar um link de postagem aleatório e colocá-lo em um local desejado do seu site, cole o seguinte código em qualquer lugar que desejar. Por exemplo, na sua navegação e ele se transformaria automaticamente em um botão de postagem aleatório. Quando tudo estiver pronto, salve seu modelo pressionando o botão "Salvar modelo".
<div id="mbl-random"></div>
Parabéns: você adicionou com sucesso um botão de postagem aleatória em seu blog do blogger. Agora vá e verifique seu site para ver se tudo está funcionando de acordo com os planos. Se você seguiu as instruções corretamente, temos certeza de que não enfrentará nenhum erro.
Como estilizar o botão de publicação aleatória?
Tenho certeza de que as pessoas gostariam de destacar seu botão de postagem aleatória (fantasia dos outros). Você pode usar o seguinte trecho de código CSS para personalizar ou estilizar seu botão. Você pode fazer com que pareça totalmente diferente e também pode usar a mesma codificação CSS que fornecemos abaixo (Lembre-se: você deve colar o seguinte código logo acima da tag ]]></b:skin> presente na codificação do seu modelo).
#mbl-random a {background-color:#3bb3e0;padding:10px;position:relative;font-family: 'Open Sans', sans-serif;font-size:12px;text-decoration:none;color:#fff;border: solid 1px #186f8f;background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#mbl-random a::before {background-color:#ccd0d5;content:"";display:block;position:absolute;width:100%;height:100%;padding:8px;left:-8px;top:-8px;z-index:-1;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;}#mbl-random a:active {padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)));}
Esperamos que este tutorial possa ter ajudado você a aprender como adicionar um botão de postagem aleatória no blogger. Quantos de vocês já estão usando este botão? Quais são seus benefícios e quanta conversão está trazendo para o seu site. Gostaríamos muito de ouvir suas opiniões e opiniões sobre este tópico, sinta-se à vontade para deixar comentários preciosos abaixo.
Tags:
INTERNET
