Menu horizontal multiple en Blogger

Tweet

Aqui esta un buen menu muy facil de utilizar y que permitira acceder a tus categorias - temas o a otros blogs:

1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.
2.- Ahora pegas esto en la sección de CSS, es decir antes de ]]></b:skin>:

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Esta es la parte media oscura pero la explicare paso por paso:

3.- Ahora pon control + f y busca <div id='header-wrapper'> (está casi al último) la cual cierra con <DIV> a partir de alli, pega lo siguiente:

<center><strong><big><font color='white'>Temas - Etiquetas</font></big></strong></center>
<div id="navcontainer">
<ul id="navlist">
<center>
<li id="active"><a href="#" id="current">Item uno</a></li>
<li><a href="#">Item dos</a></li>
<li><a href="#">Item tres</a></li>
<li><a href="#">Item cuatro</a></li>
<li><a href="#">Item cinco</a></li>
</center>
</ul>
</div>

4.- Muy bien ahora lo editamos:
Cambia esta parte para darle otro titulo, yo le puse temas etiquetas:
<strong><big><font color='white'>Temas - Etiquetas</font></big></strong>

5.- En esta parte, tu tienes que editar la redireccion:
<li><a href="#">Item dos</a></li>

Si por ejemplo quieres deshacerte de tus etiquetas tradicionales para ponerle un estilo personal pues primero debes tenerlas activas, vas por cada una haciendole click derecho y copiando el link para luego pegarlo en donde dice # luego le pones el nombre de la etiqueta original en vez del item warever (1,2,3,4).

Asi haces con todas y cada una de ellas... como van a salir una fila interminable pues los agrupas por intereses, lo cual es extremadamente util, y los divides de forma armoniosa con un simple <br/>

El resultado te quedara asi:



Pero como soy obsesivo tanto para personalizar mi blog como para explicar estos trucos pues voy a exponer otro truco por si necesitas poner otro menú distinto en tu mismo blog para lo que sea.

Tengo por ejemplo este menú que me gusta mucho... mismo sistema, pegas esto debajo del anterior código que insertaste en el sector de Css.

#navlist1
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#navlist1 li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist1 li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist1 li a:link { color: #448; }
#navlist1 li a:visited { color: #667; }

#navlist1 li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist1 li a#current
{
background: white;
border-bottom: 1px solid white;
}

El código original tiene #navlist pero para que no se confunda con el anterior menú pues le puse un simple 1, es decir: #navlist1, para que el navegador no de error.

Luego buscas el <div id='header-wrapper'> - <DIV> luego del cual pegaste el anterior código del menú y debajo de el pegas:

<center><strong><big><font color='white'>Mis otros blogs:</font></big></strong></center>
<div id="navcontainer">
<ul id="navlist1">
<center>
<li id="active"><a href="#" id="current">Item uno</a></li>
<li><a href="#">Item dos</a></li>
<li><a href="#">Item tres</a></li>
<li><a href="#">Item cuatro</a></li>
<li><a href="#">Item cinco</a></li>
</center>
</ul>
</div>

Lo editas como el aterior pero ahora le pones cualquier otros links, los que te de la gana.

Ahora cambié el navlist por navlist1, si le quieres poner mas menús distintos solo tienes que cambiar los navlist y agregarle otro número, los distintos menús los podrás encontrar en esta página, hay una infinidad de menús tanto horizontales como verticales, los códigos los sacas de alli, yo utilicé estos dos menús horizontales:

Rollover horizontal list y Eric Meyer's tabbed navbar.

Te quedara así:



Una vez que has hecho esto ya podras borrar tus etiquetas tradicionales, en lo personal a mi ya me aburrió la famosa nube de etiquetas...

Listo disfrútalos...