Blogger: Widget degli Articoli Casuali con Miniature Ruotanti.

Come installare un widget degli Articoli Casuali con Miniature Ruotanti in un blog su Blogger.

Per mantenere i navigatori dentro il nostro sito bisogna invogliarli a leggere altri nostri contenuti oltre alla pagina che stanno già consultando. Per questa ragione vengono installati alcuni widget che mostrano le pubblicazioni più recenti (Ultimi Articoli), i contenuti più apprezzati (Post più popolari), le ultime discussioni (Commenti Recenti) e i post con gli stessi contenuti (Articoli Simili).

La presenza di questi quattro widget è la configurazione classica per un blog su piattaforma Blogger ma si può decidere di mostrare anche altro materiale come per esempio un pulsante per scegliere un articolo a caso. Seguendo questa falsariga si può creare anche un widget per visualizzare un intero elenco di articoli scelti a caso. In questo post vedremo appunto come installare un widget che mostri degli articoli casuali con i relativi titoli e le miniature ruotanti. Il navigatore che ci cliccherà sopra sarà indirizzato al post corrispondente

Per l'installazione di questo gadget non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style type="text/css"> #post_casuali img{float:left;margin-right:10px;margin-bottom:10px;width:55px;height:55px;padding:3px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);border-radius:999em;-moz-border-radius:999em;-webkit-border-radius:999em;-o-border-radius: 999em;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #post_casuali img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);} </style><div id='post_casuali'>
<script type='text/javaScript'>
var IPCEI_numposts=6;var IPCEI_snippet_length=150;var IPCEI_comment='Commenti';var IPCEI_disable='Commenti Disabilitati';var IPCEI_current=[];var IPCEI_total_posts=0;var IPCEI_current=new Array(IPCEI_numposts);function totalposts(a){IPCEI_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<IPCEI_numposts;i++){var a=false;var b=get_random();for(var j=0;j<IPCEI_current.length;j++){if(IPCEI_current[j]==b){a=true;break}};if(a){i--}else{IPCEI_current[i]=b}}};function get_random(){var a=1+Math.round(Math.random()*(IPCEI_total_posts-1));return a};
</script>
<script type="text/javascript">
function articoli_casuali(json){for(var i=0;i<IPCEI_numposts;i++){var entry=json.feed.entry[i];var IPCEI_posttitle=entry.title.$t;if('content'in entry){var IPCEI_get_snippet=entry.content.$t}else{if('summary'in entry){var IPCEI_get_snippet=entry.summary.$t}else{var IPCEI_get_snippet="";}};IPCEI_get_snippet=IPCEI_get_snippet.replace(/<[^>]*>/g,"");if(IPCEI_get_snippet.length<IPCEI_snippet_length){var IPCEI_snippet=IPCEI_get_snippet}else{IPCEI_get_snippet=IPCEI_get_snippet.substring(0,IPCEI_snippet_length);var space=IPCEI_get_snippet.lastIndexOf(" ");IPCEI_snippet=IPCEI_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var IPCEI_commentsNum=entry.thr$total.$t+' '+IPCEI_comment}else{IPCEI_commentsNum=IPCEI_disable};if(entry.link[j].rel=='alternate'){var IPCEI_posturl=entry.link[j].href;if('media$thumbnail'in entry){var IPCEI_thumb=entry.media$thumbnail.url}else{IPCEI_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknZpW41DVyTohq2YfbD4cINbvjrYvHgyn49e11DjVXJgW93PFo2ATWuue9r6bJCcrTVawzNX0HNJVBigOrMYqPg5Kx97PVg8MVa5pM8a3Wra_l2CRuBaIExZpsyrzQjlAx69GvS_gW1KC/s48-Ic42/no-image.jpg"}}};document.write('<p>');document.write('<img alt="'+IPCEI_posttitle+'" src="'+IPCEI_thumb+'"/>');document.write('<div><a href="'+IPCEI_posturl+'" rel="nofollow" title="'+IPCEI_snippet+'">'+IPCEI_posttitle+'</a></div>');document.write('<div style="clear:both"></div></p>')}};getvalue();for(var i=0;i<IPCEI_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+IPCEI_current[i]+'&max-results=1&callback=articoli_casuali\"><\/script>')};
</script>
</div>

Lo snippet, ovvero l'incipit del post, non sarà visibile immediatamente ma sarà mostrato quando si passerà con il mouse sopra al titolo

L'impostazione più importante è quella del numero dei post da mostrare var IPCEI_numposts=6; insieme alla modifica dei codici dei colori da rendere omogenea al nostro sito. I colori sono stati introdotti con del gradiente e quindi hanno un colore di partenza e uno di arrivo. L'URL colorato di rosso è l'indirizzo della immagine di default che viene mostrata qualora nel post non ce ne siano. 

Demo
Clicca qui