Come personalizzare i titoli dei widget nella sidebar di Blogger.

Come personalizzare l'aspetto dei titoli dei widget di una o di tutte le sidebar di Blogger modificando il template.

Ieri ho ricevuto un commento in cui mi si chiedeva come personalizzare i titoli dei widget presenti in una sidebar di Blogger. Visto che il tema pur non essendo fondamentale può interessare altri lettori ho pensato di scrivere un post su questo argomento.

Le personalizzazioni degli aspetti grafici di Blogger in teoria si dovrebbero fare con il Designer Modelli. Si dovrebbe cioè andare su Modello -> Personalizza -> Avanzato -> Gadget per poi scegliere la famiglia di caratteri, il colore e il colore alternativo del titolo.

Con questa procedura però c'è un rischio e una difficoltà. Il rischio è che quando si apre il Designer Modelli vengano azzerate le modifiche inserite nel template con la possibilità che il menù smetta di funzionare insieme ad altri widget e personalizzazioni.  La difficoltà è che modificando l'aspetto dei titoli dei gadget viene modificato anche l'aspetto della data dei post.

Vediamo quindi quale sia la procedura alternativa per personalizzare tali titoli con un codice da inserire nel modello di Blogger. Prima di procedere dobbiamo andare su Layout e trovare l'ID della sezione della sidebar in oggetto. 

Ci possono essere sidebar sulla sinistra, sulla destra o in entrambi i lati. Inoltre nel Designer Modelli si possono scegliere dei Layout con sidebar che si sdoppiano in due colonne. In linea di massima le sidebar di sinistra avranno ID sidebar-left e le sidebar di destra sidebar-right. Se ci sono più sidebar sullo stesso lato come nello screenshot precedente ciascuna sidebar avrà avrà anche un numero d'ordine come per esempio sidebar-right-1, sidebar-right-2-1, sidebar-right-2-2.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice e per trovare l'ultima riga di tale sezione con Ctrl+F che è ]]></b:skin>. Subito sopra a questa si incolla questo codice

#sidebar-right-1 h2, #sidebar-right-2-1 h2, #sidebar-right-2-2 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Georgia !important; }

dove si aggiungono gli ID delle sidebar precedute dal cancelletto ( # )e seguite da h2 che è il tag del titolo. Se abbiamo una sola sidebar è importante togliere la virgola che invece è essenziale per separare gli ID quando ci sia più di una sidebar. Tra le parentesi graffe si aggiungono gli attributi da modificare. Nel codice di esempio ho scelto di personalizzare la dimensione dei font (24px), il colore del titolo (#f00), lo stile del corsivo e la famiglia dei caratteri (Georgia).  

Ovviamente si possono togliere alcuni tag che non interessano e aggiungerne altri. Con questo codice si modificheranno i titoli delle sidebar di cui abbiamo aggiunto gli ID e non la data dei post.

Dopo aver salvato il modello il titolo dei gadget sarà modificato dai nuovi codici dei colori e dalla nuova famiglia di font. Su questo tema ho pubblicato altri articoli come quello per racchiudere in un bordo le sidebar, quello per cambiare l'aspetto del titolo solo di un dato gadget e quello per personalizzare l'aspetto di tutto il widget.