¿CÓMO CREAR UN MENÚ SUPERIOR HORIZONTAL EN BLOG DE BLOGGER BLOGSPOT? (I)

Si queremos un menú que esté en la cabecera o arriba del título de nuestro blog debemos seguir una serie de pasos.

Vamos a:

1) Diseño
2) Edición HTML
3) Buscamos (tecleamos Ctrl+F para buscar más rápido) ]]></b:skin>
4) Justo antes pegamos el siguiente código:

/* 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/AVvXsEiyd7m8UTYKqxty44hcirMnCyuVGtxbO-dwUVGu0VBo-5iANlynHpXZdKPNmeuw7M7MT-33psRXb-a1GcqjaNNGN9MbdPtyOA2wNQ1Io06RA23g-JrxnU0N2l7sKYo5099-tOk6XPrPLmI/) 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ú */

5) Buscamos ahora <div id='content-wrapper'>
6) Pegamos justo debajo el siguiente código:

<!-- 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 rojo por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de </ul>.



Gracias a ciudadblogger.

Posted in: menús para mi blog