Widget degli Ultimi Post con effetto Round About.

Come installare lo slideshow navigabile delle immagini degli Ultimi Post con effetto Round About per Blogger.

Continuo nella presentazione di widget che oltre ad avere una loro utilità sono anche originali e belli da vedere. Dopo il gadget delle immagini degli Ultimi Articoli che si aprono come un libro con effetto Book Flip presento sempre un widget che mostra le immagini degli Ultimi Post ma in modo circolare e sovrapposto con la possibilità da parte del lettore di navigare tra queste immagini con il mouse. Questo effetto è stato denominato Round About dal suo autore. Quando si passa con il cursore sopra a una foto viene visualizzato un tooltip con il titolo del post relativo. 

In questo modo si può portare al centro l'immagine dell'articolo che ci interessa. Cliccandoci sopra si viene diretti al post. Questo widget ha come controindicazione quella di essere molto largo per ovvie ragioni e che quindi non può essere posizionato in una sidebar ma nell'area sopra il post oppure nel footer.

Per l'installazione dopo aver salvato il template si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera a sinistra della sezione <b:skin> per visualizzare tutto il codice. Con la combinazione di tasti Ctrl+F si cerca la riga ]]></b:skin>. Subito sopra a questa si incolla il codice dei fogli di stile del gadget 

#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important; height:180px; width:350px; cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active, .roundabout a:focus, .roundabout a:visited  {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

Successivamente si cerca la riga </body> e, subito sopra, si incolla questo nuovo codice 

<!-- jQuery Roundabout Inizio -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/><script charset='utf-8' src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/jquery.roundabout-1.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
var interval;
$(&#39;#featured ul&#39;)
.roundabout({
duration: 600 }
)
.hover(
function() {
clearInterval(interval);
},
function() {
interval = startAutoPlay();
}
);
interval = startAutoPlay();
});
function startAutoPlay() {
return setInterval(function() {
jQuery(&#39;#featured ul&#39;).roundabout_animateToNextChild();
}, 5000);
}
</script>
<!-- jQuery Roundabout Fine -->

Si salva il modello. Si possono personalizzare dimensioni e codici dei colori oltre alla durata della riproduzione automatica che parte quando si apre la pagina. L'installazione non è ancora conclusa visto che dobbiamo andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito,  incollare questo ultimo codice 

<script style="text/javascript" src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/roundabout.js"></script><script style="text/javascript">
var numposts_gal = 8;
var random_posts = false;
</script>
<script src=http://demo-blogger-widget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts></script>

Si salva l'elemento pagina e si posiziona quindi si clicca su Salva disposizione. Si possono settare il numero dei post da mostrare (8), l'opzione di mostrare post casuali (true al posto di false). Fondamentale è l'inserimento dell'URL del nostro sito al posto di quello che ho usato come test ricordandosi di usare il .com e non il localizzato .it. Si possono anche mostrare i post solo di una determinata etichetta modificando l'indirizzo dei feed in modo opportuno. 

Concludo ricordando che i file javascript colorati di viola li ho caricati su Google Drive e che la riga evidenziata di giallo è la libreria JQuery.