How To Create A Dropdown menu For Labels Widget

Categories labels widget displays your post labels and also help readers to go true your post.
Each label is linked to a page containing posts which fall under that label.
Your labels widget size will be reduced to just one line!And only expand into a full list when you click it.


The image blow is how it look like.

Before applying this hack, you must already have a Label widget installed.
If you don’t have one, go to DESIGN > Page Elements and add it.

Now let’s make the dropdown:

Go to Dashboard > Design > Edit HTML.
Back up your template
Make sure you DO NOT tick the Expand Widget Templates checkbox.==>Use CTRL + F to find the following lines in your HTML code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Replace that line with this code:

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if> <div class='widget-content'> <select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> <option>Click To Choose a Category</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>

save it
Happy blogging