Come inserire un pulsante per andare in un articolo a caso.

Come mostrare nei blog di Blogger un pulsante per aprire un articolo casuale.

Seguendo la falsariga del post per inserire un invito a leggere un altro articolo a caso vediamo come si possa creare un bottone per effettuare questa operazione in modo continuativo. Il menù presente sul sito insieme ai widget degli Ultimi Post e a quello delle etichette possono creare interesse nel lettore che per questo decide di continuare nella esplorazione del nostro sito. Un pulsante per andare in un altro articolo a caso può sicuramente generare del traffico aggiuntivo se non altro per coloro che ci cliccano sopra non fosse altro che per semplice curiosità o per verificarne il funzionamento.

Il posizionamento del pulsante è a scelta. Si può inserire in una sidebar, nel modello per visualizzarlo all'inizio o alla fine dei post, nel footer o in altra posizione.

Anche il testo e l'aspetto del bottone sono come vedremo completamente personalizzabili. Dopo aver 

salvato il template andate su Modello > Modifica HTML e cercate il tag </body>.  Subito sopra a questa riga incollate il seguente codice

<!-- Pulsante Post Casuale Inizio -->
<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 = 'Articolo a caso'; document.getElementById('ipcei-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>
<!-- Pulsante Post Casuale Fine -->

Salvate il modello. Adesso occorre posizionare il bottone. Vediamo come procedere nel caso volessimo inserirlo in una sidebar. Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla questa semplice riga

<div id="ipcei-random"></div>

Si salva e si vedrà il link Articolo a caso. Tale espressione può essere modificata ricordandoci che non si possono usare apostrofi ed è anche meglio lasciar perdere lettere accentate. Per renderlo più visibile bisogna creare uno stile specifico per id="ipcei-random". Si va sempre su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla il seguente codice

/* Random Post */   
#ipcei-random a {
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:14px;
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;
}
#ipcei-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;
}
#ipcei-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))
);
}

Si salva il modello.

Si potranno modificare i codici dei colori, l'arrotondamento e l'ombreggiatura del bottone e pure il gradiente utilizzando per esempio la comoda estensione ColorZilla.

Fonte | My Blogger Lab -