Crea un menú con submenús en Blogger

La necesidad de utilización de menús para estructurar la información es primordial para mantener nuestros contenidos correctamente estructurados y para que nuestros usuarios accedan a ellos sin problemas.

En anteriores entradas aprendimos a realizar un menú de un sólo nivel, esta variante suele ser la clase de menú más utilizada en los blogs, pues normalmente sus creadores tienden a organizar sus temáticas en categorías muy generales. ¿Pero qué sucede cuando queremos particularizar dentro de una temática y organizarla en categorías más pequeñas aún?. Hay veces que es necesario disponer de menús con mucho más de un nivel que nos permitan concretar aún más las divisiones de la información que albergamos.

• Home
• Tecnología
  • Hardware
  • Software
• Sobre mi
• Contacto

¿Quieres tener un menú de múltiples niveles con Blogger?, entonces este artículo te interesa.

Paso a paso:

1) En primer lugar realiza una copia de seguridad de tu sitio. La colocación de una hoja de estilos (".css") en tu blog requiere realizar unas modificaciones en código que, aunque realmente sencillas, requieren que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog:

2) Comenzamos conectándonos a cssmenumaker.com  y seleccionando uno de los ejemplos del catálogo que ofrece. Por defecto, dentro de la página inicial tendremos activo los menús de tipo "Drop down". De ellos voy a seleccionar el segundo del ejemplo.

3) Una vez hemos escogido el menú, pulsamos sobre el botón Download Source.

4) Se descargará en la carpeta del disco duro que elijamos la carpeta "source". En su interior habrá una subcarpeta llamada "cssmenu" donde habrá un .html con las instrucciones base para crear el menú. En la subcarpeta "menu_assets" se encontrará la hoja de estilos .css que sirve para trabajar con nuestro menú, así como el .png o imagen (si es que el menú escogido la tiene) que acompaña a la configuración del mismo.

5) Subiremos a Google Drive la imagen "overlay.png". Elijo este almacén de datos en la nube por su fiablidad y porque, teniendo usuario Google podremos utilizar con total libertad. Luego en la citada herramienta de almacenamiento de Google pondremos como público el acceso al .png que vamos a utilizar en el ejemplo.

6) Una vez subido el .png, apuntaros la URL desde donde se va a encontrar disponible.

7) Abrid el archivo "styles.css" y donde ponga "url(images/overlay.png)" poned dentro la URL pública que os dió Google Drive al hacerla pública. Es decir, sustituid url(images/overlay.png) por url(URL_DE_GOOGLE_DRIVE/

overlay.png) donde "URL_DE_GOOGLE_DRIVE" es la dirección que Google Drive te dió como URL pública para el archivo .png que subiste.

8) En Blogger, no vamos a modificar la plantilla original sobre la que trabajamos, fundamentalmente porque sólo queremos añadir un nuevo menú sin impactar en el resto del blog. Para poder realizarlo limpiamente subiremos la hoja de estilos "styles.css" modificada con la URL a la imagen "overlay.png" a Google Drive. Luego en la citada herramienta de almacenamiento de Google pondremos como público el acceso al .css que vamos a utilizar en el ejemplo para que sea accedida por el navegador para dibujar nuestro menú.

9) Una vez subido el .css, apuntaros la URL desde donde se va a encontrar disponible.

10) En vuestro blog, dirigiros a la opción de menú plantilla y pulsad "Editar HTML".

11) En el código fuente de vuestra etiqueta añadid justo antes de la etiqueta "</head>" el enlace en Google Drive a vuestro .css con este código: <link href='URL_DE_GOOGLE_DRIVE/styles.css' rel='stylesheet' type='text/css'/>   Donde "URL_DE_GOOGLE_DRIVE/styles.css" es la dirección que Google Drive te dió como URL pública para el archivo .css que subiste.

12) Añadid un gadget <Javascript/HTML> donde queráis que resida el menú, tal como hicimos en la entrada para el menú de un sólo nivel.

13) Editad el código e introducid dentro del gadget el siguiente código:

<div id="cssmenu">
<ul>
<li><a href="http://LA_URL_PRINCIPAL/index.html">Home</a></li>
<li class="has-sub "><a href="LA_URL_A_CATEGORÍA1">Tecnologia</a>
      <ul>
<li><a href="LA_URL_A_SUBCATEGORÍA1">Product 1</a></li>
<li><a href="LA_URL_A_SUBCATEGORÍA2">Product 2</a></li>
</ul>
</li>
<li><a href="LA_URL_A_CATEGORÍA2">About</a></li>
<li><a href="LA_URL_A_CATEGORÍA3">Contact</a></li>
</ul>
</div>

Cada <li class="has_sub "> contendrá el enlace a la página o a la instrucción "/search" (mirar ejemplo en menú de un sólo nivel) que nos sirve para localizar entradas con nombres de etiquetas determinados o nombres absolutos de las entradas ".html" a las que deseemos llamar. Después, tras el cierre de la etiqueta de "href", encontraremos el literal que desamos asignar a la opción del menú. Un "<li class="has-sub" indica que contiene subenlaces en su interior donde podremos poner por fin los subniveles con las temáticas en las que deseamos dividir la opción principal.

14) El resultado, con el tipo de menú que seleccionamos en cssmenumaker quedaría así a modo de ejemplo (pasa el ratón por encima para visualizar las subopciones y poderlas probar):

• Home
• Tecnología
  • Hardware
  • Software
• Sobre mi
• Contactacto