Create Dropdown menu for Labels widget

A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar!

Fortunately you can prevent that from happening by converting the widget into a a dropdown (or is it a pulldown?) menu. Your labels widget will be reduced to just one line! And it only expands into a full list when you click it.

labels dropdown menu 2Before applying this hack, you must already have a Labels widget installed. If you don’t have one, go to Layout (old UI: Design > Page Elements) and add it.

Now let’s make the dropdown:

  1. Go to Template > Edit HTML > Proceed (old UI: Dashboard > Design > Edit HTML).
  2. Back up your template.
  3. Make sure you DO NOT check the  Expand Widget Templates checkbox.
  4. Look for the following lines in your HTML code:
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
  5. Replace that line with 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'> 
    <select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
    <option>Click to choose 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> 
    <b:include name='quickedit'/> 
    </div> 
    </b:includable> 
    </b:widget>
    • Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).
    • You can change “Click to choose a label” phrase in line 8 to your preferred phrase.
    • Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.
  6. Preview before saving.
  7. Congratulations you have shrunk your labels widget and created more space. 
  8. Enjoy!

92 comments to "Create Dropdown menu for Labels widget"

Gina May 24, 2010 at 5:48 PM    

Sorry, I don't have that exact line. What I have instead is:

< b:widget id='Label1' locked='false' title='Labels' type='Label'>
< b:includable id='main'>
< b:if cond='data:title' >

ETC. ETC.

Which line(s) do I change?

Gina

Greenlava May 24, 2010 at 6:10 PM    

@Gina
It looks like you've ticked the Expand Widget Templates checkbox.
Untick the checkbox.
The "< b:includable id='main'> ......" will disappear.

Hack Tutors May 25, 2010 at 12:56 AM    

I like this post and shared it on facebook ;)

Greenlava May 25, 2010 at 1:42 AM    

@Hack Tutors
Hey thanks for that :)

Unknown May 25, 2010 at 3:28 PM    

This is great! And the tip works perfectly too.
Thanks
I hope more such tips will be provided in view of more flexible and user friendly templates. Can the same tip be applied to posts, so that one may have a dropdown of all posts in a blog, with the possibility to arrange items either alphabetically or chronologically?

Greenlava May 25, 2010 at 6:42 PM    

@METAGLOSSIA
Have you looked at this tutorial?
List post titles in alphabetical or chronological order

hmm...maybe I should make another tutorial to convert that into a dropdown.

Anonymous,  May 28, 2010 at 12:17 AM    

thanks for the info. but can you please help me out? i want to have the same thing, but its not in a dropdown menu, just normal links.. but i couldn't find the link that connects to all the same labelled post. can you please help me out? i'm sorry for my bad english...

Greenlava May 28, 2010 at 4:23 PM    

@Joie
That's what we call a label url. Just go to Creating navigation or menu tabs in Blogger, read step2 item no.6. And remember labels are case sensitive.

Dave June 13, 2010 at 1:23 AM    

Thank you and this is the only piece of code that has done the job it is meant to and I've tried many!

Darlene S. July 6, 2010 at 3:19 AM    

You are AWESOME!! Thanks so much! :)

Greenlava July 6, 2010 at 11:18 AM    

@Dave
I'm glad your search ended here :)

@Darlene Servolini
My pleasure :)

sme,  July 11, 2010 at 11:21 PM    

You mentioned writing a post explaining how to put all my posts in a dropdown menu, as you have explained her for labels. I would like that.

Greenlava July 12, 2010 at 5:55 AM    

@sme
It's here: Dropdown menu for post titles list

BioGal July 16, 2010 at 6:41 PM    

This was awesome and SO fast!

Thank you!
Sharing on Twitter now!

Khaled July 21, 2010 at 12:23 AM    

Thanks a lot for the Widget modification. Saved a lot of space on my page, and took 1 minute to implement. Worked perfectly.

Unknown!!! September 14, 2010 at 5:44 AM    

This is very useful..I was lookin for something else..but I find this one very interesting..thanks i will try this.

Michael,  September 16, 2010 at 2:51 AM    

Awesome Guys! This is what I've been looking for and it works perfectly.
However, since I have a rather dark template, it's a wee bit too bright. Is it possible, to change the background and the characters to any type of colour? It would be really, really great.

Anyway, BIG thanks for this nice piece of code!
Greetz

Greenlava September 16, 2010 at 11:11 PM    

@Michael
In code line 7, replace
style='width:100%'
with
style='width:100%; background-color:COLORCODE1;color:COLORCODE2;'

replace COLORCODE1 and COLORCODE2 with background color code and text color code respectively.

Michael,  September 17, 2010 at 12:48 AM    

@Greenlava
Brilliant! It's actually very elegant.
Thank you very much. Greetz

Gearmaster October 5, 2010 at 2:47 AM    

Hi green...

this widget is very cool... thanks for posting this.. its really great!!!

gearmaster

Greenlava October 5, 2010 at 6:32 PM    

@Gearmaster
Thanks for the compliment :)

test October 11, 2010 at 5:32 AM    

It's very nice features it's really useful for our blog when we create much more labels thanks for sharing

Best Mobile Phones

Anonymous,  November 3, 2010 at 3:26 AM    

Great Widget. I don't actually use labels, but have been looking for a simple "non-pipes" way to create a drop-down list of my post titles.

In installed this widget and now I can manually copy my post title into the "Label" field, and the widget will display them in a drop-down menu.

Kathy January 4, 2011 at 6:36 PM    

This is really helpful. Thanks!

The Scathing Brit February 3, 2011 at 10:10 PM    

I am trying to create a dropdown menu to replace what has become a long list of labels. But I do not have that line of code in my template HTML. I've searched three times, both without and with the widget template expanded. That line of code absolutely is not there. Can you advise please??!!

Greenlava February 4, 2011 at 10:24 AM    

@The Scathing Brit
You have to add a Labels widget first.
Go to Design > Page Elements and click an Add A Gadget link. A pop-up appears, scroll down and select "Labels".

The Scathing Brit February 4, 2011 at 10:39 PM    

Thanks for this! Wonderful widget and it all looks a lot better now. I've set the width and followed your later posted advice and changed the background and text colours, but now I would like to make the the "box" or menu, a little deeper, not so thin, and enlarge and embolden the text so it stands out more.
Have you some more magic up your sleeve to do this?

(By the way, I noticed that when adding labels, there is a restriction of 200 characters. Does this still apply with a drop down menu?)

Greenlava February 6, 2011 at 1:09 AM    

@The Scathing Brit
Add size attribute in line 7, like this:

[select size='5' style='width:100%' onchange='location=this.options[this.selectedIndex].value;']

the value equals the depth (5 => 5 label deep).

(The 200 character limit stays)

The Scathing Brit February 6, 2011 at 6:58 PM    

Sorry, Greenlava, I think you may have misunderstood me slightly. Inserted the code as you suggested, but that then shows the first 5 lines of the labels. (I also lost my selected colours for some reason.) This is not quite what I'm after.

The area that is the dropdown menu with the line "Click on a topic to view and comment" is too thin as it appears, before anyone clicks on it. I've set the width that I want (32%) which is fine, but what I'm trying to do is make that initial box, or field, thicker, but without showing any labels until the arrow is clicked. I am assuming, perhaps incorrectly, that if that box is thicker and the text is larger, the label names themselves will also automatically be larger when the drop down arrow is clicked and the label names appear.

Hope this explains it a bit better. Maybe you'd like to check my source code? I await your invaluable help again.
http://thescathingbrit.blogspot.com

Greenlava February 6, 2011 at 7:49 PM    

@The Scathing Brit
Try this:
[select onchange='location=this.options[this.selectedIndex].value;' style='width:auto;background-color:#ebd587;color:#c14a1d;height:50px;font-size:20px']

the height has no effect on the text size, but "font-size" does.
And I set width to auto so the width will be resized automatically depending on font-size.

The Scathing Brit February 6, 2011 at 10:14 PM    

Sorry, but that hasn't made any difference whatsoever. I've even tried increasing the parameters ( to height 80 and font-size 30) but no change at all to the box or the text.
Some other thoughts?

Greenlava February 6, 2011 at 10:36 PM    

@The Scathing Brit
What you have now:
[select onchange='location=this.options[this.selectedIndex].value;' style='width:auto;background-color:#ebd587;color:#c14a1d;height:80px:font-size:30px']

what you should have:
[select onchange='location=this.options[this.selectedIndex].value;' style='width:auto;background-color:#ebd587;color:#c14a1d;height:80px;font-size:30px']

can you spot the difference?

The Scathing Brit February 7, 2011 at 1:47 AM    

Yes, I have spotted it! (The semicolon).
Now all working beautifully, for which many, many thanks!

I posted a question ( and later renewed it) on Blogger help, which nobody seems to have an answer for, which is a bit surprising. Perhaps you have an answer.
The only thing not centralised in my blog is the comments field and the small associated fields just beneath it. They are ranged to the left, and I would like them to be central too. Is there a CSS code to centralise this? And why do some visitors get the comments field automatically, and some have to click on the link to get the field? Is this something to do with their Browser?

Greenlava February 7, 2011 at 3:24 PM    

@The Scathing Brit
To center the comment form, add this snippet in the CSS box:
.comment-form {margin:0 auto}

Visitors will get the comment form if they visit the post/individual page. Going to other pages (for example homepage) gets them the comment link.

The Scathing Brit February 7, 2011 at 6:37 PM    

That's got it! Everything is now looking the way I want it.
Thank you very much for all your help.
Until the next tweak I don't know how to do.......

Carole in the UK February 13, 2011 at 10:15 PM    

Yee Ha!
I am so happy that I have found this blog as You have given such great tips and tricks, that I have found so useful. Your instructions are clear and easy to follow.

This worked for me FIRST time!

Thank you so much. Do you by any chance have a similar post for adding drop downs to navigation bars. I am using an official blogger template, with the new pages plugin, they provide.

Greenlava February 14, 2011 at 8:35 AM    

@Carole in the Faith Lounge
It's here:
Installing a multi level CSS dropdown menu

Raine February 18, 2011 at 9:59 AM    

This was very helpful! I thought I couldn't get a cleaner look for the categories.

Raine February 18, 2011 at 10:05 AM    

Thank you for an easy list of instructions. It was what I needed.

Shiokalingam February 18, 2011 at 3:27 PM    

I finally found what I was looking for here! Thanks!

Cannwin February 27, 2011 at 1:59 AM    

Wow, I bow to your greatness. :)

Anonymous,  March 1, 2011 at 10:51 AM    

I did this. I'm thrilled with it. Thanks so much.

Dawn @ BakeSewSing.com

Francis Prabahar March 1, 2011 at 11:22 AM    

Realy I Love Ur Website....

BonMushpiTT March 21, 2011 at 12:08 PM    

I am having a problem on how to limit my drop down menu label post on blogger. Sir, can you help me about my concern here? Thanks and God bless!

Greenlava March 22, 2011 at 10:30 PM    

@BonMushpiTT
Could you be more specific?

seo experts April 11, 2011 at 3:41 PM    

great information about drop down menu for labels for blogger, thanks for sharing this drop down menu coading

Unknown May 8, 2011 at 6:43 AM    

This worked perfectly but is it possible to have more than one drop down menu? I tried to have more than one and it didn't seem to work. First one worked just fine..can you please help?

http:www.reallypetiteshop.blogspot.com

Greenlava May 8, 2011 at 9:40 PM    

@Really Petite
Looks like you've figured it out.

Unknown May 9, 2011 at 12:14 AM    

Hi Greenlava...I still haven't figured it out:( I can only have ONE drop down menu on my blog sale and need more than one drop down menu for each category like brands, price, size etc...:

http://www.reallypetiteshop.blogspot.com

Help please? I have tried everything!

Greenlava May 9, 2011 at 9:30 PM    

@Really Petite
Darn...I was looking at the wrong blog!
Okay, I see you have four Labels widget -Label1, Label4, Label3 and Label2. What you need to do is apply steps 4 and 5 on each of them.

Unknown May 9, 2011 at 11:41 PM    

Thank you so much for responding!!! On another note, I am hoping this will work because on my main blog: http://www.ReallyPetite.com , the widget I have for my drop down menu doesn't work on an iPhone or iPad but works fine on any computer when you click a category in the drop down menu...any ideas why this is? :)

Unknown May 9, 2011 at 11:47 PM    

@Greenlava- you are a GENUIS!!!!! It worked!!!! Do you know how I can customize the color of the background of the drop down menu? :) You are the BEST! Thank you Thank you!!!!

Greenlava May 11, 2011 at 7:14 AM    

@Really Petite
You add it to the style attribute in the Select tag, like so:

[select style='width:100%width:100%;background:PUT COLOR CODE HERE;' onchange='location=this.options[this.selectedIndex].value;']

John Tsipas May 26, 2011 at 5:09 AM    

thank you very much , continue your great job....!!!

Anonymous,  June 13, 2011 at 10:01 PM    

thank very much it worked

Danielle Daws July 8, 2011 at 8:44 AM    

BRILLIANT! Thank you so much!

Play Online Games July 17, 2011 at 12:24 AM    

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.

Anonymous,  August 5, 2011 at 2:36 PM    

to all you newbies out there who change the code and get the label bar but nothing on it.....

it's because you didn't set any labels in your posts got to edit you post look at the bottom where it says label put something in there then publish then go back and voila

Faceberuk August 15, 2011 at 10:41 AM    

Can we choose which label to show?

Greenlava August 15, 2011 at 3:20 PM    

@Beruk
Go to Design > Page Elements and click the Edit link on the Labels gadget box. Then check "Selected Labels" radio button, click "Edit" and choose which labels to show/hide by ticking/unticking them.

Renee P. August 18, 2011 at 1:34 AM    

Do you discuss somehow how to accomplish the way you have it on this page?: http://www.bloggersentral.com/search/label/guest%20posts. Specifically, right now when I click on a label (say, Hiking) the entire blog posts come up and I have to wade through them all. I like how you have it summarized and listed. I don't even know how to Google my desire for this. Does this make sense? Appreciate your help.

Greenlava August 21, 2011 at 2:41 AM    

Refer to this post to show only post titles on archive and label pages.
To add snippet to title, read reply 67 in the comments (of that post).

farid islam September 2, 2011 at 12:07 PM    

This is a great tutorial. it is working 100%
thanks for awesome post

Anonymous,  September 17, 2011 at 8:29 AM    

work fine on my website
thanks man for the great tutorial

Jan October 9, 2011 at 7:40 AM    

I don't have a long list of labels, but I do want to create a drop down menu that lists each post title under the label and be able to click on that post title to go directly to the post. Right now when they click on my label it takes them to my whole page for that label (say recipes) and they have to scroll through all the posts to even see what is there. Any help? I would love it!!!

Greenlava October 10, 2011 at 11:54 AM    

@Jan
You might want to visit this link:
http://www.abu-farhan.com/2010/05/table-of-content-and-accordion-for-blogger/

Anonymous,  November 16, 2011 at 10:46 PM    

Thx ^_^

ComVia November 20, 2011 at 7:16 PM    

Great Work. Works Great For Me!

Kathy November 30, 2011 at 9:46 AM    

This is AWESOME. Unfortunately it is not working for me.
I have a blog on Blogger, I added a Widget to my sidebar called Labels. Here is my problem:

This is the closest line of code I have:


Still, I tried replacing it, and even so, it looks GREAT in Preview! But when I try to save it, I get a Blogger error every time.

any ideas?

(Thanks for the wonderful tip, regardless!)

Greenlava December 3, 2011 at 9:15 AM    

@Kathy Weller
Your code won't appear in the comments unless you replace < and > symbols with [ and ] respectively.

Unknown December 17, 2011 at 12:25 AM    

Would this work with the Blog Archive instead of Labels?

Thanks!

Greenlava December 17, 2011 at 11:58 PM    

@Cathy Davis
No it wouldn't work on BlogArchive widget.
If I'm not mistaken BlogArchive widget has a dropdown menu option built-in.

Anonymous,  December 30, 2011 at 2:07 AM    

thanksss... ^_^

Unknown January 7, 2012 at 4:21 AM    

Thanks. Worked for my blog.

Unknown February 5, 2012 at 11:27 PM    

Hey!suppose we have to show some labels in one drop box and the remaining in the 2nd drop down box....Can we do that?

Greenlava February 6, 2012 at 7:23 PM    

@Ranjit Singh
No we can't.

My PR February 21, 2012 at 1:59 AM    

This is awesome! Thank you!

Economically Humble March 1, 2012 at 9:36 AM    

Thanks for the tutorial.... worked perfectly!

custom labels March 5, 2012 at 5:08 PM    

It is a great tutorial.It is very helpful to me.

Funny Gypsy March 16, 2012 at 12:47 AM    

Thank you so much! My blog looks so much neater now! :)

HIMALAYA March 29, 2012 at 2:27 PM    

THANK YOU

Unknown May 4, 2012 at 8:59 PM    

Thanks SO MUCH for this. It's super easy and simple to do! THANKS :D

Anonymous,  October 19, 2012 at 6:24 PM    

Nice tutorial! I've applied this tip tonight.

Catrina November 26, 2012 at 11:22 PM    

How do you then center this?

Abhi February 6, 2013 at 6:05 PM    

Hi,
I have a question - By doing this, can we prevent the unnecessary pagerank flow from the homepage to blogger labels?
Please reply...i am dying to know this!!!

Greenlava February 6, 2013 at 8:39 PM    

@Abhishek Raj
I've tried to find literature on this subject before, but could not find anything on the internet.
However I can tell you that it does not prevent PR flow.
You can verify this by checking the PR for BloggerSentral's label pages. All of them have PR4 (I'm surprised myself). I'm pretty sure the PR juice comes through the dropdown menu as it provide the only access to those pages.
FYI I added rel=nofollow to the option tag (I'm not even sure if this is valid) to stop PR flow when I installed the dropdown on this blog, but obviously it didn't work.

Textile Education Tips March 5, 2013 at 1:35 AM    

Tnx for nice tips.

Unknown March 26, 2013 at 11:09 PM    

Most helpful! Thank you very much. This editing gives more room for my blog.

smita March 27, 2013 at 3:23 AM    

this worked well on my blog thnx dear

Unknown April 3, 2013 at 10:10 AM    

Hi i could really use some help. This is the code I have . Nothing changes. Could you please give me a suggestion. Thanks

Hindi Tracks April 3, 2013 at 9:48 PM    

thanks for this nice tip!

Camille March 11, 2014 at 12:26 PM    

I've been looking for exactly this! So glad I could place my many, many labels in different drop-down boxes. Thank you!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.