Come personalizzare il Menù delle Pagine Statiche su Blogger.

Da diverso tempo su Blogger è possibile creare un menù in modo molto semplice utilizzando le pagine che sono state pubblicate. Si va su Pagine > Nuova pagina > Pagina vuota e si pubblica la pagina statica utilizzando l'Editor che è lo stesso di quello dei post.

Le pagine così create possono essere inserite in un elenco verticale nella sidebar oppure visualizzate come Schede a formare un vero e proprio menù. Per utilizzare questa opzione occorre andare su Pagine > Mostra pagine come e selezionare Schede in alto.

E' possibile aggiungere altre voci al menù anche di pagine web non appartenenti al blog. Pensiamo per esempio alla pagina fan su Facebook, all'account su Twitter o al Profilo su Google Plus. In questo caso si va su Pagine > Nuova Pagina > Indirizzo web e si incolla l'URL della pagina insieme al suo titolo. Si clicca su Salva per completare l'operazione. Ecco un tipico aspetto di un menù di questo genere

Quando si passa con il cursore sopra a un titolo la scheda cambia colore. Per personalizzare questi sfondi si va su Modello > Personalizza > Avanzato > Sfondo schede e si settano i due codici

per il colore di sfondo e per il colore selezionato. Bisogna ricordarsi di cliccare su Applica al blog in alto a destra per rendere effettive queste modifiche di cui se ne vedrà l'anteprima in basso.

COME MODIFICARE L'ALTEZZA DEL MENU'

Se il menù è troppo alto o troppo basso ne possiamo settare l'altezza inserendo una piccola modifica al template. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo nuovo CSS

#PageList1 ul {height:25px;}

Si salva il modello e si vedrà che il menù ha diminuito il suo spessore 

Nel test che ho fatto in realtà non c'era assolutamente l'esigenza di diminuire l'altezza del menù ma l'ho fatto per mostrare il funzionamento del codice. Ovviamente si può modificare il valore 25px.

COME DIMINUIRE LA LARGHEZZA DEL MENU'

Di default il menù delle Pagine statiche prende tutto lo spazio del blog. Questo può essere esteticamente fastidioso se si hanno poche voci e si ha molto spazio non utilizzato. Basta incollare sopra la riga ]]></b:skin> un codice come questo

#PageList1 ul {width:600px;}

dove naturalmente occorrerà settare la larghezza del menù fino ad avere questo risultato

COME CENTRARE IL MENU NEL LAYOUT

Non si può utilizzare il tag text-align:center; ma dobbiamo usare la stessa tecnica illustrata per centrare l'Header del blog. Sempre sopra alla riga ]]></b:skin> si incolla questo codice

#PageList1 ul {
margin-left:auto;
margin-right:auto;
}

che, dopo aver salvato il template, produce questo risultato

Ovviamente questi codici possono anche essere unificati in uno soltanto

#PageList1 ul {
width:452px;
height:40px;
margin-left:auto;
margin-right:auto;
}

che rende il menù delle pagine statiche alto di 40 pixel, largo di 452 pixel e perfettamente centrato.