29 abr. 2013

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.

¿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):







Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

34comentarios:

  1. Muy chulo! Yo le añadiria un buscador para que el publico encuentre mas facilmente lo que necesita.
    Saludos

    ResponderEliminar
  2. Muy bueno; a tener en cuenta en el futuro y para seguir aprendiendo.
    Gracias.

    ResponderEliminar
  3. Otra entrada interesante que pondré a la cola de cosas que tengo que hacerle al blog.
    Gracias1

    ResponderEliminar
  4. Muy bueno, intentaré probarlo, ya te contaré. Gracias

    ResponderEliminar
  5. Hola,los menús que oferta cssmenumarker.com, ¿son gratuitos?

    ResponderEliminar
  6. Pienso que sí, yo bajé el mío sin problemas. Al final son .css sin más.

    ResponderEliminar
  7. Miguel, sigo atascada en el menú, me gustaría que funcionara, si tienes tiempo échale un vistazo, gracias

    ResponderEliminar
    Respuestas
    1. No te preocupes, en cuanto tenga tiempo te mando el .txt con el código que necesitas. Es que ando liado estos días, en cuanto pueda lo tienes. Un saludo!

      Eliminar
  8. hola Miguel a mi no me sale el archivo.png . Donde dices...
    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. En mi archivo styles no sale nada de url(images/overlay.png)

    ResponderEliminar
    Respuestas
    1. Hola, no te preocupes por ello. Dependiendo del menú que hayas elegido, muchos no utilizan imagen para dibujarse. No hay problema por ello. Un saludo!

      Eliminar
  9. ¡Hola!
    He subido el .png a drive, pero es que no sé como coger la URL. Lo tengo puesto ya en modo público. ¿Me puedes decir como se hace?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Cristina,

      En el paso 7) lo explica: 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.

      Cuando publicas en Google Drive fíjate que te sale un código en medio de la URL que te devuelve Drive.

      Mira esto es un ejemplo:

      - URL QUE DRIVE TE DA AL COMPARTIR COMO PÚBLICO: https://drive.google.com/file/d/0Bwgc28XHjPA2d3RIWVRQZUNhTDg/edit?usp=sharing

      - ASÍ DEBE QUEDAR PARA PODERLA UTILIZAR DESDE TU BLOG: http://googledrive.com/host/0Bwgc28XHjPA2d3RIWVRQZUNhTDg

      Si te fijas el código alfanumérico 0Bwgc28XHjPA2d3RIWVRQZUNhTDg que salía en la URL que te devuelve Drive al compartir, es el que luego añado a http://googledrive.com/host/ para poderla utilizar desde el Blog.

      Si te quedan dudas escribe sin problemas.

      Un saludo!!!

      Eliminar
  10. Hola:
    Lo primero que quiero hacer es felicitarte por el blog y los contenidos son de gran ayuda.
    He intentando crear un menú con subopciones y creo que hasta el punto 11 de la explicación lo he hecho bien , pero cuando llego al 12 y 13 no llego a comprenderlo bien . No se seguir me lio con las instrucciones del tutorial para hacer un índice sencillo y uno con subopciones.
    No se si me he explicado muy bien, espero que puedas ayudarme
    Gracias

    ResponderEliminar
    Respuestas
    1. Gracias Oroitz Garate, para mi es genial que pueda servirte y para eso estoy aquí, para ayudar.

      El punto 12) es dentro de Blogger, meterte en "Diseño" y darle a "Añadir Gadget" en la zona donde prefieras que resida el menú. Selecciona el tipo de gadget de la lista que sale que se llama HTML/Javascript.

      El punto 13) es para que una vez que hayas seleccionado el Gadget HTML/Javascript, copies dentro el código de tu menú.

      En dicho código el "div id=" es para poner el css al que llamas y el resto son las opciones de menú.

      Por favor, no te quedes con dudas, si no te queda claro vuelve a escribirme y lo vemos. No te preocupes que al final sale ;) paciencia. Cualquier cosa pregunta sin miedo.

      Un saludo.

      Eliminar
    2. Buenas tardes:
      Ya he añadido el gadget HTML y no sale bien.
      Si entras al blog garatefotografia.blogspot.com verás el resultado.
      A ver si podrias decirme en que me he equivocado exactamente.
      Gracias

      Eliminar
    3. Hola,
      te falta añadir los estilos, la hoja de estilos. La parte en que subes a Google Drive los estilos para poderlos utilizar en tu web (del paso 4 en adelante). Cuando "llamas" a los estilos, al no estar, no se aplica presentación al menú.

      ¿Subiste los estilos a Drive?.

      Un saludo!

      Eliminar
    4. Si que subi la hoja styles.css modificada junto a las imágenes caret.png y menú.png y después en plantilla edite el HTML pero nada.
      La verdad que no se donde puede estar el fallo.
      Gracias por la atención

      Eliminar
    5. No te preocupes. Mándame el código que utilizaste y en cuanto tenga tiempo lo miro (tardaré aún porque ando muy ocupado). En cuanto pueda te lo miro.

      Un saludo!

      Eliminar
    6. ok, te mando un e-mail.
      Muchas gracias por todo.

      Eliminar
    7. Eso si, paciencia que ahora estoy un poco sobre-cargado. En cuanto pueda lo miro. Un saludo y muchas gracias a ti por participar.

      Eliminar
  11. No funciona. Todo un día perdido.

    ResponderEliminar
    Respuestas
    1. Hola Yimi, ¿qué no te funciona?, ¿en qué paso te quedaste?.

      Un saludo.

      Eliminar
  12. Hola Miguel estoy haciendo tus pasos y no consigo pasar del punto 4

    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.
    Yo he elegido un menu diferente al que has elegido tú como ejemplo y no me sale la subcarpeta que dices.

    Me podrías ayudar ? Gracias

    ResponderEliminar
    Respuestas
    1. Hola India,
      si no hay archivos adjuntos, seguro que al menos te viene un HTML o algún archivo donde tendrás las hojas de estilo de tu menú con subopciones y el código para dibujarlo.

      Debes poner las hojas de estilo o en Drive o escribirlas directamente en tu propia plantilla (al final de SKIN justo antes de /SKIN.

      Luego el código del menú ya lo puedes poner como te comenta a partir del paso 12. Si quieres incluso sáltate todos los pasos y ve directa al paso 12 y cópiate con tus propias opciones y de más el código que yo mismo pongo a partir del paso 12.

      Un saludo!

      Eliminar
  13. Cuando puedas y tengas un rato, podrías contestar a mi dirección de correo electrónico.

    Muchas gracias y perdona las molestias.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola,
      ve haciendo lo que te comenté en el comentario anterior y a ver si así lo consigues. Puedes directamente ir desde el paso 12 y utilizar el mismo código que pongo yo pero adaptándolo a tu propio menú.

      Un saludo!

      Eliminar
  14. Fantástico, me funciona!!!
    Aún así hay alguna cosilla que me gustaria pulir. Te comento por si me puedes echar una mano:
    - como se puede hacer para que la pestaña del menú que tiene submenú no le salga la opción de link.
    - tengo otra pestaña del menú que dirige a otro blog que ya tenia, pero no consigo que el enlace se abra en una pestaña nueva y no encima de la misma.

    Muchas grácias!!!

    ResponderEliminar
    Respuestas
    1. Hola!,
      - Para lo del Link, si dejas el "href" de la subopción del menú sin una dirección, no hará nada cuando se pulse. Es decir, saldrá la opción pero sin link.
      - Para abrir tu blog en otra ventana tienes que poner delante del "href" dentro de la etiqueta <a target="_blank" href=... es decir, añade dentro del href por delante " a target="_blank" " y te lo abrirá en una nueva pestaña del navegador, sin machacar la que estás usando para tu Blog.

      Un saludo!!!

      Eliminar
    2. Genial Miguel!!!
      Muchas gracias por todo.

      Eliminar
    3. Por cierto, me deje de preguntarte otra cosilla: como puedo eliminar las viñetas (el punto) que me sale delante de cada categoria?
      Mil gracias!!!

      Eliminar
    4. Hola, eso es por la hoja de estilos. Es posible que no te haya cogido todos los estilos que necesitas. A mí me sucede en la demo del final de esta guía, la primera que muestro si tiene los estilos puestos y por eso sale sin viñetas.

      Un saludo!

      Eliminar
  15. Miguel por curiosidad que te pareceria que halla un bloog de borrachos, donde un borracho hable con otros por divercion, inspirado en mi cuando le digo a mi novia sus verdades y para que ya no me pegue

    ResponderEliminar
    Respuestas
    1. Lo mejor es no emborracharse... disfrutar de las cosas con plena consciencia es mucho mejor.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.