Cambiare colore e carattere al titolo di un widget di Blogger.

Come personalizzare il titolo di ciascun widget di Blogger usando il CSS.

Nel post precedente abbiamo visto come utilizzare Analizza Elemento di Firefox per trovare i selettori di un oggetto o di una selezione presente nel layout. In questo articolo vedremo come applicare queste conoscenze a un tema specifico vale a dire alla modifica dell'aspetto del titolo di uno o più widget del nostro blog su Blogger.

Se si analizza l'elemento con Firefox o con Chrome troveremo che il selettore del titolo di gadget è h2 che però è lo stesso non solo di tutti i titoli dei widget ma anche della data.  Quindi se noi aggiungessimo un CSS del tipo h2 { … } si andrebbero a modificare tutti questi elementi. Per cambiare aspetto solo al titolo di un particolare widget dobbiamo determinarne l'ID. Se utilizzate Firefox o Chrome basterà cliccare nella icona del cacciavite e della chiave inglese che vengono visualizzati dall'amministratore del blog quando si sia loggato con il suo account Google. Alternativamente potete andare su Layout e cliccare su Modifica nel widget di cui volete personalizzare il titolo. Nella finestra che si apre dovete scorrere tutto l'indirizzo fino in fondo aiutandovi con i tasti direzionali

L'ID del gadget è la parte finale dell'URL dopo widgetID= e nello screenshot precedente sarebbe BlogArchive1. Con questo dato possiamo creare il CSS per modificare l'aspetto del titolo di quel widget e solo di quello. Per esempio consideriamo questo codice

#BlogArchive1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important; }

dove al posto di BlogArchive1 si deve mettere l'ID del nostro gadget. Se si tratta di un widget HTML l'ID sarà del tipo HTML1, HTML2, HTML3, ecc dove il numero dipende dall'ordine con cui sono stati creati i gadget. I tag che si possono inserire sono moltissimi e dipendono dalle esigenze del webmaster. Con il codice proposto nell'esempio il titolo del widget avrà caratteri con dimensioni di 24 pixel, in corsivo e con famiglia di font Arial. L'inserimento del tag !important serve se una regola fosse in contrasto con una già presente nel modello per comandare al browser di considerarla prevalente rispetto all'altra. 

Lo screenshot precedente mostra come si modifica il titolo del widget con il codice proposto. Si cambierà solo quel titolo e nessun altro. Se volete operare le stesse modifiche anche ad altri titoli basterà aggiungere tutti gli altri selettori separati da virgole per esempio in questo modo

#BlogArchive1 h2, #Profile1 h2, #HTML1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important; }

in cui si modificano i titoli del widget dell'Archivio, di quello del Profilo e di un widget HTML. Va da sé che i codici dei colori, la famiglia di caratteri e gli altri parametri possono essere scelti a piacere da ciascun utente di Blogger.

Non fate caso alla grafica delle modifiche che ho usato come test perché le ho scelte appositamente improbabili proprio per renderle più evidenti. Concludo ricordando che per operare nel template bisogna andare su Modello > Modifica HTML. Si clicca sulla freccetta nera accanto alla sezione <b:skin> che si trova intorno alla 13-esima riga e tramite Ctrl+F si cerca il tag ]]></b:skin>. Il codice del CSS che si è creato va incollato appunto subito sopra a tale riga come di abitudine.