18 A drop down menu for your labels Thursday, November 22, 2007 /

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:

1. 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.


2. 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