Come inserire uno sfondo in un widget di Blogger.

Come mostrare uno sfondo colorato o un background di una immagine nel titolo e/o nel contenuto di un widget di Blogger.

Attraverso delle opportune regole CSS è possibile inserire degli sfondi colorati oppure background con immagini in tutto un widget, solo nel suo contenuto, solo nel titolo o in entrambi gli elementi. È anche possibile inserire due sfondi diversi per titolo e contenuto del gadget.

Prima di leggere il post consiglio ai neofiti del blogging di consultare l'articolo sui codici dei colori e eventualmente di scaricare il mio ebook Guida all'HTML e CSS. Usando gli stessi selettori del post che illustra come mostrare i gadget dentro un box scroll vediamo come sia relativamente semplice personalizzare lo sfondo di un widget di Blogger. 

INDIVIDUARE L'ID DEL WIDGET

Prima di procedere occorre conoscere l'ID del gadget a cui vogliamo inserire lo sfondo. Si va su Layout e si clicca su Modifica nell'elemento in oggetto. In alternativa si può cliccare sulla icona del cacciavite e della chiave inglese direttamente da una pagina del nostro sito. Si scorre l'indirizzo della finestra che si apre fino a arrivare alla sua parte finale come mostrato in questo screenshot

In questo caso si tratta di un gadget HTML/Javascript che hanno tutti gli ID in ordine crescente a partire da HTML1 che è l'ID del primo gadget inserito nel nostro blog. Se invece fosse per esempio il gadget delle Etichette sarebbe stato Label1 mentre quello dell'Archivio BlogArchive1. Nei widget ufficiali di Blogger il numero 1 sta a indicare il primo gadget di questo genere. Nel caso per esempio di un blog con due widget delle Etichette il secondo avrebbe Label2 come ID.

INSERIRE LO SFONDO IN TUTTO IL WIDGET

Se si vuole visualizzare uno sfondo nel titolo del widget e nel suo contenuto occorre utilizzare come selettore l'ID del widget preceduto dal cancelletto (#). In seguito utilizzerò come esempio il selettore del widget dell'archivio che ho usato come test e che è #BlogArchive1. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin>. Ricordo che nei modelli di qualche blog può succedere che in questa riga si aggiunga una parentesi graffa. Si tratta statisticamente di uno dei casi più frequenti di non funzionamento di una personalizzazione. Per risolvere occorre posizionare il cursore subito dopo tale parentesi e cliccare su Invio per separare e individuare tale riga.

Cliccando nuovamente su Invio si creerà dello spazio prima della riga in cui incollare un codice come questo

#BlogArchive1{
background: #EEFFDD;
}

Si salva il modello e il risultato sarà il seguente



Ovviamente è da modificare il selettore del widget in funzione del suo ID e il codice del colore di sfondo. Come vedete in questo caso il background sarà sia nel contenuto sia nel titolo.

INSERIRE LO SFONDO SOLO NEL CONTENUTO

Se si vuole lo sfondo solo nel contenuto del gadget il codice da usare è invece il seguente

#BlogArchive1 .widget-content{
background: #EEFFDD;
}

dove si fanno le stesse personalizzazioni. Dopo aver salvato il modello il risultato sarà simile a questo

COME INSERIRE UNA IMMAGINE DI SFONDO

L'immagine dovrà essere precedentemente caricata su un Hosting tipo Google+ e se ne dovrà conoscere il link diretto. Prendo in esame per brevità di trattazione dell'argomento solo il caso di una immagine che si ripete in senso orizzontale e verticale. Il codice dovrà essere incollato nel modello con le stesse modalità e sarà simile a quello seguente

#BlogArchive1 .widget-content{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHNCW7jbyZfvwV0rW2YdQRdh_SwQJHd7SvqWx3_CYRHlFZA-7j1JQDvZlx71x9J119wgBOA0vle3m-XW7Z5R-j9LPFvZ1816UsSYQrpOVGEhiix7oBsaWuwtWDUuXRmpHnOvwB7yjqPYQ/s150-no/transparent-texture.png);
}

dove l'URL colorato di rosso è l'hotlink della immagine di sfondo che produce questo risultato

COME MOSTRARE UNO SFONDO NEL TITOLO DEL WIDGET

Per visualizzare uno sfondo nel titolo del widget si utilizza quest'altro codice

#BlogArchive1 h2{
background: #EEFFDD;
}

dopo aver salvato il modello si potrà vedere il titolo del gadget con lo sfondo che potrà anche essere diverso da quello eventuale del background del contenuto

Concludo ricordando ancora una volta che il selettore #BlogArchive1 è solo un esempio relativo al test da cui sono stati tratti gli screenshot e che dovrà essere sostituito dall'ID del widget preceduto da #.