Come inserire un semplice menù sopra l'Header di Blogger.

Come creare e posizionare un menù sopra alla intestazione dei blog su Blogger.

Su Blogger si può creare automaticamente un menù orizzontale attraverso il widget delle Pagine Statiche. Ricordo che si va su Pagine > Nuova Pagina > Pagina Vuota e si pubblica la pagina con l'Editor di Blogger. Dopo che si sono create le varie pagine, si configura la posizione del menù andando su Pagine > Mostra Pagine come > Schede in alto. Le altre opzioni sono Non mostrare e Link laterali da visualizzare come elenco verticale in una sidebar. Ricordarsi di cliccare su Salva disposizione in alto a destra. La configurazione può essere modificata in qualsiasi momento. Al menù delle pagine statiche possono anche essere aggiunti link di post o anche di pagine web esterne. Basta andare su Pagine > Nuova Pagina > Indirizzo Web e incollare l'URL della pagina da visualizzare nel menù.

Il menù delle pagine statiche non ha dei sottomenù e per chi ha l'esigenza di mostrare molti link può risultare insufficiente. C'è da dire che quando si oltrepassa la larghezza del layout del blog, il menù si dispone su due righe ma la cosa non è il massimo dell'estetica. Di default il gadget del menù delle pagine si posiziona subito sotto l'Header (o Intestazione) del blog. Logicamente si può anche spostare con il trascinamento del mouse andando su Layout.

Vediamo come aggiungere un nuovo menù subito sopra alla intestazione del blog per mostrare altri elementi ai lettori un maggior numero di opzioni di lettura.

Nel layout di Blogger non sarebbe possibile aggiungere un gadget sopra all'header. Per prima cosa quindi occorre abilitare questa opzione. Dopo aver salvato il template si cerca la riga

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


e si modifica in questo modo

 <b:section class='header' id='header' maxwidgets=' ' showaddelement='yes'>


In sostanza si è tolto il numero massimo di elementi e si è introdotto la possibilità di aggiungere un gadget sopra l'Header. Dopo aver salvato il modello, se andiamo su Layout vedremo una cosa così

Adesso si torna su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra a questa riga, si incolla il codice

/* Semplice Menù by www.ideepercomputeredinternet.com */
.samplemenu{
padding: 3px 0;
margin-left: 0;
font: bold 14px Trebuchet MS;
border-bottom: 1px solid #D1D1D1;
list-style-type: none;
text-align: center; /* scegli left, center, o right per posizionare il menu */}
.samplemenu li{
display: inline;
margin: 0;
}
.samplemenu li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #D1D1D1;
border-bottom: none;
background-color: #ffffff;
color: #212121;
}
.samplemenu li a:visited{
color: #711171;
}
.samplemenu li a:hover{
background-color: #DDFFDD;
color: #212121;
}
.samplemenu li a:active{
color: #212121;
}
.samplemenu li.selected a{ / *effetto selezione tabella menu */position: relative;
top: 1px;
padding-top: 4px;
background-color: #DDFFDD;
color: #212121;
}

Si scelgono i codici dei colori più appropriati per il nostro layout e la posizione del menu sulla sinistra, il centro o la destra. I più bravi possono anche provare a modificare altri parametri come quelli dello stile dei bordi. Si salva il modello e si va su Layout > Aggiungi un gadget > HTML/Javascript. Si sceglie proprio quello che è stato appena inserito sopra alla intestazione. Non si digita il titolo e in Sezioni del sito si incolla il codice vero e proprio del menù

<div class="samplemenu">
<ul>
<li><a href="#">ELEMENTO 1</a></li>
<li><a href="#">ELEMENTO 2</a></li>
<li><a href="#">ELEMENTO 3</a></li>
<li><a href="#">ELEMENTO 4</a></li>
<li><a href="#">ELEMENTO 5</a></li>
<li><a href="#">ELEMENTO 6</a></li>
<li><a href="#">ELEMENTO 7</a></li>
</ul>
</div>

dove al posto di ciascun cancelletto deve essere incollato un URL e ai vari elementi possono essere dati i nomi che preferiamo. Si possono anche aggiungere altre voci o togliere una o più righe se ci sembrano troppe. Si va su Salva quindi su Salva disposizione se abbiamo posizionato l'elemento pagina in modo diverso. Il Layout avrà questo aspetto

Possiamo anche settare la distanza del menù dalla intestazione se questa fosse troppo grande. Si va su Layout > HTML/Javascript > Modifica per visualizzare l'ID del widget che si trova alla fine dell'URL

Nel caso del mio test è HTML9. Si torna allora su Modello > Modifica HTML > Procedi e si cerca la solita riga ]]></b:skin>. Subito sopra di incolla un codice come questo

#HTML9 {
margin-bottom:-20px;
}

Si salva il modello. Al posto di 9 si mette l'ID del nostro widget e si calibra la distanza da diminuire