How to Create Drop down menu for Labels widget

Normally labels arrange in a linear manner and A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar!

Fortunately you can prevent that from creating a drop down menu. Your labels widget will be reduced to just one line! And it only expands into a full list when you click it.

Now let’s make the dropdown

1. Go to Template > Edit HTML.
2. Make sure you DO NOT check the Expand Widget Templates checkbox.
3. Look for 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='Labels' 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 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><b:include name='quickedit'/></div></b:includable></b:widget>

Note - Remember to download a backup template before editing your xml template.

Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).

You can change “Click to choose a label” phrase in line 8 to your preferred phrase.

Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.

Preview before saving.