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.
Before 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:
- Go to Template > Edit HTML > Proceed (old UI: Dashboard > Design > Edit HTML).
- Back up your template.
- Make sure you DO NOT check the Expand Widget Templates checkbox.
- Look for the following lines in your HTML code:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
- 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.
- Preview before saving.
- Congratulations you have shrunk your labels widget and created more space.
- Enjoy!
92 comments to "Create Dropdown menu for Labels widget"
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
@Gina
It looks like you've ticked the Expand Widget Templates checkbox.
Untick the checkbox.
The "< b:includable id='main'> ......" will disappear.
I like this post and shared it on facebook ;)
@Hack Tutors
Hey thanks for that :)
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?
@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.
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...
@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.
Thank you and this is the only piece of code that has done the job it is meant to and I've tried many!
You are AWESOME!! Thanks so much! :)
@Dave
I'm glad your search ended here :)
@Darlene Servolini
My pleasure :)
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.
@sme
It's here: Dropdown menu for post titles list
This was awesome and SO fast!
Thank you!
Sharing on Twitter now!
Thanks a lot for the Widget modification. Saved a lot of space on my page, and took 1 minute to implement. Worked perfectly.
This is very useful..I was lookin for something else..but I find this one very interesting..thanks i will try this.
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
@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.
@Greenlava
Brilliant! It's actually very elegant.
Thank you very much. Greetz
Hi green...
this widget is very cool... thanks for posting this.. its really great!!!
gearmaster
@Gearmaster
Thanks for the compliment :)
It's very nice features it's really useful for our blog when we create much more labels thanks for sharing
Best Mobile Phones
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.
This is really helpful. Thanks!
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??!!
@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".
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?)
@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)
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
@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.
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?
@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?
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?
@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.
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.......
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.
@Carole in the Faith Lounge
It's here:
Installing a multi level CSS dropdown menu
This was very helpful! I thought I couldn't get a cleaner look for the categories.
Thank you for an easy list of instructions. It was what I needed.
I finally found what I was looking for here! Thanks!
Wow, I bow to your greatness. :)
I did this. I'm thrilled with it. Thanks so much.
Dawn @ BakeSewSing.com
Realy I Love Ur Website....
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!
@BonMushpiTT
Could you be more specific?
great information about drop down menu for labels for blogger, thanks for sharing this drop down menu coading
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
@Really Petite
Looks like you've figured it out.
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!
@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.
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? :)
@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!!!!
@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;']
thank you very much , continue your great job....!!!
thank very much it worked
BRILLIANT! Thank you so much!
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.
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
Can we choose which label to show?
@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.
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.
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).
This is a great tutorial. it is working 100%
thanks for awesome post
work fine on my website
thanks man for the great tutorial
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!!!
@Jan
You might want to visit this link:
http://www.abu-farhan.com/2010/05/table-of-content-and-accordion-for-blogger/
Thx ^_^
Great Work. Works Great For Me!
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!)
@Kathy Weller
Your code won't appear in the comments unless you replace < and > symbols with [ and ] respectively.
Would this work with the Blog Archive instead of Labels?
Thanks!
@Cathy Davis
No it wouldn't work on BlogArchive widget.
If I'm not mistaken BlogArchive widget has a dropdown menu option built-in.
thanksss... ^_^
Thanks. Worked for my blog.
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?
@Ranjit Singh
No we can't.
This is awesome! Thank you!
Thanks for the tutorial.... worked perfectly!
It is a great tutorial.It is very helpful to me.
Thank you so much! My blog looks so much neater now! :)
THANK YOU
Thanks SO MUCH for this. It's super easy and simple to do! THANKS :D
Nice tutorial! I've applied this tip tonight.
How do you then center this?
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!!!
@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.
Tnx for nice tips.
Most helpful! Thank you very much. This editing gives more room for my blog.
this worked well on my blog thnx dear
Hi i could really use some help. This is the code I have . Nothing changes. Could you please give me a suggestion. Thanks
thanks for this nice tip!
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.