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