Come aggiungere una immagine prima e/o dopo il titolo di un widget di Blogger.

Come mostrare una icona prima e/o dopo il titolo di un determinato widget di Blogger.

I titoli dei widget di Blogger sono inseriti con il tag <h2> che è lo stesso utilizzato anche per la data. Non è quindi agevole modificare l'aspetto dei titoli di tutti i gadget di Blogger senza modificare anche l'aspetto della data. Una operazione come quella di aggiungere una icona al titolo del post non si può compiere con la stessa procedura.

Però si possono aggiungere immagini prima e dopo il titolo di un singolo widget inserendo un opportuno CSS in funzione del suo ID. Innanzitutto dobbiamo aprire Picasa e aggiungere l'icona o le icone che vogliamo utilizzare per questa personalizzazione quindi dobbiamo ricavare il loro URL diretto. 

Successivamente si va su Layout e si clicca su Modifica sul widget in oggetto. Possiamo anche cliccare sulla icona del cacciavite e della chiave inglese sulla pagina del blog da loggati su Blogger 

 

In entrambi i casi verrà aperta la finestra di configurazione del widget. Nella parte alta della scheda si visualizzerà il suo indirizzo. Si scorre fino alla fine. Dopo widgetID= si visualizzerà l'ID dello stesso widget. Se si tratta di un widget HTML/Javascript avrà un ID del tipo HTMLX dove X è il numero d'ordine di installazione.L'ID del primo widget HTML installato sarà HTML1, del secondo HTML2, del terzo HTML3 e così via.

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera a sinistra della sezione <b:skin> per visualizzare tutto il codice intorno alla decima riga. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

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

quindi si salva il modello. L'ID del widget è quello colorato di viola e dobbiamo sostituirlo con quello che abbiamo ricavato. L'URL colorato di rosso è l'indirizzo della icona caricata su Picasa mentre 8px è la distanza che abbiamo scelto tra icona e titolo.  Il risultato sarà il seguente

Se volessimo mostrare una icona dopo il titolo del widget dovremo invece usare questo 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 lo stesso significato dei parametri. Il risultato sarà il seguente




Naturalmente possiamo incollare entrambi i codici per avere una icona prima e dopo il titolo

È evidente che si possono scegliere anche icone diverse da inserire prima e dopo il titolo. Questa operazione può essere compiuta per più di un widget presente nella sidebar o anche per tutti.