August 31, 2006

Drop-down labels - First blogger beta template hack!

Update: I developed a better version of this hack later with 3 styles of labels. Please check this out.

[Translations by other bloggers: Chinese]

I couldn't contain my curiosity after seeing John's post and Blogger Buzz post that template editing has been opened up for Layouts also in Blogger Beta. So, I decided to jump in right away and try the tiny little idea that I had in mind already. I believe this is the first Blogger Beta template hack and I could't resist saying that ;).

As you know, labels are Blogger's way of supporting categories. But, Blogger supports it only as a list of links unlike Archives for which it supports other options such as Drop-down menu, Hierarchy (Expand/collapse). I thought there's a possibility of a hack right there - Drop-down menu for labels. It was a breeze to implement it after spending a little bit of time with the template.

Even though Blogger has opened up template editing, they are just teaching us the ABCD of it now. So, if you click on Edit HTML, it shows only the condensed form of the template. But, there's an option at the top right called "Expand Widget Templates". If you click it, you will see the template expanded to more hacker-friendly form. Blogger's help page for Widgets just says "coming soon" but what good is a hacker if he cannot understand raw code without help pages :).

Assuming that you have already created labels and added a page element for labels in your sidebar, here's what you need to do to convert the list of labels to drop-down menu like the one I have in my sidebar. First download the expanded template to your hard disk, make a copy of it and find the following section of code in the template.



<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>



Replace the portion above in red with the following code snippet.


<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>



Then upload the modified template to Blogger and Voila, you got drop-down labels!

(I also checked whether Expand/collapse option will work with labels but Blogger doesn't seem to provide the list of posts for every label, instead only depends on the search facility. I will explore the possibility of this when I get more time.)

45 comments:

Anonymous said...

Sorry, this programming newbie asking simple question. You said to download the template and save it. In what format should I save it - xml or all files?

I am used to Notepad for saving and editing template, which I can edit easily. However, if I save it in xml format, the file is read only. If I save it as all file, and open it with Notepad, it is all a confused jumble (not formated).

Should I just save it into my harddisk for backup, and use the Blogger Beta template editor for editing the template?

Thanks for your time to read this long question.

DarkUFO said...

Nice, what happens when you have 30+ categories?

Peter said...

Following your instruction, I have just implemented drop-down label for Testing Blogger Beta. It was quite simple with your instructions. However, there is something troubling. After implementing it, I tried to move the label element, but when saving, there was an error message: "An error occured. Please try again." Trying few times didn't help. Just wondering if this has anything to do with your hack.

Ricardo said...

nice one!
tried it already on my beta test blog, but(isnt there always a but) any chance of just displaying the title of a post instead of the full post, if someone has 50 posts in one category you have to go through the whole 50 posts.

Normally we can see what the post is about by looking at the post title, i think just having the title would look better and pratical

Ramani said...

@Anonymous: I saved it as All files only. If you are having problems downloading, you could just copy/paste the whole template and save it as a file.

@darkufo: I think it should work with any number of categories. Good thing about drop-down display is that it saves some space in your sidebar for other things.

@peter: I tried moving my labels element and I didn't get any error. Please try again or report to Blogger support. Did it work without the hack?

Ramani said...

Ricardo, I am not sure you understood this hack properly. It shows only the label (aka category) names and not post titles.

eldude said...

Nice hack. You might want to include the "<ul>" and "</ul>" tags as part of what gets replaced by your hack, otherwise you end up with:
ul
select
/ul

Ricardo Santos said...

@ramani

i understood the hack, i was kind of leaving a suggestion for a possible future hack :), when selecting a label/category the results now show the "full" posts,
i think it is better to browse the results by post title.


Sorry if i wasnt explicit enough, english not my native language.

Ramani said...

@eldude: good point. I changed it.

@ricardo: sorry i misunderstood. yes, if I could get the post titles alone for each label, I could show it in expand/collapse form like archives. But that doesn't seem to be easy.

Blog Bloke said...

Nice work Ramani.

...BB

Anonymous said...

Hi,

Could you make the labels like "tag clouds"?

Thanks.

TonNet said...

Yeah! Any idea how mess it up with clouds? Thx for being the first one.

Ramani said...

TonNet and Anonymous, yes, I will check out the possibility of Label clouds.

FriedClyde said...

very nice thankz is it possible to change the color.......??

Anonymous said...

I tried using your drop down label code. It only shows the select alabela nd my entire list. Is ther anything I shud add to it. Sorry, I am a non-techie person.

priya said...

Hi,

I tried using this code and wat I see is only select the label and not my list.

Is ther any way to add drop down menu for blogs we add at sidebar which occupies a lot of space.

Ramani said...

priya, as you seem to be trying my multi-style widget, I will wait and see if you get it working.

yes, you could show the blogs you read in a drop-down menu. if you are interested, i will send you instructions.

KrisUnderwood said...

Great hack! Tried it on my blog-very easy! Is there any way to get color text for the drop down Label menu?

Also, is it possible to do drop down on the menu archives?

dreamkatcha said...

Excellent hack, just what I was looking for, thanks. I've got it installed on my blog and it has really tidied up my sidebar. I don't think visitors need all that info hurled at them in one go when they first open your page.

jchevais said...

Awesome. Works.

But.

Is it possible to control the drop down menu's width? I've got a three column blog and this drop down is too wide. I've been messing around with widths in the widget, but it isn't working. Any ideas?

Thanks again.

Robin said...

I just switched to Beta tonight and added your drop-down lable widget. Very nice... THANK YOU!

I'm hoping you'll add code for a drop-down archive widget next. Is that a possibility?

Ramani said...

Robin, Drop-down option is already available for archives. Just edit the archive page element and change its type from Hierarchy to Drop-down.

Anonymous said...

I tried out in my beta-test and really like how it works... the thing is: I publish my "real" beta-blog via ftp so I cannot use the layout-functions.. is there any chnace thogh, that this hack also works in my normal html-template... Have been reading stuf baout widget-things not working for blogs on servers outside blogger-adress...

Ramani said...

Anonymous, These hacks will only work in new (Layout) template. sorry.

Vand said...

Thank's alot... exelent.:D so cool..:D once again...thank's ;)

Apple said...

Was easy for me to understand and it worked great. Thanks!

choice said...

Once again a fantastic hack that works great. I was thinking if it is possible to do the same for my long list of links that I have.

Can you show me how to do a drop down for links?

Thank you.

Ramani said...

choice,

You can use the utility explained in this post.

choice said...

Hi Ramani.

I saw your post on create drop down menus easily. I was thinking the drop down menu creator is a bit difficult to you for me as I found the links widget in blogger easier to input new links and it also has sorting function.

Since it is possible to insert a code for drop-down labels, would it possible to have the code for drop-down links to be inserted into the HTML template?

Around My Kitchen Table said...

You are a miracle worker! I know nothing about progamming but I just followed your instructions to the letter and IT WORKED!! I just copied and pasted the whole expanded widget template to notepad - did a search for date:labels to find the relevant bit of code. Replaced it and copied the whole thing back where it came from. I'm going to put a link to you on my blog. XXXXX

Craftybernie said...

I had been looking for your hack for the drop down menu for labels rather than the multi style options.

Thanks for sharing!!!

J.J. said...

Thanks a lot for this hack. This is amazing. I post a link back to my site. You definitely get some traffic from my site:

http://deadzoners.blogspot.com

Witsinkw said...

Absolutely great hack, tidied up my pages a treat.

Thanks.

Mango-Tango said...

Hi Ramani,

Sorry to bother you, but I really need your expert help on this one desperately! I am getting 2 lines of the same information (Label information) on my blog. It looks like:


Showing 4 posts with label Grammar. Show all posts
Showing 4posts with label Grammar. Show all posts
Thursday, June 14, 2007

Have tried everything possible from my end but in vain. Please help!!

My blog is easiestspanish.blogspot.com

Félix González said...

Ramani, I undestood Ricardo on his comment on 8/31/2006. You said this: " I also checked whether Expand/collapse option will work with labels but Blogger doesn't seem to provide the list of posts for every label, instead only depends on the search facility. I will explore the possibility of this when I get more time.).

If you visit http://chublogga.blogspot.com you will see in that blog sidebar the list of post for every label. It sound it is possible to do that. I wrote Mr. Chublogga to know the code for that function but I have not gotten form him any answer so far.

Ricardo wrote that comments last year. Maybe you have the answer to that on this moment, July 2007.

If that it is true, I'd appreciate your help on this. That function is vital to my blog.

What can you tell us about it?

Thank Romani

Ramani said...

Felix,

This is still the case.

Emma Sometimes said...

Ramani, thank you, I have it up on my blog now!! I might add, if you add this part of the hack in bold below (and I'm using parenthesis here instead of brackets < > so I can post this comment.

(select onchange='location=this.options
[this.selectedIndex].value;'
style="width:175px;
background-color:#fff;
color:#000;")

(option)Select a label(/option)

You are then able to control color of background on drop down as well as text color and width of menu. Just thought I'd share.

Ramani said...

Thank you emma.

ArahMan7 said...

Yes, thank you, Ramani for this magnificent hack. I was so afraid when I realized my labels are getting longer as times passed by.

I've been searching for this type of widgets for quite some times now. Anyway, thank you from the bottom of my heart.

Greetings and lotta loves from Malaysia.

Roberto said...

Hi Ramani,

My drop down labels hack worked perfectly, as usual with your simple to follow instructions. One question (maybe 2 in 1):) I managed to change the title of the menu from See Labels to the Spanish version Ver Lista de Temas. Can I change the color of the font of this menu for better viewing (i.e.hot blue)? Thanks so much for all your help! http://rapsodiaantillana.blogspot.com

Sandra said...

Hello Ramani,
I tried your drop-down label hack and it worked great. I then tried to add Emma's bit of code so as to change the color of the background and text in the drop down box - but no cigar... any ideas?

rolocine said...

hey man! your work is great, thank you for a lot of stuff, codes, templates and advices. I`m learning about this digital world throught by means of you. Sorry for my english!
I gave you a prize "premio blog solidario" in http://limonchiflado.blogspot.com

Jessica said...

Hi,

Great hack! I am having the same problem as jchevais, though - it's too wide for my three-column layout. I too have been looking at the code, but no luck. Any ideas?

Thanks,
Jessica

baby~amore' said...

this is an awesome widget - my labels list was so long I didn't want to publish it to my sidebar- but I had trouble finding stuff I wanted.
A great space saver - I will add to my links as Blogger hacks.

Do you have other widgets for other personal blogroll /sidebar lists ?

Sani said...

Thanks for the tip, it work out great ..