How to Make Blogger Labels as Dropdown Menu
Blogger label widget is essential in every blog as it is one of the way of categorising all your content and making sure that it is targeted to the right audience. However, as you grow your blog, your labels list start to grow and finally becoming such a long list on your sidebar that leaves you no space to monetise your blog with adsense ads ? A dropdown label menu will solve your problem.
Step 3: Hit Ctrl + F and type Label1. You will find the coding in no time. Now you have to replace the following code.
Step 4: Highlight the code in GREEN below and replace entire line. After it is done, click Save Template !
<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/>
undefined<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
This is the end product of the customisation.
If you need to change the width of the dropdown menu, just go back to template edit, Ctrl + F Label1, change the 100% to any percentage or px.
If you does not like the dropdown menu, just delete it from the Labels from the Layout and apply a new Label, it will restore to the original state.
 |
| My right sidebar is packed with labels |
Creating a dropdown label menu is not that difficult as it seems and it only takes perhaps, five minutes for it to be completed. I will be using one of my blogs, Cranepedia , a blog for construction mobile crane as an example how to do it.
In order to change your label into a dropdown menu, you must first add the labels into the blog or the html codes would not be shown in later part when you are trying to amend the html codes.
Let Get Started !
Step 1: Go to Blogger and click on Template
Step 2: On the Template page, click "edit HTML"
Step 3: Hit Ctrl + F and type Label1. You will find the coding in no time. Now you have to replace the following code.
Step 4: Highlight the code in GREEN below and replace entire line. After it is done, click Save Template !
<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/>
undefined<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
If you need to change the width of the dropdown menu, just go back to template edit, Ctrl + F Label1, change the 100% to any percentage or px.
If you does not like the dropdown menu, just delete it from the Labels from the Layout and apply a new Label, it will restore to the original state.
