How to create Dropdown Labels Menu in Blogger?

Labels are useful keywords to help readers to easily access posts that are categorized under various related topics in your blog. But eventually, the list of labels (known too as categories) will inevitably grow too long and clutter our blog's sidebar and can be rather annoying.

However, you can opt to shorten its display by creating a dropdown menu box which will expand when clicked to offer you the many 'goodies' available inside your blogspot. With this contraction, you'd then have available space at the sidebar for other gadgets that you may want added. Isn't that wonderful?

Though Blogger has not provided a Labels dropdown option as it did for the Blog Archive widget, it can be achieved by customizing the Labels widget via the blog's template.

I stumbled upon some insights on how to do exactly that while preparing my previous post, and without hesitation followed it through with joy and success.

Thus, I'd love to share the simple steps here.

How to create a dropdown menu for Blogger's Labels (or categories)

1. First, you must already have a Label widget in place. If you do have one, skip this step and proceed straightaway to step 2. If otherwise, label all your posts, then go to Dashboard | Layout | Page Elements, add a Labels gadget (learn how to add a gadget here) before you continue the steps below.
   
   
2. To start, you'd need to customize the Labels widget - go to Dashboard | Layout | Edit HTML. Before editing your blog's template, it's advisable to do a backup of it first, by clicking Download Full Template. Then, make sure that you do not check the Expand Widget Templates box.
   
   
   
   
3. Next, use the browser's search function (press Ctrl+F keys) to find the following code (take note that the label name/title in your template might vary slightly) :
   <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
   
   
4. Highlight the above code and replace it with this new set of codes, in the exact manner :
   <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 onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select a label to view</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>
   
   
   
   
5. Follow these tips to modify the codes slightly if you want these two preferences, otherwise proceed to step 6 :
   
   (i) wish to change the title phrase in the dropdown box -
   locate the code: <option>Select a label to view</option> as seen above
   and simply replace the words IN RED to whatever phrase you want (eg. Choose a category) to appear in your blog, being very mindful to alter only the red text and no other.
   
   (ii) do not want a post number count beside each label -
   locate the code: (<data:label.count/>)
   and delete it altogether. That should do the trick.
   
   (iii) (another option: updated June 8 2010) wish to resize the label box to fit the sidebar's width -
   locate the code: <select onchange='location=this.options[this.selectedIndex].value;'>
   and add after the word value;' with a space in between, this additional code: style='width:90%;'
   You can adjust the % to suit your width.
   
   
6. Click Preview to see the changes made. If all's fine with the appearance of the Labels dropdown menu as desired, then click Save Template and View Blog. Otherwise, click Clear Edits and try again.
   

More tips: If you had already save your template after editing the Label widget and wish to modify it again with the preferences mentioned at Step 5 above, you can still achieve that - go to Dashboard | Layout | Edit HTML. This time, you have to check the Expand Widget Templates box to search for the relevant text in your template code to modify the codes.

Related sources that I'm most thankful to:

• Blogging Tips by Amanda Fazani
• Blogging For Good In the Modern World

Hope the tutorial had helped you in achieving a dropdown labels menu in your blog.
Enjoy, keep learning and keep smiling!

Update: February 28, 2010
For those with wordpress-powered blogs/sites, you may want to check my recent article on how to display wordpress tags in a dropdown menu here.