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/AVvXsEjVwae5xkAu7XoRceVHZLPCZ-bQTLsmvL8hn2cjmDTrpaX-V_izR_a-TrkZIYVSFVM0Fd8cZa-ZO_4r7J9vXxYZ8yQTrX3ARwNlKLw91v0Qu3l5iFTHDE_lyPPeJ1C2bHxLlGiKKPh0QWs/) 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:
Y pega debajo de ella esto:
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 .
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.
Para ver el ejemplo funcionando haz click aquí.
_______________________________________________________________________________
Este es un menú horizontal desplegable para el blog con efecto deslizante. El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante al que le puedes agregar sub menús y estos aparecen con un efecto deslizante hacia abajo. Puedes verlo funcionando en este blog de pruebas.
Para poner este menú horizontal en Blogger sólo hay que seguir estos sencillos pasos:
Entra a Diseño > Edición de HTML y pega antes de lo siguiente:
No hay comentarios:
Publicar un comentario