If you have a long list of labels in your sidebar, you could be losing valuable space to display other information. A different method of displaying your labels is to use a drop-down menu: this takes up very little space at all, and is useful for helping your readers find the information they need. This post explains how a drop-down menu for your blog labels can be achieved in just a few easy steps.
This hack was originally developed by Ramani of Hackosphere, though for this tutorial I have further simplified the process so there are only two steps required:
- First you should make a back-up of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking the "download full template" link which is near the top of the page. It is always good practise to back-up your template before making any modifications at all, just in case you make a mistake and later need to use your old template again.
- Next you will need to find the following line of code in your blog's template:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
To find this line, you do not need to tick the expand widget templates box. This is the un-expanded tag used to display the label widget in your blog template. Highlight all of this line, and replace this with the following section of code:
Then save your template and take a look at your new drop-down menu!
Once installed, you can then move the label widget to other areas of your blog in the layouts section of your dashboard, just like any other widget.
I hope this tutorial has been useful to you. Please feel free to leave your comments and suggestions below.
Technorati Tags: blogger | labels | drop-down | menu | javascript | sidebar
108 Comments:
Thank You Thank You Thank You!
=D
for now I don´t need, but my list is growing!!
by the way, I would like to know a way to edit the labels I choice in all my posts, not having to go edit each one and change the labels
like now, I have a label called Paid.nu, now I want to change all my posts with that label to other name, Paid.vg
:S
Great hack! I've been wanting something like this! For some reason when I add it, I get errors saying "this isn't well-parsed." Even on things that were already in my html before pasting this. Ugh.
to dav7:
I just did this this morning. It's very simple, really. Under the "Posts" heading, hit "Edit Posts" and to the left you'll see a list of all of your labels. Simply click on your "Paid.nu" label link, and it'll give you a list of all of the posts with that label. From there, click the "All" next to the drop-down menu, and then in the drop-down menu at the bottom click "New Label..." and enter "Paid.vg" in the dialog box. That label will then be applied to all of those posts. Then, click the drop-down menu again, and at the very bottom they have an option to remove labels. Select "Paid.nu" and it'll be removed! And there you go!
Hope this helps, and doesn't confuse you! =P
Happy Thanksgiving!
woooowwww
I had never notice that!!
now is done easily!!
thanks a lot :D
thanks we are using it :)
Hi Amanda
ur site is very helpful...
Amanda do you have a hack for drop down listing of each label in the Label list.
It would be really really very helpful.
It's very helpful. I'm using it now. Thank you very much!
hey, thanks a lot Amanda!
This is a great solution, just the one I was looking for.
Do you know, per chance, any way of changing the color, i.e. reversing type and bckgrnd, black to white? I was looking at the script, but being more designer than coder, couldn't figure out how...
Thank you so much!
I had just deleted my labels widget because it had got too long. Your instructions were clear and easy...thank you!
Wow! Fabulous!!!! I love the labels option, but hated how much room it took up on the side. Thanks!
Hi Amanda:
Thanks for a great widget (label drop down).
Question: is there a way to 'clean up' the look? I noticed that the drop down bar is a little too low, in regards to the Labels title. Thanks.
Scott
Amanda,
Thank you very much!!!!!
I am placing a post on my blog, speading a word about your solution:
http://blogging4good.blogspot.com
Thanks for this code it really helps I am placing it at http://newzaroundus.blogspot.com :)
Am I seriously the only one who doesn't have Label in my html??
Another good one Amanda. :) Thank you!
i've tried this on as well as the top commenters. it's now in my site and i like it. you've got a very informative and helpful site especially to a newbie like me. keep up the good work!
I was just wishing for drop-down labels and then I stumbled across your blog with instructions. Very cool! Thanks so much!
Hi Amanda,
Your blog is really very helpful. I am now using this technique.
However, I am having some problems about the 3-column footer and tab view installation.
I send you a separate mail through Entrecard and I hope you find time to read it.
Thanks really.
hi amanda, i wanted to say a big thank you for sharing this info! i've installed this widget, your instruction is simple & it works well with me! Thanks alot!! A big hug to you!! :)
Jean Chia
Perfect. Thank you!
Thanks for a quick and easy labels fix. My labels had pushed everything else in my sidebar "below the fold". This is so much neater!
BTW, I happened on your blog a couple of months ago while searching for info on customizing templates. Yours is the best I've seen. So far I have converted my standard Rounders3 template to a wide (bt still 2-column) version and started using the post summaries customization. I think tabs are going to be next!
Hi Amanda,
This tutorial is great. Very helpful.
I'm using it in my blog.
Thanks a lot. You're such an angel.
Hi Amanda I really love this and have been looking for something like this to fix my labels so thank you :)
Is there a way to change the size of the drop down box ? its ruining my beautiful template :P :) cheers v
You are a lifesaver. I just did this and it worked just as I wanted. Before I started reading your website this afternoon, I was seriously considering moving my blog from blogger to wordpress because I haven't been able to do what I want with my blog. Now I'm going to continue reading your advice and follow some of your pearls of wisdom.
WOWWWWWW!beautiful trick!!!
Jane if you would change the size this is the STYLE code:
select onchange='location=this.options[this.selectedIndex].value;' style='width:200px; background-color:#fff; color:#000;'
the width is 200px but i think you can change this!
i haxw a request:
see my blog,
http://fotografiaprofesional2008.blogspot.com/
is only a column and I want to position all the widgets with dropdown menu On An Unique Horizontal Line! is it possible? please help me!
Fantastic space saver and used it in conjunction with the Show labels without the post count hack, I've managed to do a drop down menu with the label count. Its all here for all to see at http://royedsworld.blogspot.com
someone else asked and answered this already but i didn't understand the response, hopefully you can clear it up for me. the background of my blog is black and the font is white. is there a way to make the dropdown black with a white font also so it matches? Thanks
beautiful! worked like a charm, thanks!
Hi... works great. Thanks heaps
is there a way to create this for archives in the classic template?
Thanks a lot. It looks much better now. :)
Amanda, Amanda, Amanda. Do you know how brilliant you are? Myself and everyone else here think you are!
I have been looking (whenever I had a chance) to find a drop-down widget specifically to solve my ever-growing list of labels. They all had a (for me!) very complicated installation procedure or too many bugs.
I even changed my template to one that HAD drop-downs (from someone else). But it could only show about 50 labels before running into problems.
Then I discovered your site a couple months or so ago and am now using one of your templates. Very happy with it.
Then yesterday, I found this drop-down widget here. Unbelievable. So simple to install, as you said it would be. I made one change after installation to customize the info box by expanding the widgets first. Again, no problems. I also moved it from the sidebar to
a more appropriate position (for the kind of blog I have).
Life is now good for me thanks to you!
Vic
This was really helpful - thank you so much.
Dina @ mamadinis
Amazing trick...Thanks !!!
http://exclusivearena.blogspot.com/
thanks for help http://www.computersolution.co.cc
Thanks, but how can I integrate this drop down menu with the TOC collapsed labels hack? I think I've done it correctly because it seems to be working. I got rid of the onchange part and replaced it with action="#toc" because I have an a name tag placed above my TOC. Then I made the hack change by changing the expr: in your code to the expr: from the hack. The action="#toc" may not be necessary though. I implemented it into my test blog before messing with my main template first and played around with things.
< and > are removed in the code below so it'll show up.
select action='#toc'
option Select a label /option
b:loop values='data:labels' var='label'
option expr:id='data:label.name' onclick='javascript:showLabelPosts(this)' data:label.name/
( data:label.count/ )
/option
/b:loop
/select
Of course, I've added the additional script and page element according to the code at growyourblog.blogspot.com
Ugh...Correction
It appears to work in Firefox 3.0, but not in Safari.
as always you are a lifesaver :)
Thank you Amanda for your wonderful tutorials.
my blog is http://mumbaidailysnapshot.blogspot.com
and I have mmade it 3-column in minima blue.
I have also put the labels drop down menu, as you have instructed so well. Is there a way of changing the backgroung of the menu. It is white. I want it sky blue to match my blog. And how can I reduce the width a little?
Amanda, thank you! thank you! thank you!!!!
xoxo
Thank You! I had one on my blog, but all it did was cause popups!
I am so happy to have found your tip on doing this and the popups are now gone. lol
This is exactly what I was looking for. Brilliant. However, it's too wide and I can't see the scroll bar. How do I change the width?
I think there is ISSUE with this code... it does show labels in drop down... but after implementing this...
say i select labelw ith 40 posts, it showed all 40 posts on one page, even though i have setup 7 posts per page in settings.
Doing something wrong or more coding needed to fix this?
Umm I don't seem to have that line in my HTML... is it because I'm using a different kind of template?
Is there a way to put it in?!
Woohoo..worked perfect too easy! :-))
i dont have that line of code..help!
i have DOTS templtae
Thanks so much for this tutorial on drop down menu for labels. It helped saved a lot of space and makes the page neater :)
Thanks!!!
شكرا لك ..
استفدت منك كثيرا
English translation:
Thank you ..
I benefited you many benefits
Thank you so much for this.
It really helped my blog alot, especially since I'm blogging for an entertainment blog, there's so many labels!
You're a legend!
http:://iaretalk.blogspot.com
thanks so much
works wonderfully
Once again, so so so so so AWESOME!
WOW I would SOOO much like this widget! But the picture doesn't work, so I don't know what to replace! can you help me?
Thanks, It really helps...
I'm completely new @ this and your tutorial was amazingly simple to use! THANK YOU.
--- Dyn
http://head-lint.blogspot.com/
how about a dropdown menu for blog archive? please..thanks!
NOOO :D
WHERE IS THE CODE? xDD
I finally found the widget I was ever dreaming of and now it says "Service Temporarily Unavailable"
WTF :D:D
How can I change the width of the widget? this one is too wide for my sidebar
Thank you. It works perfectly! :-)
111 Labels with many more to come considering the fact that I've been blogging only for a month. I must say this is my first visit and I'm a fan already. Keep up the great work guys. Thanks a ton
Manish :)
http://surrealnirvana.blogspot.com/
Hello,
My name is mohamed
I just pasted the code in HTML but I am not able to follow the other step
Please help
Thanks Amanda.Finally i found this hack .i am thinking about it for along time.
awesome! works perfectly! thanks a lot amanda!
Thank you very much for the info, but i dont want my label in one list. i want to go back in my orginal stage is it possible?
thanks for sharing it . it is very easy to understand I will implement it in website design
I can't see what is in the second box(the code that I should input. please if anyone can see it copy it for me in your comment. please please please I need this
Thank you, Amanda! Works fine!
Have a nice weekend!
Alper
--
http://www.bulut.de/
Beautiful,however it would be astounding if the labels could present themselves in alphabetical order ;>)
thanks for the trick, helps reduce the clutter on my blog.
<3
Hey Amanda,
How can i add two label categories i.e.,
Online Games:
Arcade
Puzzle
Management
..........
........
........
and
Download Games:
Action
Arcade
Puzzle
Kids
Tycoon
.........
.........
like this i want to add two different label categories online and Download Games...
How can i add?
My blog: http://saku-games.blogspot.com/
I want like this blog:
http://www.gamezlinks.net/
Please help me Amanda, it's Urgent
Thanks in Advance
Thank you so much for this. I am always afraid I am going to do irreparable damage to my blog, but your tutorial was easy and soooo helpful. Thanks again.
Hey, I can't see the code, it says this:
Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.
Apache/1.3.33 Server at bloggerbuster.com Port 80
Can someone copy and paste that code here?
thanks for you
www.tempobox.blogspot.com
Amanda, Help.
when i tried to put this code into blogger, i got this message:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
Hi, Amanda --
It looks like the code is gone (there's a message that the service is temporarily unavailable). Can you repost this? I really need this widget!!!!!!!! :)
Thanks
Hi Amanda,
I got the same error msg as Emily as quoted on top:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
Need your help there. Thanks :)
Hi Emily,
This is for all those who are getting the same error as yours. You get this error because you might be clicking on Expand Widget Templates. Make sure you dont click there and search for the line as Amanda has told, replace it with the piece of code and then this code works fine :) Incase you still face the problem you can get back to me here:
http://dummy-essentials.blogspot.com/
will be glad to help u out.
Oh no. I tested this code out not too long ago and worked great. At the time, I didn't think I needed. Well, now I would love to have it and now the "Server Temporarily Unavailable." Bummer.
Oh Yay!!! I was able to get it! Thank you very much. Having the pull-down labels really helps clean-up my sidebar.
Thank you,
Nicole
Thanks a million
Thanks a lot for the tips!
Thanks for sharing this little tweak. Very helpful.
Got a question, is it really necessary to display 'Labels'? What are the disadvantage of removing 'Labels' in our blogs?
Thanks
Thanks Dummy Essentials for posting the link,,, it really helped.
:(
"Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later. "
good work man
...................................
http://pcsoftwaresdownloadplace.blogspot.com/
...................................
TY for the help :)
Beautiful! I cannot believe how easy that was! I changed the title to "Directory of Post Labels" because my blog is mainly about directories of special needs resources and I was so thrilled to see it work the first time! Thank you!
wow nice article discussion thx for sharing
http://www.top100moneymakingways.blogspot.com/
Please tell me you still have this code?! I've been looking every where for this option. Right now your iframe has godaddy.com. :( Thankyou!!!
hi where is the code?
Where is the code at Amanda? Godaddy.com is where the code should be!
great tutorial..thanks for sharing
Nice post! Introductions and greetings of friendship from me.
There's some great resources/info on this blog, but it seems to have become more and more neglected by it's owner over the past year or so, with things not working properly or similar which is a shame
Uh-oh...where's the code? I don't see it!
Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information
I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.
i am donna pinto,from what I can read. It has been sad news and scam to everyone about spell casters or so. But to me they are so real cause one worked for me not quite two weeks. I traveled down to where his shrine his and we both did the ritual and sacrifice. I don't know about you but spell is real;love marriage,finance voodoo, get your ex back voodoo,love voodoo,lottery voodoo,weight loss voodoo,money voodoo, business voodoo,it's all he does. I used my money to purchase everything he used he never collected a dime from. He told me I can repay him anytime with anything from my heart. Now I don't know how to do that. If you can help or you need his help write him on nativedoctor101@live.com. Thank you.
I am nancy,from what I can read. It has been sad news and scam to everyone about Voodoo casters or so. But to me they are so real cause one worked for me not quite two weeks. I traveled down to where his shrine his and we both did the ritual and sacrifice. and now me and my ex are living very ok now.I don't know about you but Voodoo is real;love marriage,finance, job promotion ,lottery Voodoo,poker voodoo,golf Voodoo,Law & Court case Spells,money voodoo,weigh loss voodoo,diabetic voodoo,hypertensive voodoo,high cholesterol voodoo,Trouble in marriage,it's all he does. I used my money to purchase everything he used he never collected a dime from. He told me I can repay him anytime with anything from my heart. Now I don't know how to do that. If you can help or you need his help write him on (nativedoctor101@live.com) Thank you.
I’ve been visiting your blog for a while now and I always find a gem in your new posts. Thanks for sharing.
I appreciate your blog..Keep posting this type of articles..Its really a wonderful job done by you.
i cant see the cde in second step ,why ? plz help
Good article and very valuable information. Keep it up!
Where's the code?
Do you have a code for the "page" drop down menu?
Post a Comment