Change List of Labels to Drop Down Labels

To save some space in your sidebar, you can try this small hack to your existing HTML code. I found this code from Ramani in Hackosphere site. You can see the example on my Category sidebar. Instead of displaying the list of labels, now displaying the drop down menu. Blogger only supports Archives options such as Drop-down menu, Hierarchy (Expand/collapse).

Assuming that you have already created labels and added a page element for labels in your sidebar, here's what you need to do to convert the list of labels to drop-down menu.

First, from the Dashboard click Layout and click Edit HTML. Tick mark the Expand Widget Templates. Please make backup using the Download Full Template to your hard disk.

After that, try to find the following code on your template.
(My title is Category, please change it according to your label title)


<b:widget id='Label1' locked='false' title='Category' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Replace the portion above in red with the following code snippet.

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Save the template and you got drop-down labels!


Source : Drop-down labels - First blogger beta template hack!