Slideshow degli Articoli Recenti con effetto Libro che si Sfoglia.

In realtà l'effetto utilizzato per la realizzazione di questo gadget si chiama Book Flip e non Libro che si Sfoglia, è caricato su Dynamic Drive e il suo autore è l'olandese Ger Versluis. La sua realizzazione risale a otto anni fa ma è ancora molto suggestivo. Attraverso questo gadget si riesce a mostrare le immagini degli ultimi post in ordine naturale o casuale con relativo link. La particolarità sta nel fatto che il movimento di scorrimento avviene come l'apertura di pagine di un libro.

• Demo degli Ultimi Post con Book Flip -

Una immagine animata spiega il funzionamento di questo slideshow più di mille parole

Per installare il widget si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si aggiunge questo codice

<script type="text/javascript">
/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
// 7 variabile per controllare l'effetto
var Book_Image_Width    =300;
var Book_Image_Height   =300;
var Book_Border         = true;
var Book_Border_Color   ="gray";
var Book_Speed          =15;
var Book_NextPage_Delay =1500; // 1000 = 1 secondo
var Book_Vertical_Turn  =0;
//variabili per i contenuti
var random_posts        = false; // post casuali
var numposts_gal        = 10;   // numero di articoli della galleria
</script>
<noscript><a href='http://goo.gl/bonnc' target='_blank'><span style='font-size: x-small;'>Book Flip Effect</span></a></noscript>
<script src="https://sites.google.com/site/scriptperilblog/widget-1/bookflip.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptperilblog/widget-1/bookflip2.js" type="text/javascript"></script>
<div id="Book" style="position:relative">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmhsd_vXsdO5cKYnwz228e42HJH-vHp8jc7yj-G16pCzkKtlNKOkMCWWk4y4un58j1jDbNPCGhC0zylHlFf2H3bDXO0cDskyIK_Z9C-tachk6OW8_Lyxl-2lxPCchsvvsZUfHl6wrKpo/s128/placeholder.gif" width="304" height="304" />
</div>
<script src="http://demo-blogger-widget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>

Si salva e si posiziona con il mouse. In totale si possono modificare ben 9 parametri. Il dato più importante è quello relativo alla larghezza e all'altezza delle immagini. Considerate che 300 pixel di larghezza di una immagine ci porta a 600 pixel di larghezza per tutto il widget. Se decidete di inserire questo widget in una sidebar, potete benissimo dimezzare questi valori. Per esempio a 150x150 pixel. In questo caso ricordatevi di modificare anche le altre dimensioni del contenitore del widget e portarle per esempio a 154x154 pixel. I valori per larghezza e altezza non debbono coincidere necessariamente.

Gli altri parametri riguardano l'inserimento del bordo alle immagini (true o false), il colore dello stesso bordo, la velocità di scorrimento, l'intervallo tra una immagine e l'altra, la visualizzazione delle miniature in ordine casuale (true o false) e il numero dei post da mostrare nella galleria. Naturalmente occorre anche inserire l'URL della homepage del vostro blog su Blogger per poterne acquisire i feed.

Osservazioni conclusive: Con il codice proposto nel post, il widget non funzionerà con Internet Explorer. Però se aprite la pagina Demo che ho messo in rete vedrete che il gadget è perfettamente visibile anche con Internet Explorer 8 e 9. Questo perché ho caricato i due file javascript su DropBox. Non vi posso dare il link perché il mio DropBox ha dei limiti di banda ma potete crearvi un account se ancora non lo avete, scaricare questi due file

 https://sites.google.com/site/scriptperilblog/widget-1/bookflip.js
https://sites.google.com/site/scriptperilblog/widget-1/bookflip2.js

caricarli nella cartella Public di DropBox e ottenerne il link diretto da sostituire nel codice. Nel primo javascript c'è anche l'URL della immagine che apparirà nel widget nel caso in cui non ce ne fosse nessuna in un post. Può essere sostituita con un'altra esteticamente più valida e più adatta al vostro blog. Queste considerazioni valgono immutate anche per il widget degli Ultimi Articoli con l'effetto RoundAbout.