Show individual label feeds in blogger label widget
Posted by Nitesh Kothari on 05 January 2009
Share this post:
|
Feeds are one of the most important factors for better online exposure of a blog. Many readers prefer viewing feeds rather than visiting blogs everyday. Some of my loyal readers (google, netvibes users) have my blog feed widgets at their homepage. They keep an eye on my blog using this widgets. As you can see, there is one arrow after every label name in label widget at Wolverine hacks. When you click on the arrow, it redirects you to that particular label's feed. Many readers requested me to write a blogger tutorial about it. Demo: click on arrow next to label name in label widget.
Step 1: CSS Codes (+/-)
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://img514.imageshack.us/img514/8400/downxq9.gif") no-repeat 0 .25em;padding-left:15px;}
html>body a.labelfeed-link {/* Respecified, for IE5/Mac's benefit */
background:url("http://img514.imageshack.us/img514/8400/downxq9.gif") no-repeat 0 .25em;padding-left:15px;}
Change links in red, if you want to show some other image next to label name.
Step 2 (+/-)
Now Press 'ctrl+f' and search for the follwing code.
<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>
<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Replace code in red i.e. (<data:label.count/>) to the following code.
<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>
<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>
<span dir='ltr'> <a class='labelfeed-link' expr:href='"http://clwolvi.blogspot.com/feeds/posts/default/-/" + data:label.name' style='margin-left:10px;' title='Subscribe'/> </span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Final Words:
This blogger hack lets your visitors access the content on your blog in a much better way. Is it useful for your blog? leave a comment here..