Creating Dropdown Menu for Blogger Labels!

To create dropdown menu for labels in blogger it is required to edit few HTML code in blog template. To create dropdown menu for labels in blogger follow the instructions.

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Make sure the Expand Widget Templates checkbox is Un-Checked.
5. Look for the following lines in your HTML code:

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

6. Highlight the above line of code & insert the following code right over the code (i.e. replace the above code 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'>

<br />

<select onchange='location=this.options[this.selectedIndex].value;'>

   <option>Select a Label to View</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>

7. To alter the phrase “Select a Label to View” as you desire make the changes in the following highlighted section in below for the above code:

<select onchange='location=this.options[this.selectedIndex].value;'>

   <option>Select a Label to View</option>

   <b:loop values='data:labels' var='label'>

Drop Down Menu in Blogger

Configuring Labels

8. Save the Template.   
9. Now go to Design > Page Elements & configure the labels.
10. Finally Save and view your blog.

Hope this tutorial will help to convert regular blogger's labels to drop down menu. Please feel free for comments & suggestion.