Etiquetas con feed

Podemos colocar en nuestro blog un nuevo widget en la sidebar donde mostrar las categorías o etiquetas con la posibilidad de ofrecer a nuestras visitas el suscribirse a la etiqueta que prefieran. Para ello mostraremos un pequeño icono de rss delante de cada etiqueta que al pinchar sobre el, posibilite la suscripción a cada etiqueta en particular.

En el html de nuestra plantilla buscamos la zona de los elementos o widget, o lo que es más fácil aún, buscaremos un <:b/widget> cualquiera y justo a continuación pegamos estas líneas de código para el nuevo elemento:

<b:widget id='Label2' locked='false' title='Feeds de Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Una vez guardados los cambios, podremos cambiar el título del nuevo elemento y arrastrarlo a donde mejor nos parezca en Editar Plantilla.

En el código he puesto id='Label2' por si ya existe en la plantilla un id='Label1', pudiera darse el caso de que estemos utilizando más de dos widget de etiquetas, para evitar problemas podríamos poner un número alto en el id, por ejemplo, id='Label50'.
También es posible cambiar la imagen del icono, simplemente sustituimos la url del ejemplo (en negrita) por la de nuestro icono. En este caso el icono es de color gris, si os gusta más "el de siempre" de color naranja, podéis usar esta url:
http://img442.imageshack.us/img442/3060/feedpj9.png

Seguro que a más de uno le gustará la idea de mostrar el icono de rss a continuación de las etiquetas en vez de antes de ellas, para ello hemos de colocar en el código anterior la url de la imagen a continuación de (<data:label.count/>).
(<data:label.count/>)<img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/>


Basado en una idea de: PurpleMoggy´s Blog

0 comentarios:

Publicar un comentario