How to Make Dropdown Menu HTML Label Widget for Blogger

t the first time I started blogging, I have asked my self how to do this thing. Yes, I'm talking about how to create a Label (catagory or tag). You know that the Labels are useful keywords to help readers to easily access posts that are categorized (tagged) under various related topics in your blog. Each label is linked to a page containing posts which fall under that label.
The more you create posts the more your have labels. It will grow too long and clutter your blog's sidebar and sometimes it can't be good for your sidebar. However, you can control of your labels on sidebar to shorten its display by creating a dropdown menu box which will expand when clicked to offer you the many 'goodies' available inside your Blogspot.


1. Login to your Blogger account
2. From your Dashborad > Design > Edit HTML
4. Always Download full template for backup
3. Find this code

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

4. 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>Select 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>

You can Change the width of the dropdown menu by changing 100% to any percentage, or pixel (px).
You can Edit  “Select to choose a label” to any phrase you want.
This Code line (<data:label.count/>) is for post count, if you do not want to show post count at the end of each label, delete this line.

6. Save the template
7. That's it!

If You Like This. Please! Drop a Comment And Share This...