Blogger Tip: Create a Dropdown Menu for your Labels

By Amanda Fazani | Blogger

Jun 01

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.

Follow

About the Author

Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

Bob June 1, 2009

I like float-over menus better. Granted, they’re harder to program, and might not show up nice on all browsers, but they’re still better looking.

Heather June 2, 2009

Thanks! This was very helpful… though I have a 3 column template and the labels box is too big for one of my side columns. I had to put it above my posts, which I'm not crazy about. Is there any way to resize the widget to fit into a smaller side column?

gans June 4, 2009

thanks a lot for a cool sript! :)

emma June 10, 2009

thanks for the good instructions, i had trouble making it work at first but then realized i hadn't read the directions carefully.. derrr. now it looks great!

paranoid emdroid

John June 10, 2009

Thank you. Your instructions were super, very clear.

This worked perfectly the first time and it is just what I needed to clean up my blog.

Wonderful, great, efficient, helpful, needed — thank you!

J June 13, 2009

Awesome instructions!

Thanks!

Krista October 4, 2010

This was so helpful and simple! Thank you so very much!
My recent post Fall Nail Art

Marina October 19, 2010

This is great! And the tip works perfectly too.
Thanks

I hope more such tips will be provided in view of more flexible and user friendly templates. Can the same tip be applied to posts, so that one may have a dropdown of all posts in a blog, with the possibility to arrange items either alphabetically or chronologically?

Diane October 26, 2010

Many thanks, this worked like a dream. Diane
My recent post Travelling Back to the UK – Part 3

eusebio November 6, 2010

Your instructions were straight forward,yet it took me a short while to become more familiar with my Blog to be able to add: Labels,find the line and replace it for your suggested line so that I would have a drop-down menu.

thank you and keep up with the good job!

ssstylish December 6, 2010

OMG this really helped me a lot !

Sally December 6, 2010

Perfect. Thank you!

@IlyanaSS501 December 12, 2010

OMG~this is super easy!..thank you so much for posting this. I'm first time doing this and this is not difficult at all. Once again, thank you!

Satyr December 20, 2010

Thanks a lot for this tutorial! It was easy to understand and to do in practice – and the effect is wonderful – a beautiful drop-down menu! I invite you to take a look at satyr78lp.blogspot.com.
My recent post

gail January 1, 2011

Oh my gosh! This is THE easiest tip I've ever found relating to my blog! So easy to understand and actually accomplish! THANKS so much! I will be doing a blogging tips post soon and I will definitely link to this post!
gail
My recent post Photo Gallery II

Partha S January 20, 2011

thanks for this easy to read instructions. i applied and the code is so far working fine for me.. :)

Radhika January 27, 2011

Thanks for the Instruction. I made the change per mentioned to my blog, it looks cool.

Griff February 2, 2011

This really helped clean up my Blog
Changing Labels to drop-down format
My recent post 48977 HRC Toronto 2010

Brandy February 22, 2011

This was a breeze and very helpful. Thank you for an easy to understand tutorial.
My recent post Guest Post- Cost Verses Benefits of Smart Phones by Nicole Rodgers

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

emily March 10, 2011

yay! thank you SO much for such an easy to use tutorial! I've hunted and hunted for one and this was PERFECT!
My recent post Mr Fix-It

swapnildixit March 26, 2011

I could not find the line you asked me to search. Probably, because I don't have label list existing already.

swapnildixit March 26, 2011

thanks very much I figured out that I just needed to paste that code.

1. I pasted it just after <body> tag began, and realised that it needed to under a section.
2. Found a random section, pasted code within it, changed to layout and then simply dragged and dropped it where I wanted.

Cool! Thanks a lot for this!

Sarah April 1, 2011

Great tutorial, thank you! Worked a treat!

My recent post This Blog Has Moved

Yousaf April 21, 2011

Great tutorial, thank you! Worked a treat!
My recent post free mobile wallpapers for mobile

shannon olson April 27, 2011

thanks so much! worked!! yeah and looks so much cleaner
My recent post Vintage Suitcases

fjpoblam May 15, 2011

Now, come up with one that doesn't say "No posts with [topic]" on the second page. (It should say, "No older posts with [topic]". It'd be nice to have it honor my setting (1, in my case) for number of posts displayed per screen, too. Ah well, to dream the impossible dream.

spade May 16, 2011

I wanna change the font to "verdana" and hide the number of post. please send me the code if you know.

Comments are closed