21 de junio de 2016

Cómo añadir un menú horizontal al blog (con Blogger)

Añadir un menú horizontal de páginas al blog


Mi blog está creciendo en entradas y contenido lo que está complicando un poco su lectura y localización de temas.

Para organizarlo un poco veo necesario incluir un menú donde esté clasificado por secciones o temática, permitiendo de esta forma una mayor usabilidad y eficiencia del blog.


Cómo añadir un menú horizontal al blog para mejorar su usabilidad


Se puede hacer mediante las herramientas que ofrece Blogger o bien con código CSS.
Voy a empezar por la forma más sencilla, es decir, con los gadgets  y páginas de Blogger.

Por el momento mi blog está tratanto temas de photoshop y blogger, y estas serán las dos pestañas que incluiré en el menú de contenidos, a parte de la pestaña que me permita posicionarme en la página principal.

Lo primero que hago es añadir un gadget de "página" a la plantilla del blog.

Para eso voy a Diseño desde la zona de escritorio.

Diseño en Blogger




















El siguiente paso es añadir el gadget. Como quiero crear un menú horizontal, tendré que añadirlo bajo la cabecera, por ejemplo en Cross-Colum 2.

El problema con el que me encuentro es que no me aparece +Añadir un gadget
Lo he solucionado añadiendo este gadget en el espacio destinado a la columna derecha del blog donde están el cuadro de búsqueda, Etiquetas y Archivo (Sidebar-right-1)

Hago clic en "Añadir un gadget". 

Añadir gagdet blogger


Y se abre una ventana donde selecciono el gadget "Página".


Gadget Páginas


Se abre la ventana para configurar la página.
En título (es opcional) he puesto el nombre de Menú horizontal, para identificar el menú con la lista de páginas.
Y el cuadro de "Seleccionar todas" lo dejo marcado y le cambio el nombre de Página principal por el nombre de Inicio porque llevará a la página principal del blog.

Configurar lista de páginas

Ahora tengo que mover este gadget y desplazarlo a la zona destinada a Cross-Colum 2 para que se sitúe bajo la cabecera del blog.

Desplazando gadget


El diseño de la plantilla del blog queda de la siguiente forma,


Plantilla con gadget añadido


Si se visualiza el blog, veo que se ha creado una barra en fondo blanco con la palabra Inicio, que es la página que he añadido.

Añadida página Inicio

Tengo configurada la barra de menú pero ahora tengo que añadir una nueva página.

Para eso regreso al menú de Blogger, selecciono Diseño y hago clic en Editar dentro de Cross-Column 2 (donde tengo el gadget de Página).

Plantilla con gadget añadido


Y hago clic en +Añadir enlace externo.
Como título de la página escribo Photoshop y añado la dirección web (URL) de las entradas etiquetadas con el nombre Photoshop.


Datos página nueva de menú horizontal

¿Cómo consigo este link? Es fácil. Hago clic en la etiqueta Photoshop (dentro de la sección Etiquetas) y se abre una página con la selección de estas entradas.
Copio la URL y la pego en el recuadro de Dirección web (URL) de la Página nueva (anterior imagen).

Copiar URL

Ahora visualizo el blog y veo que se ha añadido una nueva pestaña dentro del menú horizontal con el nombre Photoshop. Al hacer clic sobre él se abrirá una página con las entradas etiquetadas con el nombre de Photoshop.

Creando segunda página menú

Me queda completar el menú horizontal para la temática Blogger y encontrar la forma de mejorar su aspecto, y si es posible, eliminar el texto Mostrando entradas con la etiqueta "X". Mostrar todas las entradas.


4 comentarios:

  1. hola, gracias por el tutorial. Tengo una pregunta, si creo la página con enlace externo el menú no mantiene seleccionado el botón de la página actual. Con las páginas creadas directamente con el gadget sí que lo hace. ¿Cómo podría solucionarlo? gracias y saludos

    ResponderEliminar
    Respuestas
    1. Hola. Muchas gracias por su interés y comentarios.

      Respecto a su consulta, entiendo que el problema le surge en las páginas creadas a partir de +Añadir enlace externo, dentro de la configuración del Gadget de Páginas de Blogger.
      Usted comenta que el menú no mantiene seleccionado el botón de la página actual. ¿Se refiere con esto a que cuando se hace clic en la página con el enlace externo no queda resaltada en la barra del menú? ¿Ha aplicado algún formato específico a la barra del menú?

      En mi caso particular se me presentó el problema con la pestaña Inicio que me aparecía siempre resaltada en fondo blanco y mi interés era mostrarla con el mismo formato que el resto de las pestañas. Por el contrario, con el resto de pestañas no me sucedía esto. Parece un caso parecido al que usted comenta. Este tema lo trato en la entrada “Personalizar pestaña seleccionada del menú páginas de un blog”
      https://prodpersonal.blogspot.com.es/2016/06/personalizar-pestana-seleccionada-del.html

      Hay la posibilidad de aplicar un estilo individual a cada una de las pestañas del menú, puede consultar la entrada “Dar estilo individual a las pestañas del menú en Blogger”
      https://prodpersonal.blogspot.com.es/2016/12/dar-estilo-individual-las-pestanas-del.html

      Espero que le haya podido resulta de ayuda. En caso contrario no dude en dejar su consulta y trataré de ayudarle en todo lo que pueda. En este caso por favor si es tan amable necesitaría algún dato más del problema.

      Muchas gracias.

      Un saludo.

      Eliminar
  2. Muchísimas gracias por contestar tan rápido, es muy amable. Voy a probar lo que me dice. un saludo

    ResponderEliminar
    Respuestas
    1. Muchas gracias a usted por su atención. Espero que logre solucionar el problema. No dude en consultar cualquier incidencia o duda.
      Un saludo.

      Eliminar