Widget de etiquetas como menú desplegable

Este es un truco muy útil cuando tienes listados de etiquetas largos. Lo encontré en Ciudad Blogger un sitio excelente que les recomiendo utilizar.

En mis blogs de arte coloco siempre etiquetas con el nombre del artista para que el público pueda encontrarlos rápidamente. Lamentablemente cuando se acumulas cientos de los mismos la lista supera el largo recomendable de la Sidebar y queda antiestético. Para solucionar ésto lo mejor es el menú desplegable de etiqueta y la implementacion de Ciudad Blogger funciona de maravillas. A mi gusto simplemente hay que borra dos partes del código para que queden como lo requieren mis necesidades.

Les transcribo el post, pero también pueden ir al sitio original siguiendo este enlace :

 http://ciudadblogger.com/2011/04/gadget-de-etiquetas-en-forma-de-menu.html

***

Ya que seguimos con el tema de ahorrar espacio en el blog veamos cómo podemos mostrar las etiquetas en forma de menú desplegable, esto será para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.

Cuando usamos el gadget de etiquetas éstas se muestran en forma de lista ordenada:

Lo que haremos será que se muestren de esta forma:



Selecciona una categoría - - - - - - - - - - Cuadros Círculos Hexágonos Rectángulos Trapecios Triángulos


Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

Elimínalo y en su lugar pega esto:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.

También puedes darle un poco de color para que se vea más o menos de esta forma:



Selecciona una categoría - - - - - - - - - - Cuadros Círculos Hexágonos Rectángulos Trapecios Triángulos
Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}

Ahí puedes cambiar los colores donde se indica.
No está de más decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el código y no lo encuentra.

***

En mi caso particular  debí eliminar el número de ítems de cada etiqueta pues no era útil y no se puede modificar por medio del procedimiento normal, así que si tampoco lo quieres debes borra la línea

<span dir='ltr'>(<data:label.count/>)</span>

Si quieres que no tenga un espacio luego del título debes borra la sentencia

<br/>

Por último y si quieres que quede centrado en la sidebar, simplemente colocale


<center> al inicio y </center> al final del código. Funciona bien.