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 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.

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

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 que está en rojo por el número de label de tu gadget, opcionalmente puedes cambiar también la frase "Elige una etiqueta" por lo que gustes.

¡Eso es todo! Antes de guardar los cambios, haz una vista previa y si todo está correcto ya tendrás tugadget 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 ;-)