Cutting the Chai has moved to a new domain: cuttingthechai.com.
You can get in touch with Soumyadip at www.soumyadip.com.

Thursday, August 23, 2007

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.

15 Comments:

clyde said...

i was on another site and found their hack for efficiently displaying labels. didn't work for me. yours is very well explained and worked perfectly.

thanks.

go see your handiwork - http://myaisling.blogspot.com

Soumyadip said...

Clyde I was almost under the impression that the my hacks (not exactly) would not interest anyone else but me. Now there are two of us.

Blue Momma said...

I installed this widget an it looks great. The problem is that if I click on any of the labels, instead of taking me to the post it takes me to Bloglines, to subscribe to my blog.

Any idea what I did wrong?

thanks!
http://inthebowl.blogspot.com

Soumyadip said...

Blue Momma The purpose of the hack to enable subscription of label feeds in a drop-down format. It took you to Bloglines, perhaps because you had set it as the feed subscriber in your browser. In case you were looking for a drop-down list which would display the labelled posts on your blog rather than taking the user to the feed subscription, this would help.

Stef said...

Thanks for your tips. This worked great!

Yashashwini Y P said...

Thanks! It works great on my blog www.thejournalofafilmmaker.blogspot.com

:)

Chris said...

This is exactly what I was looking for. It should be added that if you want to retain the list of categories in addition to the drop-down category feed box, just don't delete the red text. Instead, put your new code either immediately before or after the red text.

Soumyadip said...

Chris Thanks for the tip.

thepoetryman said...

Thank you. Worked very well.

Peace.

Minyu2Fx said...

Went on several blogs before this :) Thanks..

People with Cameras said...

Excellent, thank you! Very well explained ... even I could figure it out ;)

Nivi said...

i dont have this line in my html code.. what do i do?

b:widget id='Label1' locked='false' title='Labels' type='Label'

pls help!!!

Soumyadip said...

Nivi: Just a few checks (some may sound stupid, but we often overlook certain obvious things. Atleast I do)

* Is your blog hosted on the Blogger platform and using the New Blogger templates?

* Did you add a labels widget?

* Before looking for the code did you select the the Expand Widget Templates check box?

* Some browsers do not look for content within text boxes and form fields while using the find function (Ctrl+F). Try copying the code on to Notepad and then look for the code.

* Search for title='Labels' or some other single element from the code and see if you find something similar.

Nivi said...

Hi Soumyadip, thanks.. i was stupid..i dint have the label widget which i added now..but still cld not succeed as i am getting an error every time i try to save thetemplate after adding code.

i get this message
We are sorry, but we were unable to complete your request.
When reporting this error to Blogger Support or on the Blogger Help Group, please:

Describe what you were doing when you got this error.
Provide the following error code and additional information.
bX-btcv0r

please bear with me and advice..
thank u.

Soumyadip said...

Nivi: This often happens with Blogger.

Just try after a while and it turns out okay, if not try again. Atleast it works with me.