Drop Down Label Feed for New Blogger

Many readers of this blog might not be interested in all the assorted rubbish that I post here; they might have a liking for only some specific kind of crap. Someone who looks forward to my comics post might not necessarily have a liking for sexy Indian ads (an unlikely likelihood though). Or why should I bother someone with a genuine interest in vintage Indian advertising with some shoddy film reviews. Therefore I decided to include feeds for categories (aka labels, tags) for choosy readers and that too in an easy drop down format.

The PurpleMoggy had quite sometime back put up a post about adding label feeds to your Blogger (then in beta) template. But since, my list of categories is a long one and following that hack will mean eating up a lot of space on the sidebars, I needed the categories feed listing to be sorted in a drop down format. But then things weren't that easy for me, a little googling didn't help much, therefore I set on the difficult terrain on my own (I understand very little of the codes) and came up with what you can see in the Subscribe section on the right panel.

Before I proceed to the hack let me give credit to another place where it is due. The great help Ramani and the first Blogger Beta hack. And do remember to keep a backup of your template, just in case things go wrong. I don't want anyone cursing me.

Log in to your Blogger account -> Go to Layout -> Add a Page Element -> Add the Label element to your blog

Edit HTML -> Click the Expand Widget Templates check box

And look for this 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'>
<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>

In case you have already added a label widget to your template, it will be named

<b:widget id='Label2' locked='false' title='Labels' type='Label'>

and in case you have multiple label widgets (like an additional tag cloud), it'll be this:

<b:widget id='Label3' locked='false' title='Labels' type='Label'>

Not much of a difference, only the numeral in the widget id progresses (as no two widgets can share the same id).

Now replace the section in the code (above) in red, with this:

<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:145px'>
<option>Category feed</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:post.url + "/feeds/posts/default/-/" + data:label.name'><data:label.name/>
</option>
</b:loop>
</select>

In case, you also want to display the number of posts under each label, replace the portions of code in bold with this instead of the one above:

<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:145px'>
<option>Category feed</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:post.url + "/feeds/posts/default/-/" + data:label.name'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

You can customise your drop down list by changing the text in

<option>Category feed</option>

with

<option>Your customised text</option>

Even the width of the drop down list can be changed to suit your template. The default in this is

style='width:145px'

You may change the width specifications to say 120px or whatever or even remove this block of code altogether.

After you are done with your customisation bit, get a preview. Just to see if it is displaying right, check the functionality only on the live blog. It wouldn't work in preview given the relative nature of the paths.

You can also rename or unname the widget from the Page Elements page.