Slideshow di miniature e riassunto con link ai post.

In Blogger esiste lo splendido widget dello slideshow degli ultimi post che mostra gli ultimi articoli in verticale, ottimo per essere inserito in una sidebar. Mi è stato più volte chiesto se esisteva un analogo gadget in orizzontale. Al momento non mi risulta che qualche sviluppatore si sia cimentato con successo in questa realizzazione. Quello che presenterò adesso è un widget di uno slideshow con collegamento ai post, non ai più recenti acquisiti dai feed, ma solo ad alcuni particolarmente interessanti che vogliamo porre in primo piano.
In realtà non si tratta neppure di uno slideshow ma di una rotazione di articoli con effetto slide. Come è mia abitudine ho pubblicato una

• Dimostrazione del widget Slideshow di miniature con sommario -

Il gadget è visibile nella sidebar in alto a destra e mostra a rotazione gli articoli linkati con effetto scorrimento

E' visibile la scritta Leggere tutto… per aprire l'articolo collegato. Può essere utilizzato pe richiamare alcuni post del blog che vogliamo porre all'evidenza dei lettori e dei motori di ricerca. Ricordo che ai fini SEO è particolarmente importante linkare un post in Home Page per favorirlo nel posizionamento. L'installazione segue i soliti canoni. Si va su Design > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<!--Galleria Slideshow Inizio-->
<style type='text/css'>
#thumbslide { width: 200px; height: 220px; border: 1px solid #dddddd; background-color: #ffffff; }
#thumbslide a {margin-right:6px; background: #CCCCCC; color:#333333;
float:right; font-size:12px; margin-top:6px; padding:2px;
}
#thumbslide a:hover {text-decoration: none; background: #C4C4C4;}
#thumbslide div { color:#333333; font-size:12px; height:210px; padding:8px; text-align:left; width:190px; margin-top:0px; font-family:Arial,helvetica,sans-serif;}
thumbtitle{font-family:Arial,helvetica,sans-serif; font-size:13px; font-weight: bold;}
#thumbslide div img { background:#FFFFFF; border:1px solid #F4F4F4; float:left;
height:80px; margin:2px 8px 0 0; padding:3px; width:80px;}
#IPCEIbck{background: #f2f2f2; padding-left: 4px; width: 80px;
#thumbslide div { top: 0; left: 0 }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js' type='text/javascript'/>
<script type='text/javascript'>
$(&#39;#thumbslide&#39;).cycle({
fx: &#39;scrollLeft&#39;,
timeout: 6000,
delay: -3000
});
</script>
<!--Galleria Slideshow Fine - www.ideepercomputeredinternet.com-->

e si Salva il modello. I parametri evidenziati di rosso possono essere personalizzati in funzione del layout del blog e dei nostri gusti personali. Non sto ad analizzare ogni singola possibile modifica, ricordo solo il significato di alcuni parametri e attributi

1. width è la larghezza mentre height è l'altezza. Il loro valore si misura in pixel (px) come lo spessore dei bordi (border)
2. #thumbslide a { rappresenta lo stile della parte interna dell'elemento mentre #thumbslide { quello della parte esterna. #thumbslide a:hover { denota lo stile quando viene puntato con il mouse.
3. I colori sono rappresentati da codici esadecimali come questo #F4F4F4; e possono essere variati a piacere. Si possono usare anche i loro nomi in lingua inglese; background rappresenta lo sfondo dell'elemento
4. margin e padding sono la distanza rispettivamente esterna e interna cui sono vincolati gli elementi. Se ci sono più numeri, il primo rappresenta la distanza della parte alta quindi, gli altri, la distanza delle altre direzioni in senso orario
5. family-font sono le famiglie di caratteri mentre font-size la loro dimensione sempre in pixel.
6. solid rappresenta lo stile del bordo

Per l'inserimento del widget vero e proprio si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice

<div id="thumbslide"><div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>
<!-- Tutti gli altri post che vogliamo -->
</div><div id="IPCEIbck"><a href="http://goo.gl/MwGeE"><img src="http://goo.gl/LKyZA" /></a></div>

dove si inseriscono i dati delle miniature e dei post che vogliamo visualizzare con questo meccanismo:

1. In URL IMMAGINE si incollano gli URL delle immagini che abbiano precedentemente caricato su Picasa, SkyDrive o DropBox 
2. In TITOLO POST mettiamo il titolo dell'articolo mentre in RIASSUNTO inseriamo poche righe di sommario. Non può essere troppo lungo e in ogni caso dipende dalle dimensioni che abbiamo scelto per il widget
3. In URL ARTICOLO mettiamo l'indirizzo del post che vogliamo linkare
4. Leggi tutto… può essere sostituito da una espressione analoga

Si possono inserire tutte le immagini e tutti i collegamenti che vogliamo incollando altre righe con questa sintassi
<div>
<img src="URL IMMAGINE" width="200" height="200" />
<thumbtitle>TITOLO POST</thumbtitle><p>RIASSUNTO <a href="URL ARTICOLO">Leggi tutto...</a></p>
</div>

sempre però prima della linea finale </div><div id="IPCEIbck"><a href="http…