Blogger Tip: Create a Dropdown Menu for your Labels

Our sidebars can become cluttered easily with information and widgets, particularly if we have a long list of labels (categories) . Many Blogger users like using drop-down lists for long lists which minimizes clutter and enables information to be displayed in the sidebar neatly.

While Blogger offers a dropdown menu option for the Archives widget, we do not have the option to enable a dropdown list for our labels. So in this tutorial, I will explain a simple method you can use to adapt your regular Label list to become a drop-down list instead, offering a neat and concise solution which will minimize clutter in your Blogger sidebar.

What we will achieve through this tutorial

In this article, I’ll explain how to transform your Blogger label list from something which appears like this:

Regular Labels List for Blogger

To one which appears like this:

screen-shot02-jun-01Dropdown list, expanded view

This customization can be achieved in a few easy steps with minimal adjustments to your Blogger template code.

How to create a dropdown menu for your 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:

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

Making adjustments to your dropdown menu

Once you have created your dropdown menu for your labels, you will be able to move this widget to a different location in your template through the Layout>Page Elements section of your Blogger dashboard. You can also edit the properties of this widget to change the order in which labels are displayed by clicking on the “Edit” link for the Labels widget:

screen-shot05-jun-01

Here you can choose between displaying your labels in alphabetical order, or by their frequency (with the label linked to the highest number of posts first).

You can also choose to remove this widget altogether from your layout. However, if you remove this widget and create a new Labels widget, you will need to customize this again (using the steps outlined above) if you wish to create another drop down menu.

To alter the phrase “Choose a label to view” which is visible when the drop down menu is contracted, you will need to go to the Layout>Edit HTML pae of your Blogger dashboard and check the “Expand widget templates” box. Then search for this phrase in your template code.

Simply alter the wording of this phrase to something more suitable for your blog, being careful not to alter any of the surrounding code.

To clarify, here is the line of code where adjustments will be made. The text which can be altered is highlighted in red:

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

Final thoughts

I hope you have found this Blogger tutorial useful and that this explanation will enable you to convert your regular Labels list into a dropdown menu with ease.

Please feel free to leave your comments and suggestions below.

  •  
  •  
  •  
  •  
  •  
Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

32 Comments

  1. Bob June 1, 2009
  2. Heather June 2, 2009
  3. gans June 4, 2009
  4. emma June 10, 2009
  5. John June 10, 2009
  6. J June 13, 2009
  7. Krista October 4, 2010
  8. Marina October 19, 2010
  9. Diane October 26, 2010
  10. eusebio November 6, 2010
  11. ssstylish December 6, 2010
  12. Sally December 6, 2010
  13. @IlyanaSS501 December 12, 2010
  14. Satyr December 20, 2010
  15. gail January 1, 2011
  16. Partha S January 20, 2011
  17. Radhika January 27, 2011
  18. Griff February 2, 2011
  19. Brandy February 22, 2011
  20. emily March 10, 2011
  21. emily March 10, 2011
  22. emily March 10, 2011
  23. emily March 10, 2011
  24. emily March 10, 2011
  25. emily March 10, 2011
  26. swapnildixit March 26, 2011
  27. swapnildixit March 26, 2011
  28. Sarah April 1, 2011
  29. Yousaf April 21, 2011
  30. shannon olson April 27, 2011
  31. fjpoblam May 15, 2011
  32. spade May 16, 2011