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)
- 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.
- 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.
- 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'/>
- 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'>
<option>Select a label to view</option>
<b:loop values='data:labels' var='label'>
- 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.
- 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.
Related sources that I'm most thankful to:
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.