1/14/2012

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 :


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

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

5 comentarios:

  1. man muy bueno tu blogger
    tengo un blogger de peliculas y tengo un menu despplegable pero quisiera saber como creo una pagina de terror pero que no aparesca como nueva entrada que solamente cuando le de click al menu desplegable se abra la pagina este es mi blogger
    elblogdelaspelicula.blogspot.com
    te agradeceria mucho tu ayuda grasias

    ResponderEliminar
  2. Hola amigo de nuevo molestando veras ya días quiero instalar un menú de etiquetas como este, pero no logro ponerlo donde yo quiero si fueras tan amable de ayudarme prácticamente solo eso le falta a mi blog por eso no he empezado a hacer aportes hasta que este completo...

    este es mi blog de pruebas:

    www.zonacatrachahd.blogspot.com

    esta es mi plantilla estilo taringa:

    http://www.firedrive.com/file/78C0CEEC9ADF97D8

    quisiera posicionar-lo como esta en taringa al par de Últimos Posts.

    ResponderEliminar
  3. Nitro Sonic. Te recomiendo que primero pongas algunas etiquetas y más tarde veas que el menú funcione correctamente aunque se encuentre en un lugar de la página que no te agrada. Como se trata del widget de etiquetas o labels, es muy fácil de ubicar en la página en todas las zonas donde existe un contenedor de elementos HTML-javascript.
    Pero si no puedes ubicarlo en el mismo lugar de Taringa, deberás utilizar en tu navegador una herramienta de desarrollador web que te permita ver cual es el nombre del contenedor donde pretendes ubicar tu menú desplegable. Una vez que lo sepas, deberás entrar en el editor de blogger, buscar el elemento y copiar y pegar todo el código HTML del menú antes o después hasta ubicarlo correctamente.
    Espero que te sea de utilidad

    ResponderEliminar
    Respuestas
    1. No me sirve mucho esto pero gracias por la responder...

      Eliminar
  4. Primero añade el menú en cualquier parte y después vemos

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.