.

27 de octubre de 2013

Cómo crear un menú horizontal sencillo para Blogger

Escrito por
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>



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.

16 comentarios:

  1. Hola Joan, soy kader de http://konkdkader.blogspot.com , me han dicho que mi blog es un poco lento al inicio. ¿qué tengo que hacer para resolver este problema? ¿hay que quitar algún gadget que sobra o molesta?
    Ah, me gusta mucho lo que postea por aqui.
    saludos

    ResponderEliminar
    Respuestas
    1. Kader, puedes usar esta herramienta para ver que es lo que está haciendo que cargue más lento el blog. http://developers.google.com/speed/pagespeed/insights/
      Es posible que sea la imagen que tienes arriba en la cabecera, si es por imágenes tienes que bajarlas de peso, hacer que no sean archivos tan grandes.

      Eliminar
  2. Menudo follón de información de links y posts que tienes en tu blog. ¿Quieres que alguien pille tus "tutoriales"?
    Saludos.

    ResponderEliminar
    Respuestas
    1. Claudia, gracias por tu opinión, miraré lo que puedo mejorar. Los enlaces a los blogs es lo lógico cuando son otros los que han desarrollado los menús y lo único que he hecho ha sido recopilar al información. Un saludo.

      Eliminar
  3. Muy interesant, voy a ver si alguno me queda bien en mi blog por cierto les dejo el link

    https://www.internetcompartida.blogspot.com !! Lo hize ayer y ya esta bastante lindo c:

    ResponderEliminar
  4. Muy interesante , he hecho el modelo menú del paso 2. Me puedes decir, ¿ Cómo añado mis entradas a cada menú?. Gracias.

    ResponderEliminar
    Respuestas
    1. Lo que tienes que hacer es incluir el link que vaya hacia tus entradas. En el modelo 2, tienes que poner el link en este código.

      Enlace 1

      Por ejemplo si quisiera enlazar a la etiqueta "Programación" de mi blog tengo que poner en el enlace este código. http://www.blogeninternet.com/search/label/Programaci%C3%B3n

      Y quedaría así.

      Programación

      Eliminar
    2. El código lo ha interpretado directamente, así que como hoy voy a escribir un artículo lo haré sobre como personalizar los enlaces de los menús. A las 20:02 sale el post.

      Eliminar
  5. Hola Joan, buen blog. Pero tengo una duda. Lo que pasa es que quiero agregar una botonera horizontal, pero con botones con diseño propio... Sabes cómo se hace?

    ResponderEliminar
    Respuestas
    1. Se hace como todos los menús, usando etiquetas de listas desordenadas, pero en vez de escribir un texto tiene que insertar una imagen con un enlace. Previamente las imágenes las tienes que subir a "Internet", en tu propio hosting o en otro servicio gratis.

      Eliminar
  6. Hola buenas! enhorabuena y gracias por el post. No controlo mucho sobre el mundo HTML y CSS. He conseguido poner los botones personalizados, pero ahora me gustaría el efecto de cambiar de color/imagen el botón de la pagina seleccionada. Podrías indicarme que código utilizar? y si tengo que diseñar/hacer los botones que quiero que cambien? la imágenes las subo a photobucket, que te parece?

    Muchas gracias por adelantado. http://poparti.blogspot.com.es/
    :)Rbén Delgado

    ResponderEliminar
    Respuestas
    1. Ruben, se hacer lo que dices para páginas estáticas (que sólo usan HTML y CSS), pero para Blogger es un poco más complejo, creo que hay que usar javascript y ahí me pierdo. La verdad es que es interesante lo que dices, si aprendo a hacerlo lo publico. Si observas los menús más dinámicos que están propuestos en este artículo lo que hacen es usar una "propiedad" del CSS que se llama hover. Lo que necesitas es un poco mas complejo. La imagen del botón la puedes subir a cualquier sitio de Internet, para que puedas enlazarla.

      Eliminar
  7. tengo un problema,al hacer click en cada entrada salta la pagina,yo quiero que solo cambie en el reproductor,me puedes ayudar y gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola, no entiendo lo que me estás diciendo. ¿Te refieres a algún menú horizontal? Intenta explicarte un poco mejor y lo miramos.

      Eliminar
  8. si,me refiero al menu horizontal,al hacer click en el ,me salta la pagina y yo quiero que solo cambie en el reproductor.gracias

    ResponderEliminar
    Respuestas
    1. No estoy seguro de que quieres decir con el reproductor, creo que te refieres a que el enlace se abre en una página diferente.Si se trata de eso se soluciona añadiendo al enlace el atributo target.
      Aquí tienes un sitio Web donde te explica la teoria. http://html.hazunaweb.com/113.php
      Si me confirmas que es eso, que quieres que se abra en una misma ventana o en otra ventana, en cuanto tenga un rato escribo un artículo explicandolo en detalle.
      Si dejas la URL del blog es otra forma fácil de que vea lo que te pasa. Un saludo.

      Eliminar

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.