Inserire uno sfondo nei titoli degli elementi su Blogger

Quella di inserire uno sfondo nei titoli dei vari elementi su Blogger è una piccola modifica abbastanza semplice, ma che se ben fatta arricchisce decisamente di un tocco di classe non indifferente un template.

In generale amo molto i template che fanno largo uso di elementi grafici, purchè non siano troppo pesanti e si integrino bene con il resto.

 

Per questo effetto in particolare, partiamo dal modello predefinito di Blogger Washed Denim (giusto per non fare le prove col solito Minima!) per ottenerlo, passando da questo:

 

a questo:

Vediamo come fare.

Modifichiamo il template

Come sempre, il primo passo è quello di fare il backup del template di Blogger, così se qualcosa va storto possiamo sempre tornare indietro sui nostri passi.

Dalla bacheca di Blogger, andiamo in Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa porzione di codice:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Aggiungiamo la riga che ho evidenziato in rosso:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
 background:url(indirizzo dell’immagine) no-repeat center left;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Sostituendo indirizzo dell’immagine con l’indirizzo di un’immagine che abbiamo precedentemente pubblicato in rete, magari con un servizio come ImageShack o Skydrive, e che magari abbiamo ridimensionato all’occorrenza con un servizio come ResizR.

Salviamo il template e visualizziamolo per vedere subito l’effetto. Nel mio caso, ho cambiato il colore del titolo per renderlo maggiormente visibile, da Layout->Caratteri e colori:

Cosa fare se non trovate la porzione di codice

In alcuni template davvero essenziali (come nel tempalte Minima), potreste non trovare la porzione di codice che ho indicato. In questo caso cercate la seguente porzione di codice

.sidebar {
  …
}

e subito sotto incollate:

.sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Alternativamente, potreste trovare:

#sidebar {
  …
}

e in questo caso per uniformità sotto incollate:

#sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Una volta fatta questa modifica, tutti gli elementi che aggiungeremo in futuro avranno questo sfondo nei titoli.