Widget di uno slideshow orizzontale con miniature degli Ultimi Post per Blogger.

Sono sicuro che il gadget che vado a presentarvi piacerà a molti lettori e credo che saranno in tanti a istallarlo. Diciamo che va a colmare una lacuna nei widget di Blogger. Per il momento infatti di slideshow orizzontali che mostravano gli ultimi post ce n'era solo uno e con una estetica non proprio straordinaria. La realizzazione di questo widget si basa sulla libreria JQuery CarouFredSel. Si tratta di un plugin che genera degli slideshow  di immagini.

E' opportuno installarlo nella parte principale del layout, magari subito sopra all'area del post. Verranno visualizzate le miniature degli ultimi post in un movimento orizzontale da destra a sinistra. A ciascuna miniatura sarà associato il link al post corrispondente. Il movimento dello slideshow si interromperà quando ci si passerà sopra con il mouse ma solo dopo un lasso di tempo di circa due secondi. Quando si punta una miniatura, si visualizzerà il titolo dell'articolo

Ho anche pubblicato in rete una Demo dello slideshow delle miniature degli articoli recenti. L'installazione non presenta particolari difficoltà e si presta anche a qualche personalizzazione. Se usate ancora la vecchia Bacheca andate su Design > Modifica HTML mentre se usate quella nuova, andate su Modello > Modifica modello. Salvate il modello completo per un eventuale backup di ripristino, cercate la riga ]]></b:skin> e, subito sopra, incollate questo codice

/* CAROSELLO SLIDESHOW */
#carosello ul{
margin:20px 5px;
padding:10px;
width:1070px !important;
height:100px !important;
overflow:hidden;
}
#carosello li{
margin:5px;
list-style:none;
position:relative;
float:left;
}
#carosello img{
width: 80px !important;
height: 80px !important;
border: 1px solid #CCCCCC;
background: #FFFFFF;
padding:5px;
}

Le personalizzazioni riguardano le dimensioni del widget, quelle delle miniature (80 pixel), i margini esterni al widget (margin) e quelli interni (padding). Si può anche configurare lo stile del bordo delle foto e il colore di sfondo (background) tra bordo e miniatura. Lo sfondo del gadget sarà invece ereditato dai colori del blog in cui viene installato. Adesso cercate la riga </body> che si trova quasi in fondo al modello. Subito sopra incollate quest'altro codice 

<!-- CAROSELLO ORIZZONTALE INIZIO -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/jquery.carouFredSel-4.4.1-packed.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#carosello ul&quot;).carouFredSel({
auto    : {
items : 1,
duration     : 2500,
easing     : &quot;linear&quot;,
pauseDuration    : 0,
pauseOnHover    : true
}
});
});
</script>
<noscript><a href='http://goo.gl/kVY5M' target='_blank'><span style='font-size: x-small;'>Carousel FredSel</span></a></noscript>
<!-- CAROSELLO ORIZZONTALE FINE - www.ideepercomputeredinternet.com -->

Il valore 2500 determina la velocità di scorrimento. A valori più alti corrisponde una velocità più bassa. Tale parametro può essere personalizzato secondo le vostre esigenze. Si salva il modello. Adesso non resta che creare un elemento pagina per mostrare il widget. Si va quindi su Design > Aggiungi un gadget (Layout > Aggiungi un gadget nella nuova Bacheca) e si seleziona HTML/Javascript. In Sezioni del sito si incolla questo nuovo codice

• Slideshow orizzontale delle miniature degli ultimi post -

I parametri da modificare sono colorati di rosso e riguardano

1. L'immagine da visualizzare nel caso non ce ne fossero nel post. Da caricare su Picasa e ottenerne il link diretto, meglio se quadrata.
2. Il numero dei post da mostrare nello scorrimento orizzontale (20 nel codice proposto)
3. L'URL del vostro blog da sostituire all'indirizzo di questo sito

Si salva e, con il mouse, si posiziona nel punto desiderato. Si salva nuovamente e si controlla il risultato. Enjoy.