Come personalizzare i titoli dei widget di Blogger.

Come personalizzare il colore, lo sfondo, il bordo, la dimensione e la famiglia dei caratteri del titolo di tutti i widget di Blogger o di uno soltanto.

Ho ricevuto una richiesta in un commento a cui mi era difficile rispondere in modo esauriente quindi ho deciso di farlo con un post che penso possa interessare anche altri lettori e che prende in esame un aspetto più generale.

La domanda riguarda la possibilità di modifica del colore di sfondo del titolo del widget dei Lettori Fissi. In questo post vedremo gran parte delle possibili modifiche che si possono effettuare all'aspetto dei titoli di tutti i widget di Blogger. Vedremo come modificare i titoli di tutti i widget e come invece modificare quello di uno soltanto. Oltre al colore di sfondo potremo cambiare il colore del testo, la famiglia di caratteri, l'allineamento e la dimensione dei font.

COME MODIFICARE L'ASPETTO DEI TITOLI DI TUTTI I WIDGET DELLE SIDEBAR

Come prima ipotesi consideriamo quella di modificare l'aspetto di tutti i titoli dei widget visualizzati nelle sidebar che possono essere a sinistra o a destra. Il sistema è quello di creare delle regole CSS da incollare nel modello. Ciascuna riga della regola inciderà su un particolare aspetto. Potremo incollare solo le righe delle modifiche che ci interessano e tralasciare le altre.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la sezione <b:skin> che nei modelli ufficiali si trova intorno alla ottava, 12-esima riga. Si clicca sulla freccetta alla sua sinistra per visualizzare tutto il codice al suo interno. Dovremo trovare con Ctrl+F l'ultima riga della sezione che è la seguente ]]></b:skin> quindi subito sopra a questa si incolla questo codice

.sidebar h2  {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important;  /* colore testo */
background-color:#ff0; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Georgia !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
}

Si salva il modello. Ecco come cambia l'aspetto dei titoli dei widget

Come già detto si possono eliminare le righe che riguardano modifiche che non ci interessano. Si possono cancellare anche i commenti colorati di verde che servono solo per indicare il significato dei valori dei vari parametri. Tali valori possono essere evidentemente modificati cambiando i codici dei colori, il nome della famiglia di font o il numero di pixel della dimensione dei caratteri .

Possiamo anche fare di più. Per esempio con questo codice

.sidebar h2  {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important;  /* colore testo */
background-color:#ff0 !important; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Courier !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
border: solid 2px #882c13; /* bordo intorno a titolo */
border-radius: .7em; /* arrotondamento */
padding: .5em; /* distanza bordo da titolo */
}

si aggiunge un bordo arrotondato intorno ai titoli dei widget in questo modo

Con questo secondo codice oltre ai parametri già visti si può personalizzare anche lo stile del bordo, il raggio dell'arrotondamento e la distanza tra bordo e titolo. L'unità di misura utilizzata è quella em che prende come base la dimensione standard dei caratteri utilizzati. Quindi .5em significa la metà della dimensione dei caratteri mentre 1.2em significherebbe una dimensione di 1,2 volte. 

COME MODIFICARE UN TITOLO DI UN SOLO WIDGET

Se decidiamo di modificare l'aspetto del titolo di un solo widget allora sono sempre valide le righe dei CSS ma dobbiamo cambiare la classe a cui applicarle. Si deve trovare quello che è l'ID del widget. Si va su Layout e si clicca su Modifica nell'elemento pagina che ci interessa. Possiamo anche cliccare direttamente sulla icona del cacciavite e chiave inglese che solo il proprietario del sito visualizza quando apre il blog

L'ID del widget sarà la parte finale dell'URL visibile nella barra degli indirizzi della pagina popup che si apre. Si deve quindi copiare la stringa che si trova a destra di widgetId= . L'ID da inserire nel modello sarà quindi quello trovato preceduto dal simbolo del cancelletto. Per il widget del Lettori Fissi sarà #Followers1, per la casella di ricerca ufficiale di Blogger è invece #CustomSearch1 mentre per i widget HTML/Javascript sarà della forma #HTMLX con al posto di X un numero naturale che ne indica l'ordine con cui è stato inserito nel nostro layout. Prendendo come esempio il gadget dei Lettori Fissi il codice da incollare sempre sopra alla stessa riga sarà 

#Followers1 h2 {
font-size:24px !important; /* dimensione caratteri */
color:#f00 !important;  /* colore testo */
background-color:#ff0 !important; /* colore sfondo */
font-style:italic !important; /* corsivo */
font-family:Courier !important; /* Famiglia di font */
text-align:center; /* allineamento al centro*/
border: solid 2px #882c13; /* bordo intorno a titolo */
border-radius: .7em; /* arrotondamento */
padding: .5em; /* distanza bordo da titolo */
}

che porterà a questo risultato

Se si volesse personalizzare il titolo della casella di ricerca dovremmo sostituire #Followers1 h2 con #CustomSearch1 h2.  Se si vogliono personalizzare due o più titoli di gadget nello stesso modo ma non tutti allora basterà aggiungerne i relativi ID separati da virgola. La prima riga del codice precedente diventerebbe quindi per esempio

#Followers1 h2, #CustomSearch1 h2, #Label1 h2, #HTML1 h2 {

nel caso si volessero modificare i titoli dei Lettori Fissi, della Casella di Ricerca, del widget delle Etichette e di un widget HTML. Anche in questo caso ovviamente si possono eliminare le righe delle personalizzazioni che non ci interessa applicare.