Tech Tuesday: Drop Down and Give Me 20 (Labels)

A reader, Jeanine P, asked last week about how to make your labels into a drop-down menu. Great question! Sometimes labels seem to run amok with the sidebar, especially if you write on a variety of different topics (like me) and can't seem to corral them together into one category.

By putting them in a drop-down menu, you certainly free up more space in your sidebar. My labels are shown circled in orange below. They used to run about 4 blog buttons-worth down the page.
It's very simple to put your Archives into a drop-down menu, since Blogger makes it easy to do. When you go into the widget for your Archives, there's a box that you can check to make them appear as a drop-down, rather than a list. There are lots of customizable features in that widget too, such as the way you want the date to look, etc. But I'm getting off-topic, yet again.

To make your labels all snug and tucked in to a drop-down menu, log into your Blogger account.

1. Select the "Layout" tab.
2. Click on "Edit HTML".
3. As usual, back up your template.
4. Check the "Expand Widget Templates" box
5. Find (CTRL+F) this section of code <b:widget id='Label1'. There is more code to the line, but it seems like nearly all Blogger templates have at least that part of the code. If you don't have that term, try searching for <b:widget id= and finding the one that corresponds to your labels. It will have some sort of "label" term next to it. The full line of code might look like this <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
6. Once you've found that, you'll replace that line with the following (copy and paste it over the above code)
<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>
7. If you'd like to change the title of the labels to something more sophisticated (mine are called "Topics of Interest"--la dee da), you'll just need to replace the word "Labels" in the first line of the code above in RED to the title that you'd like to call it.
8. Preview your work, and if you like-y, then save-y.

Good luck!