Home
About
Forums
Advertise
Contact
Show individual label feeds in blogger label widget
Posted by Nitesh Kothari on 05 January 2009|
Share this post:
|
|
2 Comments
Demo: click on arrow next to label name in label widget.
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.
Step 1: CSS Codes (+/-)
Copy and paste the following code just above </b:skin> or in stylesheet.
Change links in red, if you want to show some other image next to label name.
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;}
/* 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.
Replace code in red i.e. (<data:label.count/>) to the following code.
New lebel widget code should look like this.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>
<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'/>
<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>
<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..
