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 (+/-)

Copy and paste the following code just above </b:skin> or in stylesheet.

a.labelfeed-link {
/* 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 (+/-)

Go to Layout -> Page element -> 'Add a Page Element', and add a label element to your template and save. Now go to 'EDIT HTML' and check the checkbox for 'Expand Widget Templates'.

Now Press 'ctrl+f' and search for the follwing code.

<b:widget id='Label1' locked='false' title='Labels' 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>
<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.

<a class='labelfeed-link' expr:href='"http://clwolvi.blogspot.com/feeds/posts/default/-/" + data:label.name' style='margin-left:10px;' title='Subscribe'/>

New lebel widget code should look like this.

<b:widget id='Label1' locked='false' title='Labels' 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>
<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..