Añadir Menu Desplegable A tu Blog

El Menú desplegable es una herramienta o widget esencial para cualquier blog o pagina web. Le da buen sentido o vista a tu plantilla por ende a tu blog. El menu desplegable le permite navegar facilmente a las diferentes partes de tu blog.

En este tutorial te enseñare añadir un sencillo menu desplegable a tu blog. Lo interesante de este widgetno requiere jquery y es codificado en  Html y CSS. Asi es mas rapido en ejecutarse. Empecemos!.

Como Añadir el Menu Desplegable  ?

1.Entra a la interface de blogger y da click en Diseño.
2. Entonces da Click en Añadir Gadget (Debajo de la Cabecera no en la bara del lado) y escoja el widget Html/Javascript .
3.Ahora pega el siguiente codigo

<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <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 Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>

4. Ahora cambie el texto en Bold(ejemplo:Home,About,Contact,Sitemap) con la etiqueta apropiada  tambien reemplace la Url sombreada en color rojo (#).
5.Para anadir otra Etiqueta al menu desplegable entonces anada el codigo antes de </ul>. o si desea borar alguna etiqueta  solo borre la que no desea mostrar en el menu desplegable. ejemplo de etiqueta abajo.Aqui ves la etiqueta de Contact puedes reemplazar por otro nombre en ve de Contact o borrarla eliminando el codigo que empieza con <li> y termina con </li>.

 <li>
       <a href='#'>Contact</a>
 </li> 

6.Ahora anadiremos el CSS, Entre a la interface de blogger y de click en Plantilla luego busque Edite Html. Haga una copia de tu plantilla .


7. Luego busque el siguiente codigo en tu plantilla.

]]></b:skin>

8.Pegue el siguiente codigo encima o arriba de codigo del Paso 7.

/**MBW Navgation bar**/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    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: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
             
}
#mbwnav li {
    float: left;
    padding: 0;
}
#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: #028490;
    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;
 
}
#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;
}

 9.Guarde la plantilla y tendras anadido el menu desplegable a tu blog.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati