Come personalizzare il widget Slideshow di Blogger.

Come modificare le dimensioni dello slideshow nativo di Blogger e inserire sfondi e bordi.

Su Blogger c'è un widget ufficiale per mostrare degli slideshow di immagini che forse non è adeguatamente sfruttato. Eppure si tratta di un gadget che ha molte potenzialità visto che ci permette di creare delle Presentazioni animate di immagini a partire da album, da parole chiave o anche da utenti. Sono supportati nativamente Picasa, Flickr e Photobucket ma si può scegliere Altro e inserire l'URL del feed di un qualsiasi flusso di immagini di siti di photo-sharing.

Per iniziare si va su Layout > Aggiungi un gadget > Slideshow e si configura il widget. Oltre a digitarne il titolo, si seleziona il servizio; come ho detto sono supportati Picasa, Photobucket e Flickr. Su Photobucket può essere selezionato solo uno slideshow per parola chiave (sunset quella di defualt), su Flickr si può optare anche per il flusso di foto di un utente. Su Picasa Web Album è possibile creare uno slideshow per parola chiave, per nome utente e per nome dell'album. Un'altra impostazione interessante è quella della velocità con cui le immagini si susseguono che può essere lenta, media o veloce. In basso viene visualizzata l'Anteprima del widget. Si clicca su Salva per terminare e si usa il drag & drop del mouse per il suo posizionamento nel Layout del sito.

Lo slideshow è piuttosto piccolo e quindi di scarso impatto visivo. Vediamo come con una semplice aggiunta di fogli di stile sia possibile migliorarne notevolmente l'aspetto

Come vedete sono state aumentate le dimensioni ed è stato aggiunto un bordo. Questo sistema è molto utile se si utilizzano le immagini di un album che abbiano tutte la stessa dimensione. In questo caso si possono scegliere delle dimensioni per il widget che siano proporzionali a quelle originali.

Se vogliamo personalizzare tutti gli slideshow inseriti con questo widget si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

.slideshow-container {
width: 260px;
height: 200px;
background: #940F04;
border: 2px solid #940F04;
}

dove si possono personalizzare larghezza, altezza, colore di sfondo e stile del bordo. Si salva il modello. Se invece si vuole personalizzare solo uno slideshow e magari inserirne  altri con parametri diversi allora il codice da inserire e personalizzare con le stesse modalità sarà il seguente

#Slideshow1_slideshow {
width: 260px;
height: 200px;
background: #940F04;
border: 2px solid #940F04;
}

dove il numero 1 dell'ID dello slideshow potrebbe anche essere un altro. Può essere usata l'estensione Firebug per Firefox o l'addon Firebug Lite per Chrome per conoscere tale ID del widget. Concludo osservando come nello slideshow siano disponibili anche i pulsanti di navigazione.