Agregar etiquetas desplegables en Blogger fácil

¿Ya agregaste el gadget de etiquetas en tu blog? Seguro que sí y te ha quedado muy guapo, pero nosotros los usuarios de Blogger con el tiempo nos topamos con un pequeño inconveniente, pues resulta que mientras mas entradas tenemos, la lista de etiquetas va creciendo y este gadget se vuelve tan largo que dificultad la visibilidad de nuestra sidebar (barra de gadgets) para el lector y en cierto modo también afecta a el tiempo de carga de nuestro querido blog.

Como una solución -temporal- podrías seleccionar algunas etiquetas para mostrar, las más relevantes, ¿pero y las demás? obviamente no queremos que el visitante se pierda el conocer todo nuestro contenido, así que propongo en este post modificar el gadget de etiquetas al puro estilo de WordPress; en forma de menú desplegable y que muestre el total de entradas por etiquetas.

El resultado de la optimización se muestra en la siguiente imagen, con el antes y el después.
Etiquetas desplegables para Blogger
Etiquetas estilo desplegable

¿Quieres implementarlo? Es muy fácil, sin más preámbulos veamos los pasos a seguir. No olvides hacer una copia de seguridad de tu plantilla previamente.

Etiquetas desplegables en Blogger

Paso 1.- Ve al panel de diseño y agrega el gadget de etiquetas si aún no lo has hecho.

Etiquetas para Blogger

Paso 2.- Hecho lo anterior dirígete al menú de Plantilla > Editar HTML. Pulsa la combinación de teclas Ctrl+F para buscar en el editor la palabra Etiquetas. Ojo que si le has cambiado el nombre a este gadget debes buscarlo por el que le has asignado.

Paso 3.- ¿La has encontrado? Perfecto, observa que se encuentra en la siguiente línea de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

Es probable que el ID Label1 lo tengas como Label2, Label3...dependiendo de la cantidad de gadgets que tengas. También el título (title) "Etiquetas" con otro nombre, si lo has cambiado como bien lo mencioné en el paso 2.

Código del gadget Etiquetas
Código del gadget Etiquetas

Simplemente selecciona toda esa línea que corresponde al gadget de etiquetas y bórrala (no la expandas). En su lugar pega el siguiente código:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Elige una etiqueta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Nota.- Cambia el Label1 por el número de label de tu gadget, opcionalmente puedes cambiar también la frase "Elige una etiqueta" por la que gustes.

¡Eso es todo! Antes de guardar los cambios, haz una vista previa y si todo está correcto ya tendrás tu gadget de etiquetas desplegable más ordenado y limpio visualmente hablando.

Como un demo te invito a ver el mio, está en la barra lateral y si te gustó no dudes en colocarlo de esta manera en tu blog, que sin duda será favorable en todo sentido tanto para ti como para tus visitas ;-)

16 Comentarios en "Agregar etiquetas desplegables en Blogger fácil"

  1. Muchas gracias, funciona perfectamente.

    ResponderBorrar
    Respuestas
    1. Muchas gracias a ti Juan por comentar, qué bueno saber que las etiquetas te hayan funcionado a la perfección =)

      ¡Saludos!

      Borrar
  2. Muy bueno :o me gustó tu blog, lo visitaré más seguido.
    Saludos!

    ResponderBorrar
    Respuestas
    1. ¡Gracias Camilo! Crack, también te sigo a ti y a tu blog desde ForoBeta =)
      Por cierto, lo he añadido al blogroll de Blogs de Ayuda.

      Saludo de vuelta colega!

      Borrar
  3. Buenas, brutal los menús de etiquetas desplegables. Como podria cambiar los colores del menu y letras?, saludos y gracias.

    ResponderBorrar
    Respuestas
    1. ¡Muchas gracias Sergio! Para cambiar los colores del menú y las letras (fuente) sigue la siguiente ruta: Plantilla > Personalizar > Opciones avanzadas... y allí encontrarás los ajustes para realizar los cambios en tu blog.

      Saludos y gracias a ti por el comentario.

      Borrar
  4. Hola Marcelo,
    Fantástico el tutorial, andaba yo buscando un desplegable como el que nos enseñas y me he topado contigo. Ya lo he puesto pero me queda al final abierto, no como el tuyo con la flecha. ¿Me puedes indicar como cerrarlo? Te paso el link para que si puedes te pases a verlo.
    http://oasisingular.blogspot.com.es/



    Grácias !!!

    ResponderBorrar
    Respuestas
    1. Hola Mar Celis, muchas gracias =)

      Este estilo de menú se adapta automáticamente al ancho de las etiquetas, veo que en tu blog tienes algunas etiquetas muy largas como 'Celebraciones y fiestas/Celebrations & parties' por ejemplo, entonces eso provoca que el menú también se haga ancho.

      Para solucionarlo, lo que se me ocurre que puedes hacer, es cambiar el nombre de todas las etiquetas largas, si decides hacerlo sigue con cuidado los pasos de este gran tutorial: http://goo.gl/hBRsUj

      Espero que lo soluciones, saludos.

      Borrar
  5. A ti por el comentario, te ha quedado de lujo, éxitos con tu blog :)

    ResponderBorrar
  6. ¡Hola!

    Ha sido genial, muy fácil de hacer gracias a la explicación tan sencilla.

    Lo que sí quisiera saber es si me podrías explicar cómo cambiarle el tamaño para que se adapte a mi sidebar (250px) ya que no veo numeración como para cambiarla y no me gusta que se salga de la línea.

    Gracias de antemano ^^
    Saludos.

    ResponderBorrar
    Respuestas
    1. ¡Hola Paola!

      En realidad esta modificación del gadget se adapta al tamaño de cualquier sidebar, quizás tengas etiquetas con nombres un tantito largas y por eso se salen de la línea. Fíjate por favor en el comentario de Mar Celis, tal vez sea tu caso: http://goo.gl/bgPuUp

      Por cierto, ¿cuál es tu blog?

      Saludos.

      Borrar
    2. ¡Hola, Marcelo!

      Gracias por la contestación. Estoy al tanto de lo que me dices y revisaré a ver cuál es el error, a ver si consigo que me salga algo más ajustado. ^^

      Te dejo el blog: "El Rapto de los Sentidos"

      http://neftis2o.blogspot.com.es/

      Un saludo.

      Borrar
  7. Os cuento lo que me ha pasado a mi por si le pasa a alguien, me daba un error, yo copiaba el código html que dais y lo sustituía por el otro, eso estaba bien, y el error que me daba era porque al pegar me sustituía esta comilla ' por otra diferente arqueada, he tenido que sustituir todas y poner las correctas, es decir estas ' y así ya quedaba todo bien, un error muy tonto, pero os lo cuento por si os pasa a alguno, luego ya salía todo perfecto.

    ResponderBorrar
    Respuestas
    1. Muchas gracias por el dato :) He actualizado la manera en que se mostraba ese código, ahora todo debería pegarse en la plantilla tal cual es.

      ¡Saludos!

      Borrar
  8. tengo una pregunta porque en mi blog cuando hago algún cambio por ejemplo poner las "etiquetas" cuando estoy en la vista previa desde el editor de plantilla me aparece que se ha cambiado pero cuando entro a mi blog no aparecen los cambios :/ espero me puedas ayudar amigo.

    ResponderBorrar
  9. Gracias amigo pero solo quisiera saber como le cambio el tamaño ? hacerlo un poco mas grande

    ResponderBorrar

¿Comentarios? ¿Dudas? Estaré encantado de responderte (a veces demoro) ツ