Drop Down Menu for Labels
Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....
My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.
Step 1 - find this code in your template:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>Step 2 - replace that line with this:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!
EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.
EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>EDIT 09/07/08: Here is an example of the drop down box before expanded and after:
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</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>
46 Comments:
Your readers keeps you on your toes because you have amazingly strong affection for your readers. Thanks for the useful tips.
I am the person that requested this feature and I now have it up and running. Thank you so much for doing this for me and any other blogger that will find it useful. This, together with your tab instructions, have now given me a seriously clean (for me!) blog. Thank you once again ..... Pam
Dear Annie,
thank you for sharing this. I noticed that the counter (i.e. LABEL(#)) is not showing up in the list box. Do you have an idea how to solve this?
Thanking you.
Clemens Vargas Ramos, Germany
@Clemens Vargas Ramos, yes, I do know...I have that code somewhere! When I find it, I will post.
thanks for the tips...really helped me a lot...keep posting.
@Clemens Vargas Ramos, I have edited the post to show how to add a label count.
great tips,,but do u have example 4 this tips??
@reese, the drop down box is like any other. I don't have an example at this moment, but look in the comment box of this blog. Beside 'Comment as:' is a drop down box.
@reese, I just put the code in a test blog and copied the images for an example for you!
Thank you sooooo much! I've tried a bunch of different sites, and this is the only one that works and doesn't cut off half of the drop down menu. Thank you so much for developing and sharing this with us!
Thanks Annie for the drop down label menu. I applied your 08/21/08 label count code in Step 2. The widget came out fine but without the count.
Please view result at
My Download Corner
Replace un-expanded tag
b:widget id='Label1' locked='false' title='Labels' type='Label'
Regards,
Shrek from MyBlogLog
Thank you for your post. It works great. And it makes blogging a lot cleaner.
Ok cool, that was clear as mud. It all makes sense now Annie. Thanks.
Thanks for the information... Dear,,, really a nice post. Keep it up.. Cheers.
Hi nice post... Dear keep it up
Cheers Annie that was an easy to follow guide, had no problems what so ever, nice work and blog, keep up the good work!
Regards, bzrwon
Hi, thanks for you hard work. I keep getting this error though. Wonder if you could advise.
regards
Cliff
our 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 "".
@Cliff, please read this post:
Blogger Error Messages. Maybe that will clear up things a bit.
Interesting to see how this gets done in blogspot. Does blogspot has sidebar widgets too?
Hey this is great... almost what I am looking for. But I have a question about the drop down list - is there a way to make the list expandable with sub-categories? (Or, is there a way to make the hide/show expand/collapse have layers?).
Such as:
Labels
---Books
---Fiction
---NonFictions
---Biography
---News
---Weather
---Sports
---Football
---Soccer
---Other
Something like that?
Thanks much. Great work here.
Hi Annie, I stumble on your blog and find interesting about this label mod. I tried without luck both steps 1,2 and 1,2(modified). It gives me this error:
XML error message: The element type "b:section" must be terminated by the matching end-tag "".
What will I do, please help. Thanks.
@CreativeWorks Pictures, read this post: Blogger Error Messages
thx for the tutorial, it works...
thanks for the trick... it's very helpful.
It gives me an inspiration to build my table of content using a scrollable lable.
You may see the result on this blog:
Inventory Management
Awesome. Thank you!
Excellent tutorial, nicely written and easy to follow. I will surely come back for more in future. Keep up the good work!
Excellent, easy to follow!
Thank you!
In order for this to work, you have to leave the "expand widgets" box unchecked.
I kept getting the not well parsed error message too until I read the comment just above this one. Leave the expand widgets box unchecked and it should work without errors.
Thanks for always being so helpful for newbies like us! May you continue to share informative and helpful posts...by the way, I want to ask something, have you tried blogging on WordPress? I have a blog there and I wanted to put videos on it but I don't know what plugins to use..what plugins can you recommend me? thanks in advance.
@micro...sorry, but I haven't used WP.
I am very interested to seeing this tutorial.
nicely written and easy to follow.
Hi Annie,
Great trick, it actually works.Keep it up for future.I have also a link which will may contribute some thing for
Drop Down
peace, Annie!! totally grateful to you here!! it's exactly what i needed!! great tutorial, and i'll drop to your place again, for sure:))... a little request: would you please add a note about deleting not only the first line of the existing (default) labels-widget code - for these who experience problems with error messages on saving the template; just like me *ashamed* :)).
thank you again; stay healthy & happy!!!
I keep trying to change different things to make this work, but every time I replace with the code above, I get this error 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-contents" must be terminated by the matching end-tag "".
Really odd, because I'm not changing anything or replacing anything that has this code in it. Suggestions?
Thanks!
dphotography:
i think the problem will be resolved if in step2 you replace not only the road from step1 but all the default widget code (it ends with the first "" after the row from step1). at least, in my case this was the answer. try it!! luck!!
thanks
Thank you, thank you, thank you! :)
hey Annie, I will be happy to try it out on one of my blogs, Like for example as a widget on the left hand side. I have one question regarding a wordpress blog, will ask it on a newer post, I would like to hear your answer.
thanks
Jacek
Hello,plz plz plz i need help,i m getting this message
"Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:section-contents" must be terminated by the matching end-tag ""
i really need this plzzzzz drop me an email with the solution...
balani.abhi@gmail.com
@abhi, see if this Blogger Error Messages helps.
I was just wishing for drop-down labels and then I stumbled across your blog with instructions. Very cool! Thanks so much!
Recently i have seen other solution for this problem, but i can't remember the site. I will try yours of course too. Thanks for good work!
Hi I m trying to add this my blog but it was nit working, it was showing code was not parsed correctly, can you help me with that.
my blog is
datastage
hey Annie, I will be happy to try it out on one of my blogs, Like for example as a widget on the left hand side. I have one question regarding a wordpress blog, will ask it on a newer post, I would like to hear your answer.
Thanks Annie. This works fine but doesn't display all the label post titles on one page. It's quite erratic. Some labels displays 6 on the first screen, the remaining on the next screen. Some labels are split into 3 screens. The number of titles on each screen varies. How do I fix this? I have searched but couldn't find an answer. Thanks & regards.