Come personalizzare la famiglia di font del Menù delle Pagine Statiche di Blogger.

Come personalizzare la famiglia di caratteri delle voci del menù delle Pagine Statiche realizzato nativamente con Blogger.

Ieri ho ricevuto un commento che mi chiedeva appunto di trovare il modo di cambiare i caratteri delle voci del menù delle Pagine Statiche creato di default con Blogger. Visto che il tema potrebbe interessare anche altri lettori ho deciso di farci un articolo. 

In linea di massima per cambiare il tipo di caratteri del menù delle Pagine si va su Modello > Personalizza > Avanzato > Testo Schede e si seleziona il carattere tra quelli disponibili. In basso sarà visualizzata l'Anteprima e dovremo andare in alto a destra su Applica al blog per rendere le modifiche effettive. 

In realtà questo non sempre è possibile per due ragioni. La prima è che se si utilizza un modello scaricato da internet o molto personalizzato queste opzioni potrebbero non essere più disponibili e la seconda è che anche se il modello è ufficiale di Blogger andando su Personalizza si rischia di azzerare tutte le modifiche che abbiamo fatto fino a quel momento. Vediamo come risolvere il problema direttamente dal modello.

SCEGLIERE UNA FAMIGLIA DI FONT SUPPORTATO DA BLOGGER

In Modifica HTML > Personalizza > Avanzato > Testo Schede > Carattere si possono scorrere tutte le famiglie di font supportate nativamente da Blogger. Se scegliamo una di queste famiglie dobbiamo andare su Modello > Modifica HTML e cercare la sezione <b:skin> intorno alla 14-esima riga del template. Si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice quindi digitando Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra, si incolla per esempio questo codice

#PageList1 ul a {
font-family:Impact !important;
}

Si salva il modello. Ho usato come test il font Impact che è supportato da Blogger ma chiaramente se ne può scegliere uno qualsiasi tra quelli disponibili. Il risultato sarà il seguente

 

SCEGLIERE UNA FAMIGLIA DI GOOGLE FONTS

Google ha messo a disposizione di tutti gli sviluppatori una gran quantità di famiglie di font gratuite nel portale Google Fonts. Ho già illustrato come utilizzare le famiglie di caratteri qui presenti per personalizzare i font dei vari elementi del nostro sito. Non sto quindi a ripetere a come fare per trovare la stringa da inserire nel nostro modello per modificare una famiglia di caratteri. 

Come esempio prendiamo la famiglia  Lobster che potremo installare con questa linea di codice

@import url(http://fonts.googleapis.com/css?family=Lobster);

Per applicare questa specifica famiglia di caratteri alle voci del menù delle Pagine Statiche bisogna andare come prima su Modello > Modifica HTML e stavolta cercare </head> quindi, subito sopra a questa, incollare questo semplice codice per poi salvare il modello.

<style>
@import url(http://fonts.googleapis.com/css?family=Lobster);
#PageList1 ul a {
font-family:Lobster !important;
}
</style>

Il risultato sarà il seguente

 

Non ho testato la funzionalità ma seguendo le istruzioni del post linkato all'inizio di questa sezione si può anche installare una famiglia di font qualsiasi scaricata da internet e caricata su Google Drive aggiungendo la classe #PageList1 ul a al codice già utilizzato per questa modifica.