How to create Drop-Down Label Widget For blogger/Blog spot

Blogger offers us to show our post tags as labels in our blog page as a label widget. they gave us a two option 1. cloud 2. list which shows full of your blog labels. in this option you page space will be accumulate more for one widget. to avoid this we can use drop-down widget which looks pretty too.

Now let me start to teach you how to change your normal blogger label widget into drop-down widget.

Before start editing your blogger template make backup and keep it save.

Go to Dashboard > Design > edit HTML.
Make sure you DO NOT tick the Expand Widget Templates check box.
Find the following lines in your html code.

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

if you are not able to find this Go to layout click on edit label widget and find the widget id.

Than replace the 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>


Important note to follow :

1. If you want change the width of the drop down menu then change this value width:100% to any percentage, or pixel (px).
2. To change the phrase “Click To Choose a Category” then find this line Click To Choose a Category  and replace it with your preferred phrase.
3. If you do not want to show post count at the end of each label then delete this line (<data:label.count/>)

Put a comment if any query and suggestion.