Blogger : Aggiungere barra di navigazione con menu a tendina

di navigazione a tendina  con sottomenu sul modello di blogger non è troppo difficile.

Per rendere più facile le cose seguite passo passo questa guida :

1. Accedi a blogger con il tuo ID
2. Fare clic su Layout
3. Fare clic su Modifica HTML
4. Prima di modificare il modello, vi consiglio di scaricarlo completamente prima e, se si commette un errore si puo` sempre ritornare indietro.
5. Ora cliccare su espandi widget in alto a sinistra e cercare con (ctrl+F):  ]]> </ b: skin> e aggiungere subito dopo questi codici Css. Potrebbe essere necessario regolare la larghezza, il colore e l’immagine url con uno vostro personalizzato, perché il carattere di ogni modello è diverso da un altro.
/* —– NAVBAR MENU —– */
#NavbarMenu {

width: 980 px;
height: 35px;
background:#99C9FF url(https://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif ) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif ) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Georgia, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Dopo di che, cercare questo codice
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’ Your Blog Title (Header)’ type=’Header’/>
</b:section>
</div> 

E aggiungere i seguenti codici subito dopo:

<div id=’NavbarMenu’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a href=’https://www.guide-informatica.com/search/label/News’>News</a></li>
<li><a href=’https://www.guide-informatica.com/search/label/All%20Software ‘>Software</a>
<ul>
<li><a href=’com/search/label/Anti%20Virus%20Software ‘>Antivirus</a></li>
<li><a href=’.com/search/label/Audio%20and%20Video%20Software ‘>Audio and Video</a></li>
<li><a href=’.com/search/label/Desktop%20Enhancements ‘>Desktop Enhancements</a></li>
<li><a href=’.com/search/label/Graphic%20and%20Web%20Design ‘>Graphic and Web Design</a></li>
<li><a href=’#’>Internet</a>
<ul>
</div>

</div> <!– end navbar –> 

7. Ora dovrete modificare tutti i link ,quelli segnati in rosso con i vostri link di una sezione che volete mostrare (ad esempio antivirus e affianco scrivere il nome che desideriamo)
8. Ora salviamo le modifiche e vediamo com’e` !
9. Per modificarlo al meglio (colori,stile ecc)vi consiglio di farlo con molta precisione e lentezza