Display Blogger Labels In A Drop Down Menu In Blogger

A labels widget displays your post labels. Displaying labels with lists or cloud menu is good enough for new blogs or blog with few posts and labels. It will occupy a lot of space in blog's side bar. Using this hack, labels widget size will be reduced to just one line & will only expand into a full list when you click it.

DEMO

How To Create Dropdown Menu For Labels Widget

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

<b:section class='sidebar' id='sidebar' preferred='yes'>

• Now Paste the Code Shown Below just below/after it

<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>

• Now save your template

CUSTOMIZATION

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

Like it? Share it.