If you host your blog on the Blogger (blogspot) platform, and you have significant number of labels on your sidebar, you might be looking for a suitable solution to show them, but also save the expensive space for other elements. These two tasks can be achieved by using the option of displaying your labels in a simple drop-down menu. Many bloggers already use drop-down option for long lists of labels (categories), which minimizes clutter and enables information to be displayed in the sidebar neatly.
While Blogger offers a dropdown menu option for the Archives widget, you will not be able to find an option to do the same for your labels. In this post, we will review two ways you can use to convert your regular Label list into a drop-down list.
Method 1
Method 1
1. Template Backup. As usual, when you just think about making any changes to the template code, it is strongly recommended to make a complete back up of your existing template. This ensures you can easily roll back and restore your current, working template if you make any 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.
2. Ensure you have a “Labels” widget in your Blogger template. If you do not have a Labels widget activated in your template, go to Layout>Page Elements and add a Labels widget using the “Add a Gadget” link above your sidebar. Definitely, your posts should be labeled as well to transfer the related content to the activated widget.
3. Go to Layout > Edit HTML in your Blogger dashboard. This time, DO NOT check the "Expand Widget Templates" checkbox!
4. Search for the following code (note that the name of the label in your template might be slightly different):
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
5. Replace the above code, with this:
<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;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<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;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
6. Modifying the Widget. 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 page 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'>
Method 2
As you understand, the first steps of the code modification will be similar to the method 1, so I will skip the introduction, which you need to backup the template first before doing any modifications.
3. Go to Layout > Edit HTML in your Blogger dashboard. This time, CHECK the "Expand Widget Templates" checkbox!
4. Now look for the following code in your 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'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
5. Note that you need to replace only the part of the displayed code IN BLUE. All the remaining text is provided for easy reference. So, replace the text IN BLUE with the text IN RED below:
<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>
<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>
No matter, which method you choose, at the end of the performed modification save the template and back it up with a new name. Do not overwrite the backup file you created at the beginning, since you want to try the option for some time and decide you do not see any problems or performance drawbacks.
Sources and Additional Information:
