Dropdown Menu for your Blogger Labels

Firstly, you should make a complete back up of your existing template. This ensures you can easily restore your current, working template in the event you make a mistake.

To make a back up of your current template, go to Layout>Edit HTML in your Blogger dashboard and click the “Download Full Template” link near the top of the page. This will offer the option to save your current Blogger template as an XML file to your local computer. Be sure to save this file in a location you can easily find later.

Once you have made a back up of your template, you can proceed to edit your labels list and create your dropdown menu.



To proceed with this tutorial, you must ensure you have a “Labels” widget present in your Blogger template. If you do not have a Labels widget, o to Layout>Page Elements and add a Labels widget using the “Add a Gadget” link above your sidebar.

Go to Layout>Edit HTML in your Blogger dashboard (if you are not already looking at this page) and ensure you have NOT checked the “Expand widget templates” box:



Now using your browser’s search function, locate the following line in your Blogger template:

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

To one which appears like this:



The text "Select a label" which can be altered to any text like the one I did. Just replace choose a label to view in red with the text you want.

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose a Label to View</option>
<b:loop values='data:labels' var='label'>