Pubblicato il 06/05/14e aggiornato il

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

id-widget-blogger

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.

cercare-riga-css

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

sfondo-widget-blogger

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

sfondo-solo-contenuto

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://lh3.googleusercontent.com/-IwjC6_HdpJ0/U2jYVcBdnVI/AAAAAAAAm9o/MyJq--O-s5o/s150-no/transparent-texture.png);
}

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

immagine-sfondo-widget-blogger

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

sfondo-titolo-contenuto-widget

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 #.




2 commenti :

  1. I tuoi ultimi articoli incontreranno sicuramente i gusti e le esigenze di molte girls ;)
    Giuliana

    RispondiElimina
    Risposte
    1. Spero che piacciano anche agli uomini :)
      @#

      Elimina

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.