Aggiungere una immagine prima e/o dopo il titolo di un widget di Blogger

Come aggiungere una icona prima e/o dopo al titolo di tutti i widget della sidebar di Blogger o prima e/o dopo a determinati gadget.

L'aggiunta di piccole immagini ai titoli è una delle personalizzazioni più richieste dagli utenti di Blogger. Nell'articolo precedente abbiamo visto come aggiungere una icona prima o dopo il titolo di un post. Adesso vedremo come procedere per fare la stessa operazione con il titolo di un widget di una sidebar.

Le esigenze che mi sono state manifestate riguardano l'inserimento di icone prima o dopo il titolo di un singolo widget e l'aggiunta di immagini a tutti i titoli presenti nella sidebar della versione desktop di Blogger.

Come base di partenza per questa personalizzazione prendiamo il codice usato per personalizzare i titoli dei widget di una sidebar di Blogger. Ci vorranno pure le immagini che dovranno essere aggiunte all'inizio o alla fine del titolo. Come abbiamo già visto altre volte, per caricare le immagini su Google Foto e per ottenerne il link diretto, basta aggiungerle in una Bozza di un articolo di Blogger.

Si va poi su HTML e si copia l'indirizzo della immagine che sarà l'URL che inizia per https:// e che si trova nel codice dopo la stringa src=". La Bozza creata su Blogger a questo punto potrà anche essere eliminata.

Si ridimensiona l'immagine agendo sul suo indirizzo. Nell'URL della immagine c'è sempre una stringa del tipo /s1600/, dove il numero potrà anche essere diverso da 1600. Tale stringa serve per determinare la larghezza della immagine. Se desideriamo una icona larga 40 pixel, basterà sostituire /s1600/ con /s40/ nell'URL.

Ora si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin> quindi, subito sopra a questa, si incolla un codice che abbia questa sintassi di base, per poi salvare il template.

.sidebar h2:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFHbDlFRB7ZcISqvaLvHs8i-xTSL1j9wpCcLioZDCZpNnUSUkt6S-F5AgaDDaybVYRC06wx5qQg17LVFgejsXVawNAdsGWyU6YL6Mw93vXlDW-3AhAXgJlWCahu5Ti8s6I2XNi7ZCDIU/s40/if_pencil_285638.png);
padding-right:15px;
}

Verrà aggiunta una icona prima del titolo di tutti i widget della sidebar. Invece per aggiungere una icona dopo i titoli di tutti i widget della sidebar, si dovrà incollare un codice di questo genere.

.sidebar h2:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2e-A9F4xV80m7ogCZMrYad_KyBlrKRRXI9ptW9B0eaBO1NC93mNryZtbmMHlU5EcnPhA0ogdA-2gnAvZ7_JzYOY_s-F6ij8n3MVRxCcUDJt6KLrAp7uyMZokLhjPixTz0OsZwUgImnUg/s40/if_heart_299063.png);
   padding-left:15px;
   }

Il risultato sarà il seguente:

Si possono aggiungere tutti e due i codici, per avere una icona prima e una dopo a tutti i titoli dei widget. Se si vuole inserire il titolo dei widget tra due icone identiche, il codice può essere così semplificato:

.sidebar h2:before, .sidebar h2:after {
content: url(https://4.bp.blogspot.com/-8pETz8VIHrw/WnLpHoQYRPI/AAAAAAABApc/26cPmRYxpKw7p4NksbDg43DhtI-HQWSWACLcBGAs/s40/if_heart_299063.png);
   padding:15px;
   }

per ottenere questo risultato finale:

Il tag padding serve per distanziare a sinistra, a destra o da entrambi i lati, l'icona dal titolo del widget.

COME AGGIUNGERE ICONE A UN DATO TITOLO DI WIDGET

Se desideriamo aggiungere le icone prima e/o dopo un titolo di un determinato widget, dobbiamo usare gli stessi codici già visti ma applicati all'ID del widget in questione, e non alla classe dei titoli di tutta la sidebar. Bisogna quindi trovare l'ID del gadget in oggetto. Si va su Layout quindi si clicca su Modifica in tale widget.

Verrà aperta una finestra che avrà un suo URL. Si scorre l'URL verso destra fino alla fine.

L'ID del widget è la stringa che si visualizza dopo widgetId= e che nello screenshot è BlogSearch1. Tale ID, preceduto dal simbolo del cancelletto ( # ), dovrà sostituire le classi dei tre codici presentati e che sono colorate di viola. Se si decide di mostrare una icona prima del titolo si usa il primo codice che diventa.

#BlogSearch1 h2:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2e-A9F4xV80m7ogCZMrYad_KyBlrKRRXI9ptW9B0eaBO1NC93mNryZtbmMHlU5EcnPhA0ogdA-2gnAvZ7_JzYOY_s-F6ij8n3MVRxCcUDJt6KLrAp7uyMZokLhjPixTz0OsZwUgImnUg/s25/if_heart_299063.png);
   padding:15px;
   }

Dovrà essere incollato nel modello sopra alla stessa riga ]]></b:skin> e produce questo risultato

con l'icona che sarà visualizzata prima del solo gadget di cui abbiamo inserito l'ID. Possiamo visualizzare tale icona prima di due o tre widget semplicemente aggiungendo il loro ID dopo una virgola in questo modo:

#BlogSearch1 h2:before, #Label1 h2:before, #HTML1 h2:before { ....

dove gli ID dei widget sono stati colorati di rosso.