12/2/17

ABL | Diseño&Tutoriales: Menú por categorías


¡Hola a todos, buscadores de lápices!

Con la época de exámenes y festividades habíamos dejado de lado esta sección. Sin embargo, aquí está de nuevo Ayuda al Bloguero literario con una entrada dedicada al diseño y a los tutoriales. Hoy os voy a enseñar a crear un menú por categorías en vuestro blog.

La verdad es que no pensaba dedicar la próxima entrada de esta sección al apartado de diseño, pero muchos de vosotros me habéis consultado por este tipo de menú en varias ocasiones. Así que he decidido traeros este tutorial para que que podáis incluirlo en vuestro blog vosotros mismos –y darle vuestro toque personal❤–. Veréis que es muy sencillo y no os llevará mucho tiempo.

Lo primero que quiero aclararos es que este menú por categorías no tiene nada que ver con el menú superior que solemos encontrar por los blogs. Aquí abajo os dejo una imagen para que tengáis claro qué menú conseguiremos con este tutorial. Los dos ejemplos pertenecen a este mismo blog.


El menú por categorías se diferencia del menú por pestañas, además de por su aspecto, por su configuración. Ya que, básicamente, lo que vamos a hacer es modificar el estilo predeterminado del widget de Etiquetas para obtener este de la imagen derecha. Por tanto, no vamos a poder insertar enlaces, sino que bastará con seleccionar qué etiquetas (que previamente hemos asignado a unas entradas determinadas) queremos que muestre este menú, pudiéndose modificar esta disposición en cualquier momento.

PASOS
Aspectos a tener en cuenta antes de crear el widget...

Vais a ver que el proceso es muy, muy sencillo. Así que, antes de que nos pongamos manos a la obra con el código, voy a hablar un poco sobre cómo funcionan las etiquetas para que, si no estáis familiarizadas con ellas, no tengáis problemas al crear este menú.

En resumidas cuentas, las etiquetas son una forma excelente de clasificar las entradas (pero no las páginas) que vayamos publicando en nuestro blog. Un ejemplo habitual de los blogueros literarios es que las dividan según la sección a la que pertenecen: reseñas literarias, autores, booktags, desafíos de lectura, iniciativas... Para ello solo es necesario introducir el término que corresponda a ese sistema de clasificación dentro del apartado "Etiquetas" de la barra lateral del editor de texto de las entradas. Podéis verlo en la imagen de abajo:


De esta forma podremos agrupar las entradas que pertenezcan a una misma categoría, una entrada puede tener múltiples etiquetas y, por tanto, ser parte de varios sistemas de clasificación. Por ejemplo, las etiquetas de una reseña pueden ser "Reseña" y "Romance", si el libro sobre el que se habla pertenece a este género. De esta forma tendríamos dos grupos: el de "reseñas" y el de libros de "romance". Esto nos permitirá crear diferentes tipos de menú de categorías, según nuestras necesidades:

  • – Un menú de secciones del blog: Reseñas literarias, Booktags, Novedades o Autores.
  • – Un menú de reseñas de libros ordenadas según: el título, el autor o la puntuación.
  • – Un menú de libros según géneros: Romance, Fantasía, Ciencia Ficción, Terror o Infantil.

Estos son algunos de los muchos ejemplos para los que nos puede ser de gran utilidad este tipo de menú que es muy fácil de modificar y resulta un buen apoyo para nuestros seguidores, al ser útil y muy visual.


Cómo crear el widget...

Como siempre, vamos al apartado de "Diseño", dentro del panel de control de Blogger. Una vez ahí, hacemos click sobre "Añadir un gadget" (aclaración: gadget = widget) en la barra lateral y escogemos el de "Etiquetas". Ahora configuraremos el gadget.

Es decir: Diseño → Agregar un gadget → Etiquetas.

Podemos cambiar el título del gadget según las categorías que incluirá (Secciones, Géneros o Reseñas, por ejemplo), escoger las etiquetas que queremos que aparezcan en él y, lo más importante, seleccionar la opción NUBE.

Una vez lo tengamos a nuestro gusto, guardamos y... ¡vamos a personalizarlo!


Cómo personalizar el widget...

El siguiente paso es ir a "Plantilla", de nuevo de vuelta al panel de control de Blogger, para después hacer click en "Personalizar", el cuadro de la izquierda de los dos que aparecen bajo la previsualización de nuestro blog. Al cargar la página, elegiremos la opción "Avanzado" y, tras bajar un poco, nos decidiremos por "Añadir CSS".

Es decir: Plantilla → Personalizar → Avanzado → Añadir CSS.



En este cuadro en blanco será donde pegaremos el siguiente código que le aportará el estilo que queramos a nuestro menú por categorías. Cada apartado que se deba modificar incluye una descripción, para que no nos perdamos (a no ser que tengas conocimientos previos sobre HTML, te aconsejo no alterar los valores que no incluyen aclaración).

RECOMIENDO: Este es el momento de investigar y probar diferentes estilos hasta encontrar el que nos guste. De modo que recomiendo que, a la hora de cambiar los números, escojáis valores de un par de números más o menos para que comprobéis el efecto (en el alto de los recuadros o la tipografía).

.cloud-label-widget-content {
text-align: center; /*Donde queréis que quede alineado el texto*/
float:center;
font: normal normal 14px Arial; /*Tipografía*/
text-transform: uppercase; /*Para que quede en mayúsculas, si no, borrad esta línea*/
}
.label-size a {
display: block;
margin: 2px 2px 0 0; /*Modificar el primero para la distancia entre los recuadros*/
padding: 5px; /*Alto de los recuadros*/
border: 2px solid #77c8e2; /*Si queréis borde, si no, borrad esta línea*/
color:#ffffff; /*Color del texto*/
background: #85d4ee;  /*Color de fondo*/
text-decoration:none; 
}
.label-size a:hover {
border: 2px solid #77c8e2; /*Borde al pasar por encima el ratón, si no queréis borde, borrar esta línea*/
color:#ffffff; /*Color del texto al pasar el ratón por encima*/
background: #77c8e2; /*Color del fondo al pasar el ratón por encima*/
text-decoration:none;
}

Si no queréis que el texto esté alineado en el centro (center), podéis ponerlo a la derecha (right) o a la izquierda (left). Y si preferís que el borde no sea sólido (solid), podéis jugar con uno de puntos (dotted) o uno de rayas (dashed).

Modificando estos elementos que os destaco en colores podréis lograr el estilo que queráis para adaptarlo al máximo a vuestro gusto y al diseño de vuestro blog. El código que os traigo genera este estilo (imagen derecha). 

Pero las posibilidades son tan amplias como vuestra imaginación. :)


Es importante que sepáis que, una vez terminado este proceso, podréis creer los menús por categorías que queráis. Sin embargo, todos ellos compartirán el mismo estilo. Es decir, es posible tener varios de estos gadgets pero solo un único estilo común.



¿Qué te ha parecido este tutorial? 
Puedes dejar en los comentarios cualquier duda que tengas.
O alguna sugerencia para la siguiente entrada. :)
¡Hasta la próxima!

16 comentarios:

  1. Muy útil, hace tiempo que estoy buscando opciones para el menú de secciones del blog pero casi ninguna me estaba convenciendo. Probaré a ver y quizá lo use.
    Muchas gracias por compartirlo.

    ResponderEliminar
  2. Ay, estas entradas tan útiles y generosas tuyas <3 Por ahora no tengo pensado hacer algo así en mi blog, pero si se me ocurriera, ya sé a dónde venir a buscar.
    Muchas gracias, explicás todo muy claro <3 Realmente se nota el esfuerzo que hacés.

    Un besito!

    ResponderEliminar
  3. Hola!
    Haz explicado super bien el tutorial, muchas gracias.
    Yo no tengo una clasificación por géneros en mis reseñas con las etiquetas pero esta idea me puede ayudar con una cosa que me esta rondando desde hace rato por la cabeza aunque todavía no estoy convencida.
    Besos

    ResponderEliminar
  4. ahhh este me lo apuntoq ue quiero hacer cambios y soi muy torpona

    ResponderEliminar
  5. Hola! Como siempre me vienen genial tutoriales así porque no tengo ni idea de estas cosas, jajaja. No descarto probarlo dentro de poco.
    Besos!

    ResponderEliminar
  6. Hola Alexandra!
    No te explico lo mucho que busqué un tutorial como este, siempre quise poner las etiquetas así pero nunca pude, hasta ahora, gracias a ti!
    Una sugerencia para un posible tutorial es como hacer que el sidebar se contraiga y se expanda (así como tenes el archivo, por ejemplo).
    MUCHÍSIMAS GRACIAS POR TODOS TUS TUTORIALES!!
    Saludos

    ResponderEliminar
  7. ¡Hola!

    Muchísimas gracias por este tutorial. Es un placer ver algo que ayuda tanto de forma tan directa y sencilla.

    Lo tendré en cuenta para una reorganización de mi blog.

    ¡Ahora mismo lo comparto en mis redes!

    ¡Un saludo! :)

    ResponderEliminar
  8. Hola guapa!

    Desde hace rato me apetece hacer un menu por categorias, muchas gracias. Probaré tu tutorial, haz explicado muy bien Alex, no me imaginaba que este menu fuera tan sencillo. Muchisimas gracias

    Besos

    ResponderEliminar
  9. Hola! muchas gracias por el tutorial...recién entiendo para que servían las "etiquetas" jeje!....Un besote y gracias otra vez!

    ResponderEliminar
  10. ¡Hola guapa!
    ¡Eres fantástica haciendo tutoriales!. Muchas gracias por la info.
    Besos.

    ResponderEliminar
  11. Gracias Alex, una entrada de mucha ayuda.

    ResponderEliminar
  12. Hola preciosa!!!
    Mil gracias por el tutorial, la verdad es que siempre quise intentar poner un menu de ese estilo asi que genial!!! No tenia idea de como hacerlo y tu explicacion es mas que clara :)
    Un besazo

    ResponderEliminar
  13. Gracias por el tutorial, hace ya un tiempo había visto cómo hacerlo. Creo que lo que realmente me gustaría saber es cómo contraer este menú en una sola categoría, es decir que el widget sea Géneros y las personas que pasen por el blog lo expandan para saber qué generos se pueden encontrar en el blog. ¡Te dejo un montón de besos! ⭐
    Ode | Sweet & Books

    ResponderEliminar
  14. ¡Hola guapa!
    como siempre estas entradas me dan la vida! jajaja
    me gustan muchisimo y siempre saco ideas nuevas para diseñar el blog! muchas gracias!!!
    besitos
    nos leemos!

    ResponderEliminar
  15. ¡Hola!
    Eso es lo que me gusta de tu blog, que no son sólo reseñas/sorteos y cosas así sino que también aportas y ayudas a los demás blogueros con tus iniciativas ^^

    ¡Gracias!

    ResponderEliminar
  16. ¡Hola!
    ¡Muchísimas gracias por vuestros comentarios! No sabéis la ilusión que me hacen y lo que me alegra que os sirvan estos tutoriales.❤❤❤
    Me apunto para la próxima el traeros uno para que veamos cómo podemos hacer que un gadget se contraiga o se expanda. :)
    ¡Un montón de besos! ¡Nos seguimos leyendo!

    ResponderEliminar