Come aggiungere una icona prima del titolo di un widget.

Come inserire una icona prima o dopo il titolo di un widget su Blogger.

Riprendo una parte del post che ho dedicato alla personalizzazione di un singolo widget e in cui presentai il codice per inserire lo sfondo, per personalizzare la famiglia di font, per visualizzare il gadget all'interno di un bordo e per modificare i colori del testo link, di quelli visitati e di quelli puntati con il mouse.

In tale articolo si trattava en passant anche di come aggiungere una icona prima del titolo dello stesso widget. Sulla falsariga di quello appena pubblicato su come aggiungere una icona prima del titolo dell'articolo, vediamo come si possa fare lo stesso per il titolo di un particolare widget. Come illustrato nel post linkato all'inizio occorre trovare l'ID del widget in questione. Si può fare in diversi modi. Uno dei più semplici è quello di andare su Layout > Modifica nel gadget in questione e visualizzare l'ultima parte dell'indirizzo della pagina che si apre

L'ID del widget è quello che appare dopo Id= . Nel caso di widget HTML/Javascript l'ID sarà formato da un semplice numero, per esempio HTML13 come si vede nello screenshot. Per i widget ufficiali di Blogger ci sono degli ID predeterminati come Label1 (etichette), BlogArchive1 (Archivio), Header1 (intestazione), Profile1 (Profilo) o Attribution1 (Attribuzione).

Per aggiungere una icona prima del titolo del widget questa va prima caricata su Picasa e ne va acquisito il link diretto. Si va poi su Modello > Modifica HTML, si cerca la riga di codice ]]></b:skin> quindi, subito sopra, si incolla un blocco di codice come questo

#Label1 h2:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmoQmVOzBxewMZL42qrWAvC5VnWjKFDhDAXlfTr5rWx4XPlNbLGRQwWxUefy7sbvNsMZ4gHsbpsrxPprCjVN_mfC1zhIOne0bGfGw1lg8LDmT6MUAD0X99Qx-GmxC_Z40utji-wPySb4/s16/cuore16.png);
padding-right:8px;
}

dove invece di #Label1 potremo mettere #HTML13 o un qualsiasi altro ID di un widget. I parametri in rosso sono l'URL della icona e la distanza tra icona e titolo. Andando su Anteprima Modello potremo verificare il funzionamento del codice prima di passare al suo salvataggio

Se volessimo inserire l'icona dopo il titolo del widget dovremo usare quest'altro codice

#Label1 h2:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmoQmVOzBxewMZL42qrWAvC5VnWjKFDhDAXlfTr5rWx4XPlNbLGRQwWxUefy7sbvNsMZ4gHsbpsrxPprCjVN_mfC1zhIOne0bGfGw1lg8LDmT6MUAD0X99Qx-GmxC_Z40utji-wPySb4/s16/cuore16.png);
padding-left:8px;
}

con le stesse variabili da personalizzare

Con le vecchie versioni di Internet Explorer  ci potrebbero essere dei problemi a visualizzare gli pseudo-elementi after e before. In questo caso è bene che rendiate comunque il vostro blog compatibile con IE e optiate per un codice diverso da incollare però nello stessa zona e con le stesse modalità

#Label1 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmoQmVOzBxewMZL42qrWAvC5VnWjKFDhDAXlfTr5rWx4XPlNbLGRQwWxUefy7sbvNsMZ4gHsbpsrxPprCjVN_mfC1zhIOne0bGfGw1lg8LDmT6MUAD0X99Qx-GmxC_Z40utji-wPySb4/s16/cuore16.png) no-repeat left transparent; 
padding-left:20px;
}