Gadget de etiquetas en forma de menú vertical desplegable para Blogger.

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:

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

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!