Gadget de etiquetas. Problemas y mejoras

Una vez que hemos dado una breve explicación sobre qué son y para qué sirven las etiquetas, veamos cómo funciona el código para poder solucionar algunos problemas comunes e incluso, introducir algunas variantes.

Este es el código del widget que crea Blogger para las Etiquetas y que tras su instalación en la barra lateral, aparece dentro de la SECCION de la referida sidebar. O sea, justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>, si no lo hemos movido de sitio tras crearlo. Se incluyen unas breves notas sobre lo que hace cada parte.

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul> <!-- Comienza la lista -->
<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li> <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <!-- Nombre etiqueta sin enlace -->
</span>
<b:else/> <!-- Resto de etiquetas con enlace ->
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>
</b:loop> <!-- Termina el bucle -->
</ul> <!-- Termina la lista -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Conociendo su funcionamiento, podemos arreglar algunos problemas y también incorporar algunos datos más:

* No deseo mostrar el título del artilugio: La primera opción sería editarlo desde Elementos de Página y dejarlo sin título, pero también se puede conservar para distinguir a simple vista unos gadgets de otros, borrando las tres líneas...

<b:if cond='data:title'> <!-- Muestra el título del gadget si existe -->
<h2><data:title/></h2>
</b:if>

* Los nombres de las etiquetas no enlazan a la correspondiente categoría: Falta la etiqueta <a... y la expresión que forma el enlace o la expresión está mal redactada:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <!-- Enlace a etiquetas -->
<data:label.name/> <!-- Nombre etiqueta con enlace -->
</a>

* No se muestra el número de post para cada categoría: Eso es porque en nuestro widget falta la etiqueta data que contiene la cantidad.

</b:if>
<span dir='ltr'>(<data:label.count/>)</span> <!-- En todos los casos se muestra el número de entradas de cada etiqueta -->
</li>

* Aunque esté viendo una categoría concreta, esa categoría permite enlazar: La estructura b:if -b:else -/b:if, para excluir la categoría visualizada no existe o está mal construida. En ese caso es suficiente con reconstruir el código con la muestra que hay al principio del post.

* Incorporar a los nombres de las etiquetas una marca de lista: En este caso, podemos incorporar una etiqueta STYLE a los elementos LI, bien con un símbolo o bien con una imagen diseñada por nosotros. En este último caso, conviene que sea una imagen pequeña, tipo favicon, más o menos formando un cuadrado de lado igual a los pixels de alto que tiene la letra que tengamos definida para la SIDEBAR.

<b:loop values='data:labels' var='label'><!-- Principio bucle para mostrar todas las etiquetas -->
<li style='list-style-type:circle;' > <!-- Elemento de la lista -->
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta

Circle, square o disc son los tipos que más se usan. Para una imagen, hay que usar 'list-style-image:url(DIRECCCION_IMAGEN);'

* Incorporar a los nombres de las etiquetas un icono para permitir la suscripción del feed de ese tema concreto: Hay que poner al principio de cada elemento de la lista, una expresión de enlace al feed de la categoría y la imagen del icono que será la que sirva de enlace al usuario.

<li> <!-- Elemento de la lista -->
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='URL_imagen'/></a>
<b:if cond='data:blog.url == data:label.url'> <!-- Si estamos viendo una etiqueta concreta, se muestra sin enlace -->

En el siguiente enlace, tienes una recopilación de iconos para feed. Una vez escogido el que te guste, tienes que cambiar su tamaño hasta dejarlo aproximadamente en 16x16 pixels. Luego lo alojas en tu servicio habitual, copias la dirección y la pones en su sitio.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter