El documento proporciona instrucciones en 3 pasos para crear menús y submenús en un blog de Blogger. El primer paso explica cómo editar el código HTML para permitir más widgets. El segundo paso instruye agregar un gadget HTML/JavaScript para insertar el código del menú. El tercer paso explica cómo agregar el estilo CSS dentro del código HTML para dar formato al menú de navegación.

1. Paso N° 1 (Plantilla, Editar HTLM, Control + F)
Ir a Tema (Opciones de la izquierda) y escoger Editar HTML
Buscamos (ctrl+f) el siguiente código:
<div class='region-inner header-inner'>
Líneas más abajo se encuentran los siguientes comandos, cambiar los
siguientes valores:
(maxwidgets=´10´ showaddelement=´yes´
Locked=´false´)
Paso N° 2 (Crear los Menús y Sub Menús)
(Diseño,añadir un Gadget,HTML Javascript)
Ir a diseño
Buscar la sección Todas las columnas
Dar clic en agregar Gadget
Seleccionar HTML/JavaScript
Pegar el siguiente código:
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='https://uecr-awbailon.blogspot.com/p/informacion-
personal.html'>Presentación Personal</a>
</li>
<li>
<a href='#'>1er Quimestre</a>
<ul>
<li><a href='https://uecr-awbailon.blogspot.com/p/blog-
page.html'>PARCIAL 1</a></li>
<li><a href='https://uecr-
awbailon.blogspot.com/p/p2q1.html'>PARCIAL 2</a></li>
<li><a href='https://uecr-
awbailon.blogspot.com/p/p3q1.html'>PARCIAL 3</a></li>
</ul>
<li>
<a href='#'>2do Quimestre</a>
<ul>
<li><a href='https://uecr-
awbailon.blogspot.com/p/p1q2.html'>PARCIAL 1</a></li>
<li><a href='https://uecr-
awbailon.blogspot.com/p/p2q2.html'>PARCIAL 2</a></li>

2. <li><a href='https://uecr-
awbailon.blogspot.com/p/p3q2.html'>PARCIAL 3</a></li>
</ul>
</li>
<li>
<a href='https://uecr-awbailon.blogspot.com/p/blog-
page_20.html'>Mis Proyectos</a>
</li>
<li>
<a href='https://uecr-awbailon.blogspot.com/p/refuerzo-
academico.html'>Refuerzo Académico</a>
</li>
<li>
<a href='https://uecr-awbailon.blogspot.com/p/pausa-ig.html'>Pausa
Docente</a>
</li>
</li></ul>
</div>
Nota:
Paso N° 3 (Plantilla, Editar HTLM, Control + F)
Buscamos en siguiente código: (Tema > Editar HTML)
]]></b:skin> ó /b:skin
Una vez encontrado aparecerá la siguiente línea:
<b:skin>…]]></b:skin>
Dar clic en los 3 puntos …
Copiamos en siguiente código encima de la línea
encontrada: ]]></b:skin>
/**MBW Navgation bar**/
#mbwnavbar {
background: #bdbfbf;
width: 900px;
color: #d8f602;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;

3. height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #023d90;
color: #0a0a0a;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;

4. }
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul
ul, #mbwnav li.sfhover ul ul ul { left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul,
#mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul
{
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #023d90;
width: 150px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

5. }
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

6. }
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}