Aprende a crear un Menú sencillo con Blogger, organiza tus contenidos con unos fáciles pasos sin necesidad de saber programar

La creación de una buena estructura de distribución de contenidos es vital a la hora de construir un blog. Una buena estructura jerárquica nos ayudará a que el usuario no se "pierda" navegando por nuestras páginas en busca de información.

La visión inicial que un blog presente en su página principal, debe permitir al usuario ser capaz de moverse por los contenidos de la manera más intuitiva y cómoda posible. Conseguir esto es primordial, pues no sólo unos buenos contenidos o una bonita presentación bastan para que el usuario se interese por lo que queremos transmitirle. Veamos cómo realizar esta organización en un menú de un sólo nivel, explicándolo paso a paso, un pequeño "Brico-Blog".




NOTA: Si no tienes ninguna experiencia en informática o programación, haz clic en el enlace para la guía paso a paso: "el más fácil todavía" para poner un menú en Blogger.

La forma de conseguir que se sienta "atraído" es, por supuesto unos buenos contenidos claros y concisos que sean de su interés, así como una presentación inspirada en dichos contenidos que sea agradable a la vista y acompañe el conjunto pero nada de todo esto sirve, si después no tenemos organizada y estructurada la información de manera que se sienta totalmente cómodo para navegar por ella sin problemas.

Imagina por un momento que entras en un nuevo centro comercial que has visto al pasar por la calle, y que al entrar resulta que no sabes dónde están los artículos que buscas... te fijas en carteles que te indiquen por dónde dirigirte a la sección que te interesa  para obtenerlos. Gracias a que está todo organizado y estructurado con la información necesaria para encontrar lo que buscas, llegas a localizar justamente aquello que buscabas en ese centro comercial. Con la organización de la información sucede lo mismo, si el usuario entra en el blog, lee nuestra entrada y luego quiere profundizar más en la información o desea buscar otras entradas nuestras, va a necesitar que le demos todas las facilidades para dirigirle a donde él quiera ir.

Para ello necesitamos estructurar correctamente la información de nuestro blog. Hay autores de esta clase de páginas web que prefieren gestionar la información en forma de listas de enlaces, otros prefieren aprovechar el histórico de entradas agrupados por mes, algunos deciden crear menús y otros agrupaciones jerárquicas con páginas.

En este caso, me propongo ayudarte a crear un menú de un sólo nivel. Es decir, un menú que te ayude a agrupar en conceptos los contenidos de tu blog. Es visualmente útil porque si quieres que el usuario decida qué clase de contenido ofreces, le presentas las palabras que le dan acceso al mismo de una forma clara. También es organizativamente eficiente pues te va a permitir agrupar tus entradas automáticamente cuando las elabores, sin necesidad de luego realizar ningún proceso manual, utilizando la potencia de las etiquetas (explicada anteriormente aquí).

NOTA IMPORTANTE: Realiza una copia de seguridad de tu blog antes de realizar los cambios. No me responsabilizo de los errores derivados de un incorrecto uso de las instrucciones proporcionadas.

La adición de un menú en blogger, puede llegar a realizarse de diversas maneras, algunas pueden resultar ineficientes o hacernos realizar un trabajo inútil para el mantenimiento del mismo. Voy a planteraros un menú sencillísimo que os permite agrupar vuestros contenidos en conceptos:

1) Dirígete en Blogger a la pantalla principal y en el menú izquierdo de opciones pulsa en "Diseño"

2) Se mostrará el diseño que has decidido crear para tu Blogger. A continuación pulsa dentro del escritorio de diseño "Añadir un Gadget", tratándose de un menú te recomiendo que utilices la opción de Añadir Gadget que según el diseño de tu blogger mejor quede para dejar el menú en la parte superior, a la derecha o a la izquierda. Selecciona el Gadget de Google "HTM/Javascript".

3) Cuando se abra el cuadro de configuración del gadget "HTML/Javascript" verás una pantalla como la que te muestro en la pantalla inferior, con una caja de texto para poner "Título" y otra caja más grande donde insertar código Javascript.

4) Añade en la caja de texto que tendrá el código Javascript el código que te explico a continuación (copia y pega este texto o el del ejemplo, procura que no haya retornos de carro que dividan en partes incorrectas el código):

<ul id="menu">
<li><a class="selected" href="http://Direccion_de_tu_blog">Inicio</a></li>
<li><a href="Direccion_blog/search/label/concepto_agrupador">Opción_de_ Menu</a></li>
</ul>

• Dentro de la etiqueta "<ul>" hasta "<ul>" metemos las opciones de menú que vamos a tener.
• La opción "Selected" es la principal, en mi caso, es donde presento las entradas del blog según las voy creando.
• Cuando pulsen en "Selected" se carga automáticamente en el marco principal, todas las entradas que tenemos en el blog (como siempre, como podéis ver en mi propio blog al acceder). Por ello en "href" introducimos la URL de nuestro propio blog.
• Después creamos un "a href" por cada opción de menú que deseamos crear. En cada un de los a href se pondrá la dirección de nuestro blog seguido de "/search" seguido de "/label" y seguido del "concepto agrupador" de entradas de nuestro blog por el que queremos que cuando el usuario pulse la opción, se busquen en el blog aquellos contenidos que pertenecen a dicho concepto agrupador.

Por ejemplo quedaría algo así con el menú de un hipotético blog con una estructura parecida a la mía:

<ul id="menu">
<li><a class="selected" href="http://Ejemplo.blogspot.com">Inicio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/tecnologia">Tecnología</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/ocio">Ocio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/opinion">Opinión</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/consumo">Consumo</a></li>
</ul>

•  En el ejemplo, se llama a la página principal del blog que dibujará todas las entradas en el orden que las vamos creando como siempre.
• Luego se presenta cada opción de menú con su concepto agrupador de entradas que el usuario no verá. Así, cuando el usuario haga "clic" sobre "Tecnología" por ejemplo, estará haciendo una búsqueda que agrupa todas aquellas entradas que contengan la etiqueta "tecnología" en su interior. Así mismo sucedería con las sucesivas opciones de menú.
• El resultado del ejemplo es el que puedes ver en mi menú (pero en cada blog se creará con la hoja de estilos que cada uno haya decidido utilizar en su plantilla) 

• Dependiendo de vuestra hoja de estilos, que va en función de la plantilla Blogger que utilizasteis, el menú tendrá la apariencia adecuada a vuestro blog. A parte de horizontalmente, dependiendo de dónde y cómo coloques el "Gadget  HTML/Javascript", se puede crear verticalmente (y donde quieras arriba, abajo a izquierda o derecha).

 En este paso ya tendrás creado el meú, pero sin que sea interactivo totalmente, dado que ahora tenemos que crear las etiquetas en las entradas, basándonos en el ejemplo anterior, que nos permitan agrupar bajo el concepto "Tecnología" todas las entradas en las que metamos la etiqueta (label) "tecnologia", en "Ocio" todas las entradas en las que metamos la etiqueta "ocio" y así sucesivamente.

5) Un paso tan importante como la adición del javascript. En cada entrada deberás añadir como etiqueta la palabra que pongas a continuación de "label". En el ejemplo sería "tecnologia, ocio, opinion, consumo" (porque incio es la principal y ahí no se utilizan etiquetas). En la imagen inferior te he recuadrado con unas líneas negras dónde deberás añadir la etiqueta que se convierta en tu concepto agrupador de páginas bajo la opción de menú.

La adición de etiquetas como te expliqué aquí es útil no sólo por el ejemplo que ahora te estoy dando para hacer con ellas un menú, sino también porque le permiten al buscador no tener que "leer" toda tu entrada para presentar el resultado después en pantalla, es decir, la etiqueta le dice al buscador directamente de lo que trata tu entrada sin leerla.

De esta manera, una vez hayas ido rellenando la zona de etiquetas que te mostré en el paso "5)" de cada entrada que tengas, conseguirás que quede la información bien estructurada en un menú que agrupa los conceptos en base a las etiquetas.

6) Si quieres que no salga el mensaje "Mostrando entradas con la etiqueta Etiqueta. Mostrar todas las entradas" cada vez que el usuario accede a una opción de menú, haz lo siguiente:

6.1 Busca en la plantilla pulsando CONTROL + F en la vista de EDICIÓN HTML de la plantilla el código: 

<b:include data='top' name='status-message'/>

6.2 Elimina la citada línea de código. Con esto desaparecerá el mensaje de aviso del Blog si lo deseas.

NOTA: Si no tienes ninguna experiencia en informática o programación, haz clic en el enlace para la guía paso a paso: "el más fácil todavía" para poner un menú en Blogger.

Ya sabes, cualquier duda , como siempre pregunta. Espero que te sea útil.