18 noviembre 2011

Cómo Editar un Menú de Navegación y Agregar más Enlaces

Las plantillas nuevas de Blogger, permiten crear un menú de navegación usando el gadget de lista de páginas y ahora en la nueva interfaz, podemos agregar otros enlaces, ya sea de una página del blog o de otro sitio web.

Esto resulta práctico y muy sencillo, y es algo que he tenido en cuenta  para las últimas plantillas que he compartido, en lo que respecta a los menús, pero...

¿Qué pasa si se trata de un menú de navegación en donde se necesite ingresar a la edición de HTML de la plantilla para editarlo? ¿Alguién dijo miedo?

La cosa no está tan fea como para entrar en pánico, o quedarse con las ganas de usar una plantilla de terceros de las muchas que hay, sólo por no poder editar el menú.

¿Qué necesito para poder editar un menú de navegación y no morir en el intento?

1. Entender un poco sobre como se forma o luce una lista en HTML, ya que un menú es "una lista de enlaces" (generalmente), y también saber cómo se forma un enlace, así podrás agregar otros si necesitas, o quitar uno si te sobra.

2. La Dirección web de la página que quiero enlazar. 

3. Y lo más sencillo, definir el texto que le voy a poner a esa dirección web, y que será tu futuro "enlace".

Empecemos por el primer punto, y para hacerlo más simple, echemos un vistazo al HTML de un menú sencillo, hecho con una lista. Nótese que no he agregado la dirección Web de cada enlace y en lugar de ello he puesto una almohadilla "#".

<ul class="menu_sencillito">
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Contacto</a></li>
</ul>


¿Cómo interpretar el código anterior? Veamos lo que nos interesa:

Primero: el menú viene listo para agregar tres enlaces, y éstos se encuentran dentro de cada elemento de lista, es decir, dentro de una etiqueta llamada:li, que empieza así: <li> y que cierra o termina así: </li>. Entonces, lo que tenemos que hacer es identificarlas en el código del menú:

<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre Mi</a></li>
<li><a href="#">Contacto</a></li>


De ese modo se ordenan los enlaces para que aparezcan uno enseguida del otro de izquierda a derecha en el menú. Ésto en un menú horizontal, cuando así se definió en el CSS, o si es vertical porque no se definió ningún estilo, los enlaces aparecen uno debajo del otro.

Toda lista de enlaces empiezan poniendo antes otra etiqueta llamada: <ul>, que puedes ver en el código del menú que puse inicialmente, y ésta debe "envolver" la lista de los enlaces del menú, y al final aparece así: </ul>.

Segundo: dentro de cada elemento de la lista, está muy contenta otra etiqueta llamada <a> , y ésta etiqueta, es la "responsable" de que los textos: "Inicio, Sobre Mi y Contacto" se conviertan en "enlaces", al poner una dirección web dentro de un atributo llamado href y que se usa en dicha etiqueta.

Entonces, "Inicio, Sobre mi y Contacto", teniendo las direcciones web dentro de la etiqueta a, se convertirán en enlaces, ejemplo:

<a href="http://www.compartidisimo.com"> Inicio </a>

...y este sería el resultado de la linea de código anterior:
Inicio

Notas:
- Generalmente los menús en las plantilla que encontramos, viene la almohadilla o signo de número: "#" y tenemos que quitarlo y poner en su lugar la dirección Web que queramos.

- Todas las etiquetas aparecen dentro de corchetes angulares. Así al principio: "<". y así al final: ">". Así que cuando vayas a editar el código, ten cuidado de no quitar ninguno de ellos.

- En el editor del código de la plantilla, Blogger cambia las comillas dobles ["] por una comilla ['], por eso verás sólo una en lugar de dos.

¿Como agregar más enlaces al menú?


Sabiendo éso, y siguiendo el menú ejemplo, fácilmente podemos agregar otro enlaces y lo ponemos debajo del último elemento de lista, y antes de , pensando en que quiero que sea el último en aparecer en el menú, por ejemplo:

<li><a href="http://www.compartidisimo.com/p/acerca-de_23.html"> Acerca de </a></li>



¿Cómo saber qué dirección Web poner y cómo hacerlo?

Simplemente tienes que copiar la dirección web de la página que quieres, de la barra de direcciones de tu navegador, y ponerla dentro del atributo href de la etiqueta <a>.

Siguiendo con el mismo ejemplo del principio, entonces,sustituyamos todos los datos que necesitamos para que nuestro menú funcione:

<ul class="menu_sencillito" >
<li><a href="http://www.compartidisimo.com">Inicio</a></li>
<li><a href="http://www.blogger.com/profile/04752799945176272198">Sobre mi</a></li>
<li><a href="mailto:karlaenlinea@gmail.com">Contacto</a></li>
</ul>


Nota: En algunos menús, en el caso del "Inicio" ya hay un código de Blogger, que permite ir a la página principal del blog, sin necesidad de poner ahí la dirección de nuestro blog, y es éste:
expr:href='data:blog.homepageUrl'
En ese caso, no tendremos que sustituir nada en el enlace de "Inicio".

Consejos:
  • Siempre verifica en vista previa antes de guardar un cambio.
  • Una vez terminado de editar el menú, comprueba que los enlaces funcionen correctamente y envíen a la página deseada.

Espero sea útil, y no dudes en comentar tus inquietudes, de ese modo nos beneficiamos todos.

Buen fin de semana ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.