Pubblicato il 21/03/15e aggiornato il

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. 

cambiare-font-menu-pagine

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

modificare-font-pagine

 

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

personalizzare-font-menù
 
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.




2 commenti :

  1. Volevo chiedere, mentre invece per il carattere all'interno delle schede? Come si fa a personalizzarlo? si rifà al carattere che normalmente si usa per i post?

    RispondiElimina
    Risposte
    1. Non so a che ti riferisci perché è evidente che all'interno delle pagine statiche c'è la stessa famiglia di font dei post. Si possono personalizzare anche quei font ma ci vuole un po' di attenzione. Salvo il commento e magari ci faccio un post che forse sarà utile anche ad altri
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.