Pubblicato il 07/08/12e aggiornato il

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

Come personalizzare colore, sfondo, tipo di font, dimensione caratteri e altro in ciascuna scheda del menu creato in Blogger con le pagine statiche.
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

menu-pagine-statiche

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>

personalizzare pagine statiche

e sostituita con la seguente

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

modello-blogger

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}




9 commenti :

  1. sempre utilissimi i tuoi post. Sei già andato in vacanza? in ogni caso ti auguro un felice agosto :-)
    ps. essite il modo di mettere un'icona al posto della scritta nelle pagine statiche? Es. invece di mettere "primi piatti" da me potrei far comparire un disegnino stilizzato di un piatto di spaghetti fumante :-D
    Ciauuuu :-DD

    RispondiElimina
  2. @ Sonia
    Si può fare. Devi inserire gli URL degli elementi del menù secondo questo tutorial
    http://www.ideepercomputeredinternet.com/2011/11/come-creare-un-menu-aggiungendo-link-al.html
    o ancora meglio con quest'altro
    http://www.ideepercomputeredinternet.com/2011/02/come-aggiungere-link-al-widget-delle.html
    Poi devi andare su Modello > Modifica HTML e espandere i modelli widget. Nel gadget delle pagine statiche che si chiama PageList1 devi sostituire il codice
    <li><a href='URL_COLLEGAMENTO'>Voce1</a></li>
    con
    <li><a href='URL_COLLEGAMENTO'><img src="URL_IMMAGINE"></a></li>

    RispondiElimina
    Risposte
    1. ciao e buon anno!
      Dopo parecchio, davvero parecchio tempo, sono finalmente riuscita a fare delle piccole icone da mettere al posto delle scritte di cui ti parlavo. Ho seguito i post che mi hai indicato ma col nuovo modello (non trovo più la voce per tornare al vecchio) mi perdo di casa. Intanto non trovo la dicitura esatta come la indichi tu, non posso espandere il modello, posso solo cercare il widget Pagelist1, ma la voce ul (con i tag che qui non mi fa inserire) non c'è .....ho provato a fare qualcosa, ma evidentemente non c'ho capito nulla..... è evidente che sono arrugginita dopo tutto questo tempo che non apporto modifiche, ma è anche evidente che sbaglio di brutto qualcosa, appena hai due minuti mi puoi dire dove sta il mio errore? grazie mille e buona serata. Sonia

      Elimina
    2. Temo di non ricordarmi :)
      Per tornare al vecchio modello vai su Modello e clicca in alto a destra su Backup/Ripristina poi seleziona il file del vecchio template. Per quello che riguarda la ricerca delle linee di codice leggiti questi due post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
  3. grazie Ernesto! appena faccio ti faccio sapere :-D ciao

    RispondiElimina
  4. ciao, ho fatto. Solo un problema: ci sono dieci pagine, due delle delle icone le posiziona in maniera errata e non so come allinearle per bene....ho commesso errori? scusa se sono scocciante, ma il mio punto di riferimento in queste cose sempre il tuo blog. Grazie mille

    RispondiElimina
    Risposte
    1. Nelle due pagine posizionate male prova a integrare i fogli di stile per esempio così
      a{margin-left:10px; margin-top:-20px; background-color:#808000; color:#FFFFFF;}
      dove ovviamente puoi mettere anche margin-right o margin-bottom e variare i numeri di pixel anche in negativo
      @#

      Elimina
    2. perfetto! grazie mille. Buona domenica :-)

      Elimina
  5. fatto! ancora mille grazie! buona serata

    RispondiElimina

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.