Uno de los retos más importantes a los que me he tenido que enfrentar en este nuevo proyecto, es la configuración del Menú Etiquetas (Categorías) de un modo en el que me resulte sencillo el acceder a ellas. El objetivo de este blog, es primeramente, tener un punto de referencia a donde acudir para consultar todas aquellas cosas que he 'hecho' en el pasado, que me he pegado en su momento, y del que necesito tener acceso de un modo sencillo y práctico. El Widget que el Blogger te permite por defecto configurar las Etiquetas, es bastante limitado en cuanto a posibilidades. Únicamente las puedes listar o situar en una bonita forma de nube.
Al buscar en el HTML el código que genera el Blogger por defecto es una simple línea tal que :
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
Con poca flexibilidad para ser manipulada.
Navegando descubrí (Gracias al Escaparate de Rosa) Una forma de mostrar las Etiquetas en forma de menú desplegable, que consistía en modificar la simple línea HTML que genera Blogger
Por el siguiente código
<b:widget id='Label1' locked='false' title='Categorías' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Categorías</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
*Nota:- A tener en cuenta a la hora de utilizar este código modificar el valor 'Categorías' por el título que le hayamos dado a nuestro Gadget de Etiquetas.
Y el resultado visual sería algo parecido a :
Donde las etiquetas serían un pequeño Combo-Box desplegable y no se haría referencia al contenido de las mismas.
Pero yo no estaba buscando un Menú Desplegable, sino poder Desplegar los Contenidos de las Etiquetas en forma de Árbol de Directorio, para que me resultara más sencillo de localizar la entrada que necesitara en cada momento.
Con las mismas, encontré la solución en el Blog de Vagabundia Donde aparece una explicación bastante detallada del las Etiquetas Desplegables (O en SideBar). La síntesis, consistiría en que partiendo del código anterior del menú desplegable
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Categorías</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Se sustituiría el código en rojo, por el JavaScript que nos mostrará el listado desplegable de las Etiquetas.
OJO!! :- Para que funcione correctamente, es muy importante asegurarse que el parámetro del script
home_page = 'http://cyrisonlinux.blogspot.com/';
Haga referencia a la URL de nuestro blog.En la nota publicada por Vagabundia se explica además las diferentes formas de configurarlo y personalizarlo.
Saludos,
Cyris.
