Home SEO Tools FAQs Guest post Contact Donate

Create Dropdown menu for Labels widget

| 76 comments

labels dropdown menu 2 A labels widget displays your post labels. 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 :)

Regain control of your sidebar, shrink the widget -by converting it into a dropdown (or is it a pulldown?) menu. Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.

Before applying this hack, you must already have a Label widget installed. If you don’t have one, go to Design > Page Elements and add it.

Now let’s make the dropdown:

  1. Go to Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Make sure you DO NOT tick 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. You can now add more widgets! Oh no, you don’t! :)
  8. Enjoy!

76 comments to "Create Dropdown menu for Labels widget"

Gina May 24, 2010 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 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 12:56 AM    

I like this post and shared it on facebook ;)

Greenlava May 25, 2010 1:42 AM    

@Hack Tutors
Hey thanks for that :)

METAGLOSSIA May 25, 2010 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 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.

Joie May 28, 2010 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 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 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 Servolini July 6, 2010 3:19 AM    

You are AWESOME!! Thanks so much! :)

Greenlava July 6, 2010 11:18 AM    

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

@Darlene Servolini
My pleasure :)

sme,  July 11, 2010 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.

BioGal July 16, 2010 6:41 PM    

This was awesome and SO fast!

Thank you!
Sharing on Twitter now!

Khaled July 21, 2010 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 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 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 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 12:48 AM    

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

Gearmaster October 5, 2010 2:47 AM    

Hi green...

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

gearmaster

Greenlava October 5, 2010 6:32 PM    

@Gearmaster
Thanks for the compliment :)

Best Mobiles View October 11, 2010 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 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 6:36 PM    

This is really helpful. Thanks!

The Scathing Brit February 3, 2011 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 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 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 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 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 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 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 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 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 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 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 Faith Lounge February 13, 2011 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 8:35 AM    

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

Raine February 18, 2011 9:59 AM    

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

trailsofthepen February 18, 2011 10:05 AM    

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

Shiokalingam February 18, 2011 3:27 PM    

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

Cannwin February 27, 2011 1:59 AM    

Wow, I bow to your greatness. :)

D. G. Davidson March 1, 2011 10:51 AM    

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

Dawn @ BakeSewSing.com

indian March 1, 2011 11:22 AM    

Realy I Love Ur Website....

BonMushpiTT March 21, 2011 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 10:30 PM    

@BonMushpiTT
Could you be more specific?

seo experts April 11, 2011 3:41 PM    

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

Really Petite May 8, 2011 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 9:40 PM    

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

Really Petite May 9, 2011 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 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.

Really Petite May 9, 2011 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? :)

Really Petite May 9, 2011 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 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;']

johntsip17 May 26, 2011 5:09 AM    

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

Anonymous,  June 13, 2011 10:01 PM    

thank very much it worked

Danielle July 8, 2011 8:44 AM    

BRILLIANT! Thank you so much!

Play Online Games July 17, 2011 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 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

Beruk August 15, 2011 10:41 AM    

Can we choose which label to show?

Greenlava August 15, 2011 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 and Mike in St. Kitts August 18, 2011 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 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 12:07 PM    

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

Anonymous,  September 17, 2011 8:29 AM    

work fine on my website
thanks man for the great tutorial

Jan October 9, 2011 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 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/

Danialde4 November 16, 2011 10:46 PM    

Thx ^_^

ComVia November 20, 2011 7:16 PM    

Great Work. Works Great For Me!

Kathy Weller November 30, 2011 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 9:15 AM    

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

Cathy Davis December 17, 2011 12:25 AM    

Would this work with the Blog Archive instead of Labels?

Thanks!

Greenlava December 17, 2011 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.

Danialde4 December 30, 2011 2:07 AM    

thanksss... ^_^

Manish Ahuja January 7, 2012 4:21 AM    

Thanks. Worked for my blog.

Ranjit Singh February 5, 2012 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 7:23 PM    

@Ranjit Singh
No we can't.

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

If your question is unrelated to this article, please use our Facebook page.
When posting HTML/XML code, replace < and > symbols with [ and ] respectively. The reverse applies when copying code from my replies here.

Pls share this page

Get this
Click to go to top Click to comment