Pubblicato il 15/01/13e aggiornato il

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.

slideshow-blogger

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

personalizzare-slideshow-widget-blogger
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.




6 commenti :

  1. Ciao avevo cercato di usarlo ma non riesco ad inserire foto dal mio album..Adesso provo a seguire tuoi consigli

    RispondiElimina
  2. Ciao Ernesto, seguo da sempre il tuo blog, e da sempre sono riuscito a seguire le tue guide. Sei come si suol dire "l'ultima ancora", per via di uno slider maledetto che non riesco in alcun modo a far funzionare. O meglio, lo slider a volte va e a volte no. Non riesco a capire cos'è che non va! E' possibile che sia qualche css che causa un qualche conflitto? Spero di non essere cestinato, attendo in preghiera una tua risposta.

    RispondiElimina
    Risposte
    1. @ pensieroanticosociale
      Ti riferisci agli slideshow ufficiali di Blogger così come presentati in questo post? Mi sembra strano che alcune volte vada e altre volte no. Forse è solo una questione di browser. Prova con un altro.

      Elimina
  3. Ciao, esiste il modo di fare lo slideshow di diversi iframe? Per intenderci, vorrei che il mio slideshow passasse in rassegna determinate aree del mio blog o di un sito.

    RispondiElimina
    Risposte
    1. In teoria potrebbe anche essere possibile ma non mi ricordo di aver mai visto una realizzazione di questo tipo
      @#

      Elimina
  4. CIao! grazie intanto.
    Ho provato a mettere il cdice nel posto giusto per ingrandire le foto di un album di picasa ma non ha nessun effetto. Uso un modello ethereal normale sulla home page..
    grazie

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.