MENU HORIZONTAL
Menú Horizontal
Aquí
vamos a aprender como colocar un menú de opciones horizontales
Una
vez que accedes a tu blog, haces clic en plantillas y luego en Editar HTML.
Después
en editar HTML te aparecerá esta pantalla
En
ella buscas la línea indicada donde aparece el siguiente comando:
<b:skin> …</b:skin>. Haces clic en medio de ellas para que se
despliegue el comando de instrucciones y luego vas hasta el final de esta, la
reconocerás porque termina en: ]]></b:skin>, te ubicas una línea
antes, le das un enter y pegas la siguiente instrucción:
/* 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/AVvXsEiXsN9DInWxFe2LUfWobfGW5_6ZHPYuH15U66ertRZbG4GDwKn-NgXE_80DbxDB43Zk3_K96NCc7UlUR2mgAb_0TGBGr8W_mTEs0mipxm4HBsl6TAvJvppKcpWAf3TLLHN_mhNr-AFL6Og/) 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/AVvXsEh4IAX_N_gZARLufeL1tfC2ALYBcSH3h1Ssz9kuABQSL6TeCaPArde-7pSALkz09mHpTBLvdI8GewiUzK3mo_OZxKizOs-WX4rMTQYEMSCrO_zbHCPpltqYpbnBsMIPIpiQJ3RfL0BI6bDp/) 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}
----------------------------------------------- */
#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/AVvXsEiXsN9DInWxFe2LUfWobfGW5_6ZHPYuH15U66ertRZbG4GDwKn-NgXE_80DbxDB43Zk3_K96NCc7UlUR2mgAb_0TGBGr8W_mTEs0mipxm4HBsl6TAvJvppKcpWAf3TLLHN_mhNr-AFL6Og/) 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/AVvXsEh4IAX_N_gZARLufeL1tfC2ALYBcSH3h1Ssz9kuABQSL6TeCaPArde-7pSALkz09mHpTBLvdI8GewiUzK3mo_OZxKizOs-WX4rMTQYEMSCrO_zbHCPpltqYpbnBsMIPIpiQJ3RfL0BI6bDp/) 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}
Para
poder completar la aplicación ahora debes ir al comando diseños y en agregar un
gadget seleccionas editar,
Puedes
elegir un gadget en la parte superior o en donde quieras que aparezca la barra
horizontal, por lo general está ubicada en la parte superior izquierda.
Para
que se despliegue el siguiente comando
En
el te colocas donde dice contenido y pegas la siguiente instrucción y le das
guardar sin hacer nada mas:
<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>
<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
puedes ir a ver blog para que lo
visualices y si estas conforme guardas los cambios.
Seguidamente
puedes modificar el nombre del comando ingresando nuevamente en el gadget donde
pegaste la instrucción y cambias la palabra Titulo 1 por la que desees que
aparezca, esto lo puedes hacer con los cuatro títulos. Análogamente puedes
hacer con la URL de enlace, la cual es la dirección de la página o archivo que desees aparezca al hacer clic
sobre el, busca lo que desees que aparezca, copias la dirección y la sustituyes
por la url de enlace y listo. Espero tengas suerte con esto, al principio
cuesta pero luego de varias veces de práctica vas viendo que es fácil, suerte
con eso. Aquí te dejo una página que me ayudo bastante. Ciudad blogger
No hay comentarios:
Publicar un comentario