- Log into your blog.
- Click Template
- Then click edit html.
- press the ctrl key and f simultaneously which will give you a search option. Type in label to quickly locate this code: <b:widget id='Label1' locked='false' title='' type='Label'/>
- Replace this code <b:widget id='Label1' locked='false' title='' type='Label'/> with the following:
<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</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>
If you would like to change the width of the menu, change the percentage higher or lower (coded in purple) to fit your sidebar.
Part 2
Look for:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Highlight this complete line, and replace with the following code (copy to your clipboard and paste in place of the line above):
<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'>
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select 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>
Now preview the changes you have made to your template. In place of the long, reular list of labels you should now see a neat drop down menu. If all looks well, you can proceed to save your adjustments to your Blogger template.
