sexta-feira, 19 de setembro de 2014

Como criar post aleatório e personalizar - Blogger

´

Boas, 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. Contudo se você não perceber de JavaScript, vai poder apenas escolher uma imagem, ou deixar em texto e editá-lo com CSS. Em primeiro lugar vamos aprender a criar um botão de Post aleatório com imagem.  Vamos à secção Esquema -> Adicionar miniaplicação -> HTML/JAVASCRIPT e colocam o seguinte código para obterem um botão de post aleatório com imagem, ficara deste forma:


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

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

Para personalizar o post aleatório por CSS usem este código:

<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 = 'Post Aleatório'; 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>

Podem substituir o texto Post Aleatório que está de cor vermelha para outro texto.

Vamos à parte do CSS

Para criarem um post aleatório igual ao meu depois de adicionarem o código JavaScript adicionem este código abaixo:


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

Se perceberem de CSS podem personalizar o código se não, podem-me pedir nos comentários que eu faço para vocês. Espero que tenham gostado e saibam como colocar um post aleatório no vosso blog. Mais uma aula de TugaDesignWeb

3 comentários:

  1. oi amigo, parabéns pelo blog!!! eu amei e estou aprendendo com vc!!!muito!!!, vim doa blog Agenda dos Blogs , curti sua pagina no facebook, beijinhosssssssssssssss


    rubiaartes.blogspot.com.br

    ResponderEliminar
    Respostas
    1. Boas, obrigado! Se precisar de algo para seu blog que tenha a ver com design, avise que eu ajudo!

      Cumps

      Eliminar