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 comments:
Post a Comment