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>Elimínalo y en su lugar pega esto:
<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>
<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:
Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:
Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:
.menu-etiquetas {Ahí puedes cambiar los colores donde se indica.
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}
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.
No hay comentarios:
Publicar un comentario