Muchos blogs, tienen varias categorías, demasiadas como para agregarlas todas en un simple menú horizontal. Lo que uno puede hacer en este caso es crear 5 o 6 categorías generales y crear subcategorías de cada categoría para hacer todo más navegable. Eso lo podemos hacer con CSS y HTML. Es muy sencillo hacerlo, pero recomiendo que presten bastante atención. Pueden ver un ejemplo de como queda en mi blog de pruebas.
[1] Vamos a Diseño > Edición de HTML y pegamos esto antes de ]]</b:skin>:
/* MENU DOS (Robs)
----------------------------------------------- */
#subnavbar {
background: #13367e; /* fondo del menú */
width: 660px; /* ancho del menú */
height: 27px; /* alto del menú */
font-weight:bold;
color: #FFFFFF; /* color del texto */
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF; /* color del enlace */
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF; /* borde de las pestañas */
}
#subnav li a:hover, #subnav li a:active {
background: #1c71b3; /* fondo de la pestaña al pasar el cursor */
color: #ffffff; /* color del enlace al pasar el cursor */
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #13367e; /* fondo del submenú */
width: 120px; /* ancho del submenú */
heigth: 20px; /* ancho de las pestañas del sumenú */
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF; /* borde inferior de las pestañas del submenú */
border-left: 1px solid #FFFFFF; /* borde izquierdo de las pestañas del submenú */
border-right: 1px solid #FFFFFF; /* borde derecho de las pestañas del submenú */
}
#subnav li li a:hover, #subnav li li a:active {
background: #1c71b3; /* fondo de la pestaña del submenú al pasar el cursor */
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
[2] Ahora lo único que nos queda hacer es pegar esto en un nuevo elementoHTML/Javascript:
<div id="subnavbar">
<ul id="subnav"><li><a href="Url del blog" title="Inicio">Inicio</a>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">Contacto</a>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a><ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul></li></ul></div>
Modificaciones:
- Donde dice Pestaña, modificamos el nombre que tendrá la pestaña principal.
- Donde dice Sub-pestaña, modificamos los submenus que aparecen al pasar el cursor por encima de cualquier pestaña. Y donde dice href="" colocamos la url de cada pestaña y sub-pestaña entre las comillas.
