Menú En Blogspot

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ú.

ATENCIÓN: Si Usas Una Plantilla Atraves Del Diseñador De Plantillas De Blogger Sigue Los Pasos De Esta Entrada.

Primero entra a Diseño > Edición de HTML y pega antes de ]]></b:skin> 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/AVvXsEinEbGLa5rQhLnUeiAT-kjqvug1U1O3A-7aQws5CzEU0CCU5u3lK57ZD3XShFFbqQqdZP-HVXfRnX8z7_66TWTQSrs2-zjCkIADRUjQdt2stgk5aL0D-VG39KxJKTMTVDJtNG924s7ojF0/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGsOjMZzg60qbuTZ7kR2QfSs8Db4-SYNIkU9OC8XRTohsUTE1zslF8FTJ_srpG4J_ejmrbbsxGt3tg1fezXVgCCoBeX_EMhoL0eBxJoLCkjCMQJF24Zlt_jOxtYMtxtw1y6FcYgpEz2Wc/) 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}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<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>

Ahora arrastra el gadget debajo de la cabecera y cambia los datos que están en color rojo 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: