Come personalizzare nel menù l'aspetto di ciascuna pagina statica.

Ho già pubblicato un articolo illustrando come sia possibile personalizzare il layout di una singola pagina statica. Non occorre neppure modificare il modello, basta inserire un opportuno CSS in modalità HTML prima di digitare i contenuti della pagina stessa.

E' noto anche come si possa creare un menù orizzontale con le pagine statiche pubblicate. Tale menù può essere facilmente personalizzato. Ricordo di aver già pubblicato un post in cui se ne configurava la lunghezza. La riga di codice da aggiungere nella sezione <b:skin> era la seguente

#PageList1 ul{width:300px !important;} 

Usando la stessa sintassi oltre alla larghezza possono essere modificati altri parametri quali il background, il tipo di font, la dimensione dei caratteri e altro ancora. Queste modifiche però saranno applicate a tutto il menù delle pagine statiche. Vediamo invece come sia possibile creare un menù dove ciascuna voce sia personalizzata singolarmente. Vogliamo in sostanza ottenere una cosa di questo genere

Ciascuna voce del menù ha uno sfondo e un colore diverso dalle altre. Mi sono limitato a modificare solo i colori ma si possono personalizzare anche altri parametri. Questa soluzione può andare bene per blog che amino associare un determinato colore a una singola categoria di post.

Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si mette la flag su Espandi i modelli widget. Per il gadget del menù delle pagine statiche si clicca su F3 o su Ctrl+F e si cerca

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>

Basta cercare la prima parte della riga per trovarla subito. Scorrendo il widget va individuata l'altra riga

<li><a expr:href='data:link.href'><data:link.title/></a></li>

e sostituita con la seguente

<li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

In sostanza si è aggiunta la possibilità di creare stili diversi in funzione del Titolo della singola Scheda del menù. Si potranno cioè incollare nel template dei CSS di questa forma

.PageList li.TitoloPagina a {Inserire dichiarazione di stile per sfondo, colore, font, ecc}

Questo risultato si deve al tag data:link.title che su Blogger rappresenta il titolo associato a un URL. Al posto di TitoloPagina va inserito il titolo della singola scheda. Ricordo che si tratta di elementi case sensitive e che quindi le maiuscole vanno distinte dalle minuscole. Non ho testato il funzionamento per le pagine con titoli formati da due o più parole. Il codice va incollato subito sopra alla riga ]]></b:skin> e potrebbe essere simile a questo

.PageList li.Disclaimer a{background-color:#808000; color:#FFFFFF;}
.PageList li.Gallery a{background-color:#009F82; color:#FFFFFF;}
.PageList li.forum a{background-color:#4141FF; color:#FFFFFF;}
.PageList li.Movimento a{background-color:#C082FF; color:#FFFFFF;}
.PageList li.SpaceGallery a{background-color:#006062; color:#FFFFFF;}
.PageList li.Easter a{background-color:#00FFFF; color:#FFFFFF;}
.PageList li.Halloween a{background-color:#E29FFF; color:#FFFFFF;}
.PageList li.Pipistrelli a{background-color:#0020C2; color:#FFFFFF;}
.PageList li.Natale a{background-color:#424200; color:#FFFFFF;}
.PageList li.Cupido a{background-color:#004041; color:#FFFFFF;}
.PageList li.Disclaimer a:hover,.PageList li.Gallery a:hover,.PageList li.forum a:hover,.PageList li.Movimento a:hover,.PageList li.SpaceGallery a:hover,.PageList li.Easter a:hover,.PageList li.Halloween a:hover,.PageList li.Pipistrelli a:hover,.PageList li.Natale a:hover,.PageList li.Cupido a:hover,{background-color:#000000; color:#E1E1E1;}  

dove ho inserito i titoli delle pagine del blog che ho usato come test colorate di viola. Ho personalizzato i colori di sfondo e il colore del testo per ciascuna scheda mentre ho usato gli stessi parametri (background-color:#000000; color:#E1E1E1;) per tutte le schede per l'effetto hover al passaggio del cursore. Possono però essere personalizzate singolarmente seguendo questa sintassi

.PageList li.TitoloPagina a:hover {CSS vari}