¿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 los títulos de las páginas estáticas, 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 publicado, 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 personalizar el menú, entonces,...

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

1. Entender un poco sobre como se forman las listas (como se ven en el 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 listas, sin poner la dirección web y en lugar de eso aparece una almohadilla "#" (como generalmente aparece en los menús de plantillas de terceros que necesitan editarse)...

        <div id="un_menu_sencillito">

   <ul>

<li><a href="#">Inicio</a><li>

<li><a href="#">Sobre mi</a><li>

<li><a href="#">Contacto</a><li>

  </ul>

   </div>

¿Cómo interpretar el código anterior?

Veamos lo que nos intereza:

Primero: el menú viene listo para agregar tres enlaces, y estos se encuentran dentro de cada elemento de lista, es decir, dentro de tres juguetonas etiquetas llamadas "li", que se abren al principio "<li>" y se cierran al final: "</li>", entonces, lo que tenemos que hacer es identificarlos:

<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 en el menú, esto en un menú horizontal, o si es vertical, uno debajo del otro, pensando en que cada elemento flota a la izquierda, definido así en el CSS. 





Todas las listas empiezan poniendo antes otra etiqueta llamada "ul", que puedes ver el el código del menú, y que debe "cerrar" al terminar la lista de los enlaces del menú y aparece así:  "</ul>".

Segundo: dentro de cada elemento de la lista está muy contenta una etiqueta que se llama "a" y esta etiqueta es la "culpable" 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.


• La plantillas de Blogger cambian 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 eso,  y siguiendo el menú ejemplo, fácilmente podemos agregar otro enlaces y lo ponemos debajo del último elemento de lista, y antes de </ul>, pensando en que quiero que sea el último en aparecer en el menú, por ejemplo:

<li><a href="http://feeds.feedburner.com/Compartidisimo">RSS</a></li>





¿Cómo saber que 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:

     <div id="un_menu_sencillito">

<ul><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>

    </div>

Nota:

En algunos menús, en el caso del  "Inicio" o "Home", ya hay un código 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 ;)