Menú horizontal con pestañas

Una pregunta muy recurrente es cómo crear un menú horizontal en Blogger. Si bien hay varios tipos de menú que podemos emplear este me parece muy sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.

Primero entra a Diseño > Edición de HTML y pega antes de ]]> lo siguiente:


/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgevhRc62dNSI6N3DOI06p0fK6jugL6k-7odyFNVru536c449QZLHXO1qZKAZxFBixYPnptWYc2Yo0U54j8eKdKZNWyaDL9cskZF8c9JPqZjtbqzLVtrkPtY6hk6FZ6DOZhOdacyvxXYzI/) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img148.imageshack.us/img148/8764/tabbedlarge.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

Ahora busca esta etiqueta:

<div id='content-wrapper'>

Y pega debajo de ella esto:

<!-- Menú horizontal -->
<div id='menu'>
<ul>
<li><a href='URL del enlace'><span>Título 1</span></a></li>
<li><a href='URL del enlace'><span>Título 2</span></a></li>
<li><a href='URL del enlace'><span>Título 3</span></a></li>
<li><a href='URL del enlace'><span>Título 4</span></a></li>
</ul>
</div>


Sólo debes cambiar los datos que están en verde por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de
</ul>

Las pestañas que he hecho son de color gris, si no te gustan puedes quitar las dos URL que están dentro de
#menu a y #menu a span y usar el color de fondo que quieras.
El color y tamaño de la letra lo puedes cambiar dentro de #menu a span {font

Este menú quedará debajo de la cabecera, si quieres moverlo a otro lugar entonces sólo pega el último código en un elemento HTML/Javascript y arrástralo donde mejor te apetezca.

Fuente: Ciudad Blogger