Cómo crear un menú horizontal sencillo para Blogger

El menú de tu blogs es un elemento que te permite ayudar a tus usuarios enseñándoles el camino a las secciones, páginas o artículos más importantes del blog. Lo más habitual es que el menú sea horizontal y colocarlo bajo de la cabecera, de forma que aparecerá una hilera de botones, pestañas o rectángulos. Ya se han escrito muchos artículos sobre cómo crear un menú horizontal para Blogger. Así que haciendo referencia a publicaciones anteriores he elaborado una guía sobre los menús horizontales en Blogger que no son desplegables. En la selección que he preparado tienes menús sencillos, pero también otros que tienen algo especial: una línea deslizante que te sigue, gradientes de colores con CSS3, movimientos o el efecto 3D, para que parezca un botón con profundidad.

1. Menús básicos para principiantes.

Si eres principiante y no has creado nunca un menú con Blogger, lo primero que te aconsejo es que veas el siguiente vídeotutorial de Isabel. En el vídeo te explica las tres cosas básicas que necesitas para crear tu primer menú en Blogger.

• Crear un menú desde la página de Diseño, añadiendo un Gadget.
• Crear una pestaña nueva del menú creando una página nueva.
• Crear una pestaña nueva del menú, creando un enlace a un grupo de posts (todos los que tengan la misma etiqueta) o hacia una página Web diferente (por ejemplo una tienda online).

El problema que tiene el método para principiantes que hemos visto en el vídeo de Isabel es que está limitado a hacer menús con el aspecto que aporta Blogger "de serie". Si queremos por ejemplo, hacer que cada uno de los botones del menú tenga un color diferente, no lo podremos hacer así. Por eso vamos a seguir con otros cuatro ejemplos más elaborados sobre cómo crear un menú horizontal minimalista en Blogger.

2. Menú con colores para el blog.

La siguiente forma de crear el menú es una variación de la anterior. Seguimos usando gadgets, pero está vez el menú lo añadimos nosotros para así poderlo personalizar. Por ejemplo, podemos pegar el código HTML que he encontrado en HogarBlogger para un menú de colores.

• Vamos igual a la ventana de Diseño de Blogger.
• Se crea gadget HTML/Javascript.
• Dentro de este gadget se pega el siguiente código HTML.

<div style="text-align: center;">
<span style='-moz-border-radius: 5px; background-color:#f781f3; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 1</a></span>
<span style='-moz-border-radius: 5px; background-color:#58acfa; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 2</a></span>
<span style='-moz-border-radius: 5px; background-color:#81f79f; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 3</a></span>
 <span style='-moz-border-radius: 5px; background-color:#f78181; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 4</a></span>
<span style='-moz-border-radius: 5px; background-color:#f2f5a9; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 5</a></span>
<br /><br /></div>

Enlace 1 Enlace 2 Enlace 3 Enlace 4 Enlace 5

Ya está. Quedaría como ves arriba y se puede personalizar cambiando el código.

• Para cambiar los colores: Hay que modificar los valores que he marcado en negro.
• Para cambiar los colores por un degradado. Podemos obtener el código del degradado en Colorzila.
• Para añadir otro botón. Copia y pega todo lo que hay entre <span> y </span>.
• Para modificar el tamaño. Tienes que cambiar los números que van detrás de padding: así darás más o menos margen a cada uno de los enlaces. Esto puede ser necesario si tienes palabras más largas que otras dentro de cada botón.

La ventaja de este menú es que es muy fácil de insertar, la desventaja que es que el código usado está anticuado. Para que esté actualizado a las versiones HTML5 y CSS3, las propiedades de diseño como background-color y padding no deben estar dentro del gadget sino en la plantilla. Y eso es lo que vamos a ver en el siguiente ejemplo.

3. Menú en horizontal con efecto 3D y gradientes.

La tercera forma de crear un menú horizontal en Blogger es hacerlo directamente desde la plantilla, es la opción más avanzada y la que se usa en este menú 3D publicado en Terreno Blogger y todos los que vienen a continuación. Si no estás seguro, por precaución haz una copia de seguridad de la plantilla antes de modificarla.

He elegido este menú publicado en Terreno Blogger por tres motivos. El primero es que en el artículo de Diego Andrés se ve muy claro que hemos separado los códigos CSS y HTML. El segundo es que el post es didáctico, da indicaciones claras de como insertar el menú en la plantilla y tienes algunas indicaciones sobre que está haciendo cada línea de código. El tercero motivo es que el menú tiene los efectos más habituales:

• Degradado de color.
• Un efecto 3D creado con sombras
• Una animación al pasar el ratón por encima del botón.

4. Menú horizontal animado.

El siguiente menú horizontal para blogs personales o profesionales que os recomiendo es el que ha publicado Victor Calderón en su blog ayuda-blggers.info. Es un menú animado con botones rectangulares y que además de llevar el enlace del botón también tiene una pequeña descripción abajo. ¿En que consiste la animación? Al pasar el ratón por encima los botones se iluminan (cambian de color) y crecen hacia uno de los lados.

Para ponerlo en tu blog no necesitas saber nada, porque Victor te explica paso a paso lo que tienes que hacer para modificar la plantilla: añadir un código HTML y algunas indicaciones de CSS. Del código CSS la animación se consigue al añadir la pseudoclasse hover, con esta propiedad se consigue que se activen nuevos estilos cuando te acercas a un enlace. Otra cosa  muy interesante del menú es que cada una de las pestañas que se añade lleva un identificador individual del CSS, de forma que puedes realizar modificaciones diferentes a cada uno de ellos, si por ejemplo quieres que se iluminen con un color diferente.

5. Menú horizontal con cuadro deslizante.

Otro efecto que se puede conseguir usando hover con otras propiedades de CSS3 es que los botones estén fijos y que algo se deslice dentro del menú siguiendo tu cursor. La idea es de Oloblogger y lo tienes perfectamente explicado en este artículo de su blog, en el que desarrolla tres menús diferentes con el mismo efecto: uno con una barrita horizontal que subraya la palabra del menú en la que estamos, otra que actúa como un rectángulo semitransparente que se sobrepone y la última en la que sólo tenemos un marco que desliza de un botón a otro, marcando en el que estamos colocando el cursor.

Estas son algunas ideas de como puedes crear un menú horizontal atractivo y sencillo sin añadir categorías desplegables, pero hay muchas más. Para que te hagas una idea de todo lo que se puede conseguir con CSS puedes echar un vistazo a esta colección de 120 menús. Espero te haya resultado útil. Ahora es tu turno de comentar el post, compartirlo en las redes sociales y dejar tus aportaciones para ampliar la lista. ¿Conoces otros menús horizontales para Blogger que no sean desplegables y  que puedan ser interesantes? ¿Has creado alguno y quieres compartirlo?

PD: Para aquellos que tenéis dudas sobre la personalización de los enlaces he escrito otro artículo.