Come creare e personalizzare il Menù delle Pagine di Blogger.

Come personalizzare il Menù delle Pagine Statiche di Blogger nella larghezza, nella altezza, nei colori, come togliere la sfumatura e come centrarlo nel layout.

Il Menù delle Pagine (o delle Pagine Statiche) di Blogger viene creato quasi automaticamente quando vengono pubblicate delle Pagine nel nostro blog su Blogger. Ci sono delle differenze fondamentali tra Pagine e Post nella piattaforma Blogger e la più rilevante tra queste è che le Pagine sono svincolate dalla data di pubblicazione e quindi non finiscono nei feed del sito.

Le Pagine quindi vengono utilizzate per scopi particolari come quello di mostrare una Sitemap del sito per i lettori, di inserire un modulo di contatto,  una Galleria di Immagini e altri contenuti simili.

COME CREARE IL MENÙ DELLE PAGINE STATICHE

Bisogna ricordarsi che il Titolo delle Pagine statiche sarà anche la voce che si visualizzerà nel menù. Per le pagine non esiste la possibilità di personalizzare il Permalink come per i post ma possiamo ugualmente farlo utilizzando un escamotage. Su Blogger si possono creare fino a 20 pagine statiche. Per creare una pagina si va su Bacheca -> Pagine -> Nuova Pagina per aprire l'Editor delle Pagine che sarà identico a quello dei post. Non si potranno però aggiungere Etichette, Descrizione di Ricerca e Read More.

Nel menù si possono selezionare le pagine statiche da mostrare nel menù. Si va su Layout ->  Aggiungi un gadget -> Base -> Pagine quindi si mette la spunta alle Pagine da visualizzare nel Menù.

È opportuno cliccare su Aggiungi un gadget in Multi-colonne per mostrare il menù sotto l'intestazione. Se si fosse cliccato in un altro punto del layout sarà comunque sempre possibile trascinare il menù nella posizione desiderata per poi cliccare su Salva disposizione.

Verrà aperta una finestra di configurazione in cui selezionare le pagine che si vogliono mostrare

Si possono selezionare tutte le pagine oppure lasciarne qualcuna senza spunta. Se le pagine sono molte il menù si mostrerà su due righe. Sulla destra si trascinano gli elementi per eventualmente modificarne l'ordine.

COME AGGIUNGERE LINK ESTERNI

Al menù delle Pagine statiche di Blogger possono anche aggiungersi delle pagine esterne al nostro sito o anche dei link interni. L'unico limite è quello della conoscenza dell'indirizzo da inserire. Può quindi essere utile aggiungere un link ai nostri profili sociali su Facebook, Twitter, Youtube, ecc.

Si clicca su Aggiungi link esterno per poi inserire il nome della voce visualizzata nel menù e il suo URL

Si va su Salva Link poi su Salva. Dopo questo processo il menù avrà un aspetto simile a questo

con i colori che dipendono da quelli scelti su Tema -> Customize e dal Modello che si è scelto.

PERSONALIZZAZIONE DEL MENÙ DELLE PAGINE

Come test per queste personalizzazioni ho scelto il Tema Semplice e ho usato i tool Ispeziona Elemento di Chrome e Analizza elemento di Firefox. Se avete un tema diverso o se avete un modello scaricato da internet occorre che scopriate l'ID del widget del vostro Menù.

Nel caso del modello che ho usato tale ID è PageList1 che potrebbe diventare PageList2 se abbiamo inserito due menù delle pagine. I codici che andrò a mostrare potranno essere utilizzati in tutti i modelli semplicemente sostituendo l'ID di default di questo Tema con quello del vostro sito. Ritengo comunque che oltre il 90% dei blog abbiano come ID del Menù delle pagine statiche PageList1.

COME TROVARE L'ULTIMA RIGA DELLA SEZIONE DEI CSS

Nei commenti che ricevo ho spesso notato delle difficoltà nel trovare la riga giusta in cui aggiungere i codici CSS. Si va su Tema -> Modifica HTML e si cerca la sezione <b:skin> che si trova intorno alla 10-esima riga 

Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutte le centinaia di righe che contiene. Si cerca poi l'ultima riga della sezione. Non sarebbe necessario trovare questa riga ma lo facciamo per non inserire un codice nel mezzo a un altro con il rischio di comprometterne il funzionamento.

Si clicca sull'area del codice per poi digitare Ctrl+F che aprirà una casella di ricerca in alto a destra

Si incolla su Search la stringa ]]></b:skin> quindi si va su Invio. Verrà evidenziata l'ultima riga della sezione e il codice andrà incollato subito sopra a questa. Se non ci fosse lo spazio basterà posizionare il cursore accanto a questa riga e andare su Invio per creare questo spazio. Come accorgimento vi consiglio di controllare che in quella riga non finisca anche una parentesi graffa del codice che la precede.

COME MODIFICARE L'ALTEZZA DEL MENÙ

Per modificare l'altezza del menù sopra alla riga menzionata si incolla questo codice

#PageList1 ul {height:35px;}

dove ovviamente il valore dell'altezza può essere scelto a piacere.

COME ACCORCIARE LA LARGHEZZA DEL MENÙ

Di default il Menù delle Pagine Statiche prende tutta la larghezza del Layout come l'Header. Per modificare la larghezza si può usare questo codice da incollare nello stesso punto

#PageList1 ul {width:700px;}

che produce questo risultato



Si può anche usare un valore percentuale al posto di uno assoluto con un codice come questo

#PageList1 ul {width:60%;}

 

COME CENTRARE IL MENÙ NEL LAYOUT

Per centrare il Menù nel Layout si utilizza questo codice

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

dove il valore della larghezza del menù può essere personalizzato. Il risultato sarà il seguente

Se non si inserisce un valore di larghezza, anche percentuale, il menù potrebbe non centrarsi. Tutti i codici precedenti possono essere unificati anche in uno soltanto come questo

#PageList1 ul {
width:58%;
height:30px;
margin-left:auto;
margin-right:auto;
}

 

COME CAMBIARE I COLORI DEL MENÙ DELLE PAGINE STATICHE

È sempre rischioso andare su Tema -> Customize per modificare le impostazioni del Designer Modelli. È quindi consigliabile apportare le modifiche direttamente dal Tema. Con questo codice

#PageList1 ul, #PageList1 ul a {color:#00f !important; background-color:#f00 !important;}
#PageList1 ul a:hover {color:#f00 !important; background-color:#00f !important;}

incollato nello stesso punto il menù diventerà così

dove i codici dei colori della prima riga sono quelli che vengono visualizzati di default e quelli della seconda riga i colori che vengono visualizzati al passaggio del cursore.

COME ELIMINARE LA SFUMATURA DEL MENÙ

In alcuni Temi viene inserita una sfumatura o gradiente nel menù utilizzando una immagine di sfondo. Se questa sfumatura da fastidio la possiamo eliminare. Su Tema -> Modifica HTML si cerca questa riga

.tabs-inner .widget ul

con Ctrl+F che ci porterà a trovare un blocco di codice come il seguente

.tabs-inner .widget ul {
  background: $(tabs.background.color)  $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

Basterà eliminare il codice evidenziato di verde per poi salvare il modello.

In questo modo verrà eliminata la sfumatura. Magari è sempre meglio prendere nota del codice che si è cancellato per eventualmente ripristinarlo se nel tempo avessimo cambiato idea.