En esta entrada vamos a aprender como colocar un Menú Horizontal Básico en la cabecera de nuestro blog. El proceso se divide en dos partes y aquí va la explicación…

.



Primera Parte:
Trabajamos con nuestra plantilla en HTLM, por eso, lo primero por hacer es GUARDAR una copia de nuestra plantilla y así tener la opción de recuperarla si queremos. Bien, ahora que ya guardamos, insertamos el menú. Desde nuestro PANEL clickeamos en DISEÑO y luego en EDICIÓN DE HTML y allí tildamos la opción Expandir Planillas de Artilugios. Utilizando la combinación de teclas CONTROL+F buscamos lo siguiente: ]]></b:skin>:
Inmediatamente antes pegamos el código que copio a continuación:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */
#nav-menu
{
width:30em
}

Luego GUARDAMOS la plantilla.

Segunda Parte

Vamos a DISEÑO y luego a ELEMENTOS DE PÁGINA. Nos muestra la organización de los elementos de nuestro blog. Elegimos Añadir un elemento de página y en la ventana que se abre elegimos la opción Añadir al blog HTML/Javascript. Se va a abrir una nueva ventana, dejamos sin completar el título y en la ventana del contenido copiamos el siguiente código:
<div id="nav-menu">
<ul>
<li><a href="AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE">TÍTULO</a></li>
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>
</ul>
</div>


Ahora GUARDAN. Hasta aquí el Menú nos quedó en un costado, entonces con el Mouse arrastramos el elemento que acabamos de crear hasta la cabecera de nuestro blog, luego vuelven a GUARDAR y así queda creado el menú.


A tener en cuenta
Donde dice AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE, tienen que copiar la dirección donde los va a mandar el botón del menú, por ejemplo: http://www.flacso.org.ar
Donde dice TITULO copian el nombre que va a identificar esa dirección que copiaron, por ejemplo: FLACSO.
En el ejemplo solo coloqué un menú con tres botones. Si necesitan más, sólo tienen que repetir la siguiente línea del código tantas veces como quieran:
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>

Bien, espero que les haya servido, sobre todo a mi compañerita Olga. Ya saben, cualquier problema, me escriben.


.