Come inserire uno slideshow di foto con link a articoli o blog.

Se avete un blog su piattaforma Blogger e siete molto attenti alla grafica, vi consiglio il widget dello Slideshow con miniature degli Ultimi Post che è uno dei più belli mai realizzati per Blogger. Vediamo come sia possibile realizzare uno slideshow corredato da miniature degli articoli che riteniamo più interessanti per proporli in un modo accattivante ai visitatori del nostro blog.

Per la realizzazione si usa lo stesso codice impiegato per la scritta scorrevole che è stata ripresa su molti siti. Il nostro obbiettivo è quello di sostituire il testo con delle miniature di immagini. Sarà anche possibile personalizzare il bordo e perfino il background del widget oltre alla velocità di scorrimento. Passo subito a presentare il codice, successivamente parlerò delle possibili personalizzazioni

<marquee width="300" height="80px" direction="left" bgcolor="#FFCC99" scrollamount="6" style="border: 2px solid #003366;" onmouseover="this.stop()" onmouseout="this.start()" >
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1pGKOmMQ3L7qPwUoGJYYYf1TRdwlGAY5E4Gz0XaIY-o2uZvrzA8oREd623kEmwS92ImtzcvXHlBKQYVOdYReoTLd4J7MyiO24E/alba1.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1pGKOmMQ3L7qNDxQufvzyRcf13WcBJD4Q1WbI1YVjm9wIwrgTirEsgaskPgwzUFVztFrtNBN63EeFOkoFmH9y13wDjthxuz4_9/alba2.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1p1GbmTbqO5fshUMwaAD-h33Q5Pr0FFDURdxzSFa1s085HjqTo5xISYQN1lZD7L14fs0c60mkEZIJUjDCrbBBw-ksmzkj1Hyw5/tramonto1.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1p1GbmTbqO5fsvzsgxrP47XrXtjvXY0VpVNyK9s9NAbs6KowBqyNpqNNLO_8UqknVUpPsF0k1QmN0vO9GDFMhoyyMdPUUgilcw/tramonto2.jpg"/></a>
</marquee>

Questo codice va incollato su Design > Aggiungi un gadget > HTML/Javascript e posizionato a piacere con il mouse. Ecco l'aspetto di questo slideshow





Se voi ci passate sopra con il mouse vedrete che il movimento si arresta per poi riprendere quando lo togliete. Se cliccate su una miniatura, sarete indirizzati al relativo collegamento, in questo caso la homepage di questo blog. Le personalizzazioni che si possono fare sono:

1. Larghezza del widget: width="300". Se si vuole che occupi tutto lo spazio si sceglie width="100%"
2. Lunghezza del widget: height="72px" - E' chiaramente in funzione della dimensione delle miniature
3. Direzione: direction="left" può essere sostituito da direction="right"
4. Colore di sfondo: bgcolor="#FFCC99" - Se si vuole lo sfondo bianco si sostituisce con #FFFFFF o si toglie l'attributo
5. Velocità di scorrimento: scrollamount="6" - Più è alto il numero maggiore è la velocità
6. Stile del bordo: solid - Altre opzioni sono dotted, dashed, double, ecc
7. Dimensioni del bordo: 2px
8. Colore del bordo: #003366
9. Dimensioni delle miniature: heigth="70" width="70"
10. Titolo e Testo alternativo: Quello che si inserirà nel tag Title sarà visibile quando si punterà con il mouse sull'elemento. Potrebbe quindi essere il titolo dell'articolo a cui si riferisce la miniatura. Il tag ALT è importante ai fini SEO e si può inserire la stessa espressione presente in Title.
11. Numero delle miniature: Possono essere inserite tutte le miniature che si vogliono aggiungendo altre righe con questa sintassi
    <a href="URL COLLEGAMENTO" title="TITOLO_LINK" tag="Testo alternativo" target="_blank"><img heigth="70" width="70" src="URL_IMMAGINE"/></a>

Vanno anche inseriti i collegamenti ai vostri post al posto dell'URL della mia Homepage evidenziato di rosso. Si devono poi sostituire gli URL delle immagini che saranno state in precedenza caricate su hosting come Picasa, SkyDrive o ImageShack.