Slideshow degli ultimi articoli con miniature, uno straordinario widget per Blogger.

Quello che vado a presentarvi è sicuramente uno dei gadget più affascinanti per la piattaforma di proprietà di Google. E' stato creato dal grande blogger indonesiano Abu Farhan Albanjari autore di molti altri plugin che ho tradotto in italiano. L'idea è quella di presentare uno slideshow in cui vengono mostrati gli ultimi articoli corredati da miniature. Ci sarà uno scorrimento naturale che permetterà al lettore di visualizzare un numero predefinito di articoli. In ogni rettangolo sarà visibile il collegamento al post con la miniatura della prima immagine presente, il titolo, la data e il numero dei commenti. Per avere un'idea di quello di cui sto parlando andate a guardare, in alto a destra, la

• Demo dello slideshow degli ultimi articoli per Blogger -

Per ottenere questo effetto si utilizza la tecnologia JQuery (libreria di funzioni in Javascript) con la tecnica Ajax che consente l'aggiornamento dinamico di una pagina senza il ricaricamento da parte dell'utente. Il widget ha un'unica pecca che per adesso non è stata ancora risolta. Non riesce cioè a mostrare il sommario dell'articolo come mi è stato anche fatto notare in un commento.
Ma veniamo al codice semplicemente da incollare su Design > Aggiungi un gadget > HTML/Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:340px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:72px;
overflow: hidden;
background:#fff url(http://hgavqa.blu.livefilestore.com/y1pZTPL3rn8D7HlTL-M1SzV17ZT3B9MzCkegyNt7aTZUrF3edUefcfoJACfprZ8QTAid-cEApkFmM9rxkd7vvqSZXJbfLpayXFx/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = true;
summaryPost = 50;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 8;
home_page = "http://demo-parsifal32.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<noscript><a href='http://goo.gl/19Llt' target='_blank'><span style='font-size: x-small;'>Slideshow Widget</span></a></noscript>
<div id="spylist">
    <script src='http://sites.google.com/site/ideepercomputeredinternet/script-1/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Le parti evidenziate in rosso sono tutte quelle che sono più soggette a personalizzazioni

1. width: 350px; rappresenta la larghezza dei singoli box e può essere adattata alla larghezza della nostra sidebar
2. width: 340px; è invece la larghezza interna che deve essere in qualche modo inferiore a quella esterna
3. height: 72px; è l'altezza del box e deve essere calcolata in modo da rendere visibili le miniature
4. imgr[0], [1], [2], ecc sono gli URL delle miniature che appariranno quando nei post non sono presenti delle immagini. Ho inserito cinque immagini di natura che possono però essere sostituite da altre preventivamente caricate su hosting tipo Skydrive, ImageShack, Tinypic, ecc
5. 70 sono i pixel della larghezza e dell'altezza delle miniature. La loro dimensione può essere adattata alle esigenze del nostro modello
6. 12 è la dimensione dei caratteri del titolo
7. commenti è il testo che viene visualizzato accanto al loro numero; se si toglie si vedrà solo il numero tra parentesi
8. showPostDate = true; significa che si vuol mostrare anche la data del post. In caso contrario si sostituisce true con false
9. numposts =8; è una delle variabili fondamentali. Infatti il widget è creato in modo da mostrare contemporaneamente le miniature di quattro articoli. Il numero che viene inserito determinerà quanti saranno gli ultimi post che alternativamente saranno visualizzati dal lettore nello slideshow
10. In home_page dovrà essere inserito l'URL del blog (meglio se comprensivo di slash finale)

L'installazione è semplicissima. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice dopo aver effettuato le nostre personalizzazioni. Si clicca su Salva, con il mouse, si posiziona nel punto desiderato e si clicca nuovamente su Salva. Con pochi click vi ritroverete veramente un widget straordinario.
Fonte | Recent Post for Blogger with thumbnails and simple spy -
Aggiornamento: in seguito al superamento della larghezza di banda dell'immagine caricata su Photobucket mi sono visto costretto a ricaricarla su un altro hosting. Coloro che avessero il widget non funzionante possono ricopiare il nuovo codice o sostituire semplicemente l'URL dell'immagine di sottofondo evidenziato di rosso. Per evitare nuovi problemi di superamento può essere utile caricarla su un proprio spazio.