Delicious LinkedIn Facebook Twitter RSS Feed

Menu horizontal de pestañas para Blog.

Una pregunta habitual es cómo crear un menú horizontal en Blogger. Hay varios tipos de menú que podemos emplear este es sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.Lo podemos ver funcionando por ejemplo aquí.

Podemos adaptar este menú horizontal,agregando mas botones o editando el contenido enlazando cada botón al contenido que queramos.
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/AVvXsEiY1C6Vyx2RLT6wBwlkckQZb1xkfkCzwb41-mLrUwvKnSA-oVA9O_Cjhkv8YdnGmxGfP7NrjQG-CBYqCUVTJtmHCdacqDOKincxSbr1OJtUuxnpRDQX1VAx9kkj26eQKln_WkhkAVYVQQk/) 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/AVvXsEgAAYRKAKYXyfwgC-froC8OVYJAn27Z_32LZf4F0hWagy-NdBbIv4gyx8b3Ycke5Rhy2c0lJdKfmyZzTMTbcWssgD9zI98O_b1glPOM6Box-DKznSiefzYK23Vd7TgzUC9VI8GvYUb6KtLq/) 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>

*Cambia los datos que están en color rojo (Enlace "url" + nombre de Botón)por los tuyos. Puedes agregar las pestañas que quieras, sólo añadelas antes de

0 comments:

Post a Comment