Menú horizontal para el blog

El funcionamiento de este menú es como los otros que he probado anteriormente, con la única diferencia que hay que hacerlo más o menos a mano. Aún con este pequeño inconveniente, a mi me gusta mucho, no es difícil de hacer y al pinchar sobre los botones se muestran todas las entradas con esa etiqueta.
El único problema que me ha surgido, es que, como yo tengo muchas etiquetas, los botones me salían en dos filas, para evitarlo reduje su tamaño, pero esto hizo que se viera demasiado pequeño, así que opte por colocar un tres de ellos en la sidebar, con lo que está demostrado que también sirve como menú vertical.

Os explico como se hace:

1- Antes de ]]></b:skin> en el HTML de nuestra plantilla, colocamos esta porción de CSS:

#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */

}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #333399;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;

}

#navcontainer #active { border-left: 1px solid #fff;
}

Aquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.

2- Buscamos en nuestra plantilla esta línea de código:

<div id='content-wrapper'>

Y justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos Blog' id='current'>Trucos Blog</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos imagenes'>Trucos Imagenes</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Datos utiles'>Datos Útiles</a></li>

<li><a href='http://elescaparatederosa.blogspot.com/search/label/Ranking de comentarios'>Ranking de comentarios</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Boton Enlace'>Botón Enlace</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Cosas mias'>Cosas mias</a></li>
</ul></div>

Lo copio tal cual está hecho el mio, tenéis que cambiar el nombre de mi blog por el vuestro y, por supuesto el nombre de las etiquetas por las de vuestro blog, así cuando pinchemos sobre uno de los botones del menú, se mostrarán todas las entradas con esa etiqueta.
Hay que tener cuidado al escribir el nombre de la etiqueta, pues si no está escrito exactamente como en el blog no funcionará el link del menú.
Fijaros que el nombre de las etiquetas, hay que ponerlo dos veces en cada enlace, una justo después de /label/ y la otra a continuación, ya que la primera es el enlace y la segunda el nombre que se muestra en el botón del menú.

Para usarlo en vertical, tenemos que aplicar en un nuevo elemento HTML-Javascript, el segundo código, pero etiqueta por etiqueta, es decir así:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos Blog' id='current'>Trucos Blog</a></li>
</ul></div>

¡Suerte!