REAR UN MENÚ DESPLEGABLE EN BLOGGER

CÓMO CREAR UN MENÚ DESPLEGABLE EN BLOGGER .

Un menú desplegable es necesaria cuando se tiene demasiado contenido en tu blog o te gusta mantener las cosas organizadas. Para agregar un menú desplegable a sus blogs de Blogger hacer esto:
Ir a Blogger> Diseño> Elementos de página
Seleccionar un HTML / JavaScript Widget justo debajo de la cabecera y pegue el siguiente código en su interior,

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

Después de haber insertado el código, un clic en "Guardar"

<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>

Reemplazar # con sus enlaces de página y el texto en negrita con nombres de las páginas pertinentes. El código de color amarillo resaltado es responsable del menú desplegable. Puede copiar y pegar en los términos de cualquier ficha que desea justo antes de </ li>
Para añadir otra ficha simplemente pega este código </ ul>

------------------------------------------------------------------

<li>
<a href='#'>Tab Name</a>
</li>

---------------------------------------------------------------------
3. Ahora Ve a Diseño> Edición de HTML
4. y haz una Copia de seguridad de la plantilla antes de tocar nada de la Plantilla

]]></b:skin>

Sólo por encima de ella pega el siguiente código,

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

Busca el siguiente código

]]></b:skin>

Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

-------------------------------------------------------------------------------------------

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}

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

}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;

}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
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;

}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Hacer estos cambios:
Cambiar # 060505 para cambiar el color de fondo del menú principal
Cambiar el color amarillo resaltado de texto para cambiar el color de fuente, el tamaño y la familia
Cambiar # BF0100 para cambiar el fondo de una ficha sobre cursor del mouse
Cambiar # BF0100 para cambiar el color de fondo del menú desplegable
Cambiar # 060505 para cambiar el color de fondo del menú desplegable en el cursor del mouse
4. Guardar la plantilla y ya está!