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:
To one which appears like this:
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:
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:
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.
