Pubblicato il 06/08/12e aggiornato il

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.

men-blogger-intestazione
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ì

aggiungi un gadget blogger intestazione

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

menu-sopra-header-blogger

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


id-widget-blogger

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

diminuire distanza-elementi-header




27 commenti :

  1. Buongiorno mi puoi spiegare come posso ridurre l'altezza del menu pagine? Ho creato tre pagine ma vorrei che questa sezione fosse meno alta, mi spieghi come fare?

    RispondiElimina
    Risposte
    1. @gio6868
      Non è cosa che si possa spiegare in un commento. Prendo un appunto e vedo di fare un post sulle personalizzazioni del menù delle pagine

      Elimina
  2. ciao.
    ho provato e funziona. ma non mi da le pagine in orizzontale bensì in verticale.... come faccio per farle in orizzaontale come le tue?
    Grazie
    V

    RispondiElimina
    Risposte
    1. @ Virginia C.
      Potresti non avere seguito bene le istruzioni della prima parte del post oppure il tuo modello si comporta diversamente o ancora non hai posizionato bene l'elemento pagina. Prova a trascinarlo subito sotto l'intestazione

      Elimina
  3. Ciao se invece lo volessi inserire sotto l'header?
    ho giá provato, ma entra in conflitto con il css delle (Tabs) del modello e non mi visualizza i sottomenú.

    Dunque volevo sapere se era possibile inserire un menù multilivello sotto l'header, se si come e se mi potevi linkare il post sull'argomento.

    Grazie e scusa in anticipo per il disturbo.

    RispondiElimina
    Risposte
    1. @# Gli elementi sotto l'header hanno gli stessi CSS del menù nativo delle pagine statiche. Se hai già testato che non funziona c'è poco da fare

      Elimina
  4. e se io questa zona voglio dividerla in due parti?

    RispondiElimina
    Risposte
    1. @# Prova con questi tutorial
      http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html
      http://www.ideepercomputeredinternet.com/2011/05/come-dividere-l-di-blogger-in-due-parti.html

      Elimina
  5. Da quando blogger ha cambiato modalità per HTML non riesco più a trovare le parti di codici come presenti in tanti tutorial, a volte riesco a cavarmela da sola, ma altre, come in questo caso non trovo proprio la parte da modificare!
    Come posso fare?

    RispondiElimina
    Risposte
    1. @# Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      e guarda il breve video tutorial e sarà tutto più chiaro

      Elimina
  6. Buon giorno, ho utilizzando il codice non risulta chiaro però quale sia la pagina corrente visitata, come fare per evidenziarla? c'è un codice da aggiungere? Grazie, Sara

    RispondiElimina
    Risposte
    1. Metti un colore diverso da quello di hover a questa riga
      .samplemenu li a:active{
      color: #212121;
      in modo da vedere la scheda attiva colorata diversamente da quella puntata con il mouse
      @#

      Elimina
  7. Buongiorno ho creato questo menù; vorrei sapere se posso aggiungere delle icone come ho fatto con il suo tutorial per le pagine statiche
    GRazie Lisa

    RispondiElimina
    Risposte
    1. ok grazie mille!!!
      Purtroppo non riesco a spostare le pagine statiche sopra l'header in nessun modo!!!

      Elimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  9. E' possibile che nel modello in html io non riesca a trovare la stringa
    b:section class='header' id='header' maxwidgets='1' showaddelement='no'

    ma solo la stringa:

    b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'

    Grazie!

    RispondiElimina
    Risposte
    1. Questo significa non c'è la classe header. Tu cerca showaddelement e così potrai trovare tutti gli elementi bloccati eventualmente da sbloccare inserendo yes al posto di no e aumentando il numero massimo di widget
      @#

      Elimina
  10. Ernesto grazie mille per i tuoi suggerimenti. Ma una volta il menu sopra all'intestazione io ho provavto con la funzione aggiungi gadget sempre sopra all'intestazione ad inserire delle icone sociali, ma non me le mette o meglio me le mette ma mi toglie l'altro menu. si puo' mettere dunque solo un gadget sopra all'intestazione ? Grazie mille per la disponibilita'

    RispondiElimina
    Risposte
    1. In teoria con questo sistema si possono mettere tutti i gadget che si vogliono sopra l'header ma ogni modello fa storia a sé.
      @#

      Elimina
  11. Gentilissimo Ernesto,.
    ho scaricato un template dinamico per costruire un blog scolastico. (MXfluity Responsive Blogger Template by MKR )
    Nel blog era già inserito il menù posizionato sotto l'header: Home/About/Archive/Comments/With sub menù ma solo l'Home è attivo. Come posso attivare le altre etichette o personalizzarle?
    Premetto che so gestire un blog ma non conosco il linguaggio html.
    Nel ringraziarti, invio cordiali saluti
    Antonella

    RispondiElimina
    Risposte
    1. Vai su Modello > Modifica HTML e con Ctrl+F cerchi About, poi Archive, ecc Ci dovrebbe essere un rigo con il cancelletto # Devi sostituire al cancelletto (#) il link della pagina che vuoi collegare.

      P.S. Se scarichi un modello da internet ricordati che poi le modifiche sono difficili e che solo l'autore del template può aiutarti
      @#

      Elimina
    2. Gentilissimo Ernesto,
      grazie per la risposta precisa e tempestiva e per il suggerimento. Quindi dovrei optare per un modello proposto da Blogger?
      Cordialmente, Antonella

      Elimina
    3. Ognuno fa quello che crede :)
      I modelli scaricati da internet che sono perfetti per le nostre esigenze vanno bene ma se dobbiamo modificarli allora sono problemi perché il codice lo conosce bene solo il loro autore
      @#

      Elimina
    4. Grazie... terrò in considerazione
      Antonella

      Elimina
  12. Buongiorno,
    nel mio blog ho inserito un menu orizzontale, ma è troppo attaccato all'header (foto con logo).
    Come posso distanziare questi 2 elementi?
    Grazie
    Alessandra

    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.