Per mettere in risalto le sezioni principali del blog o le pagine d'informazione e di contatto su Blogger come in qualsiasi altra piattaforma si preferisce optare per un menù orizzontale sotto al logo che su Blogger è comunemente conosciuto come il menù delle pagine che si può creare anche senza conoscere l'HTML in quanto è disponibile come widget. Il numero di sezioni che si possono andare ad aggiungere è limitato in quanto poi si vedrebbe male con l'aggiunta di una seconda riga ed in questi casi si può adottare il menù con sottosezioni. Il motivo per cui vado a creare quest'altro post è dovuto al fatto che per blog diversi si hanno esigenze diverse e quindi i menù precedentemente descritti risultano poco capienti oppure semplicemente non compatibili col modello in possesso.
Il menù che vado a presentare è di tipo orizzontale e multilivello cioè oltre alle prime sottosezioni al passaggio del mouse se ne vanno ad aprire altre; è utile per nascondere e gestire elenchi di link che non potrebbero entrare tutti ordinatamente nella sidebar laterale.
Siccome non è un semplice widget ma bisogna inserire lunghi codici vi conviene salvare il modello per poterlo ripristinare in caso di guai coi codici del template.
Adesso dovete andare su Modello > Modifica HTML ed usare i tasti CTRL+F per cercare la riga ]]></b:skin> ed appena prima sopra di essa incollare il seguente css che ne stabilisce i colori, le dimensioni e le distanze tra un elemento e l'altro:
...e sotto i due tag di chiusura </div> </div> dovete incollare il codice sottostante che farà apparire il menù proprio sotto il logo o il titolo del blog:
Chi non volesse la casella di ricerca all'interno del menù in modo da ottenere ancora più spazio dovrà eliminare tutto il codice compreso fra <!-- Casella di Ricerca Inizio --> e <!-- Casella di Ricerca Fine -->
compresi essi stessi.
Molto probabilmente questo menù non va bene per la versione mobile del blog, quindi se volete utilizzarlo potete attivare la versione mobile di Blogger in modo da fornire una visione del blog limitata ma più leggera e di dimensioni compatibili per tutti i dispositivi mobili.
Il menù che vado a presentare è di tipo orizzontale e multilivello cioè oltre alle prime sottosezioni al passaggio del mouse se ne vanno ad aprire altre; è utile per nascondere e gestire elenchi di link che non potrebbero entrare tutti ordinatamente nella sidebar laterale.
Siccome non è un semplice widget ma bisogna inserire lunghi codici vi conviene salvare il modello per poterlo ripristinare in caso di guai coi codici del template.
Adesso dovete andare su Modello > Modifica HTML ed usare i tasti CTRL+F per cercare la riga ]]></b:skin> ed appena prima sopra di essa incollare il seguente css che ne stabilisce i colori, le dimensioni e le distanze tra un elemento e l'altro:
/* Menu orizzontale con casella di ricerca */Dopo averlo incollato salvate il modello, rimanendo sempre in questa sezione dovete cliccare sul pulsante Vai al widget e selezionare Header1, qui dovete cercare il termine "Intestazione"...
#menuMultilevel {
width:98%; /* Larghezza del menú */
height:35px;
padding-left:14px;
background:#D84938; /* Colore dello sfondo */
border-radius:12px; /* Raggio curvatura bordi voci principali */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#eee; /* Colore del testo delle voci senza mouse */
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Dimensioni dei font */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; /* Colore testo voce con mouse*/ }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#D84938; /* Colore di sfondo dei sottomenu */
padding:3px;
white-space:nowrap;
width:200px; /* Larghezza dei sottomenu */
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px; /* Larghezza dei sottomenu */
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#eee; /* Colore del testo delle voci senza mouse */
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Colore di sfondo dei sottomenu */
background:#D84938 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x_xvzU4Iwq-z4noh5rHsJt8MUGCzKTZmTRPpaSdXvAqN8eoqS7GR-0jodviYKpe0C7lT59UsjtUhLGuNyyN3WBsDxNHhXzm2wia21HRxpB9mVoJ1hbVldS_0qCKPlEEY_MrCOGqjIRE/s800/freccia-su.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#008250; /* Colore di sfondo al passaggio del mouse */
color:#fff; /* Colore del testo delle voci puntate dal mouse */
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Colore di sfondo al passaggio del mouse */
background:#008250 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x_xvzU4Iwq-z4noh5rHsJt8MUGCzKTZmTRPpaSdXvAqN8eoqS7GR-0jodviYKpe0C7lT59UsjtUhLGuNyyN3WBsDxNHhXzm2wia21HRxpB9mVoJ1hbVldS_0qCKPlEEY_MrCOGqjIRE/s800/freccia-su.gif) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #D84938; /* Colore di sfondo del sottomenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
/* CSS della casella di ricerca */
#search {
width: 228px; /* Larghezza della casella di ricerca */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Immagine di sfondo del motore di ricerca */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2E913lN4UE_HOTBjs7fJJsm9BGCOsjNnU3qMLnYXb6Q_zSU6OrXsnHXkBj-vGdNn0KlMVDekrpRaZuyUHnl-s6WZ9z9mTeNp1UXt2tDSQOCuLrucIIdY0VrGQOFC-rQh8n-XIy2x/s1600/ricerca.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
...e sotto i due tag di chiusura </div> </div> dovete incollare il codice sottostante che farà apparire il menù proprio sotto il logo o il titolo del blog:
<div id='menuMultilevel'>Adesso salvate nuovamente il modello ed a salvataggio completato dovreste ritrovarvelo sul vostro blog. Se volete visualizzarlo prima del titolo del blog dovrete incollare il codice soprastante prima dell'area evidenziata. Se invece si dovesse vedere distorto provate ad eseguire l'ottimizzazione del modello in modo uguale per tutti i browser.
<ul class='menu'>
<li class='top'><a class='top_link' href='Link_URL'><span>Voce 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 2</span></a><ul class='sub'><li><a class='fly' href='#'>Voce 2.1</a><ul>
<li><a href='Link_URL'>Voce 2.1.1</a></li>
<li><a href='Link_URL'>Voce 2.1.2</a></li>
<li><a href='Link_URL'>Voce 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Voce 2.2</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.1</a></li>
<li><a href='Link_URL'>Voce 2.2.2</a></li>
<li><a href='Link_URL'>Voce 2.2.3</a></li>
<li><a class='fly' href='#'>Voce 2.2.4</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.4.1</a></li>
<li><a href='Link_URL'>Voce 2.2.4.2</a></li>
<li><a href='Link_URL'>Voce 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link_URL'>Voce 2.2.5</a></li>
<li><a class='fly' href='#'>Voce 2.2.6</a>
<ul>
<li><a href='Link_URL'>Voce 2.2.6.1</a></li>
<li><a href='Link_URL'>Voce 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link_URL'>Voce 2.3</a></li>
<li><a href='Link_URL'>Voce 2.4</a></li>
<li><a href='Link_URL'>Voce 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 3</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 3.1</a></li>
<li><a href='Link_URL'>Voce 3.2</a></li>
<li><a href='Link_URL'>Voce 3.3</a></li>
<li><a href='Link_URL'>Voce 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 4</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 4.1</a></li>
<li><a class='fly' href='#'>Voce 4.2</a>
<ul>
<li><a href='Link_URL'>Voce 4.2.1</a></li>
<li><a href='Link_URL'>Voce 4.2.2</a></li>
<li><a href='Link_URL'>Voce 4.2.3</a></li>
<li><a href='Link_URL'>Voce 4.2.4</a></li>
<li><a href='Link_URL'>Voce 4.2.5</a></li>
<li><a href='Link_URL'>Voce 4.2.6</a></li>
</ul>
</li>
<li><a href='Link_URL'>Voce 4.3</a></li>
<li><a href='Link_URL'>Voce 4.4</a></li>
<li><a href='Link_URL'>Voce 4.5</a></li>
<li><a href='Link_URL'>Voce 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Voce 5</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce 5.1</a></li>
<li><a href='Link_URL'>Voce 5.2</a></li>
<li><a href='Link_URL'>Voce 5.3</a></li>
</ul>
</li>
<!-- Casella di Ricerca Inizio -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Cerca...";' onfocus='if (this.value == "Cerca...") this.value = "";' size='28' type='text' value='Cerca...'/></form>
</li>
<!-- Casella di Ricerca Fine -->
</ul>
</div>
Chi non volesse la casella di ricerca all'interno del menù in modo da ottenere ancora più spazio dovrà eliminare tutto il codice compreso fra <!-- Casella di Ricerca Inizio --> e <!-- Casella di Ricerca Fine -->
compresi essi stessi.
Prime sezioni
Per aggiungere le sezioni principali dovete inserire prima del codice della casella di ricerca un codice simile al seguente modificando l'indirizzo link e il nome della sezione:<li class="top"><a href='Link_URL' class="top_link"><span>Voce X</span></a></li>
Seconde sezioni
Se ad una sezione volete aggiungere le sottosezioni dovete sostituire il codice delle prime sezioni con quest'altro:
<li class='top'><a href='Link_URL' class='top_link'><span class='down'>Voce X</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce X.1</a></li>
<li><a href='Link_URL'>Voce X.2</a></li>
<li><a href='Link_URL'>Voce X.3</a></li>
</ul>
</li>
Terze Sezioni
Oltre alle sottosezioni potete inserire i sottomenù per rendere il menù ancora più ampio, se ad esempio volete crearne uno per la sottosezione Voce X.2 dovete sostituire la riga blu con il codice seguente e poi sostituire link e nomi:
<li><a href='#' class='fly'>Voce X.2</a><ul>
<li><a href='Link_URL'>Voce X.2.1</a></li>
<li><a href='Link_URL'>Voce X.2.2</a></li>
<li><a href='Link_URL'>Voce X.2.3</a></li>
</ul></li>
