PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Blogger Tip: Create a Dropdown Menu for your Labels

Posted by on 1st Jun 2009 | 32 comments

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.


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.

32 comments - Leave a reply
  • Posted by Bob on 1st Jun 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.

  • Posted by Heather on 2nd Jun 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?

  • Posted by gans on 4th Jun 2009

    thanks a lot for a cool sript! :)

  • Posted by emma on 10th Jun 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

  • Posted by John on 10th Jun 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!

  • Posted by J on 13th Jun 2009

    Awesome instructions!

    Thanks!

  • Posted by Krista on 4th Oct 2010

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

  • Posted by Marina on 19th Oct 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?

  • Posted by Diane on 26th Oct 2010

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

  • Posted by eusebio on 6th Nov 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!

  • Posted by ssstylish on 6th Dec 2010

    OMG this really helped me a lot !

  • Posted by Sally on 6th Dec 2010

    Perfect. Thank you!

  • Posted by @IlyanaSS501 on 12th Dec 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!

  • Posted by Satyr on 20th Dec 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

  • Posted by gail on 1st Jan 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

  • Posted by Partha S on 20th Jan 2011

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

  • Posted by Radhika on 27th Jan 2011

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

  • Posted by Griff on 2nd Feb 2011

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

  • Posted by Brandy on 22nd Feb 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

  • Posted by emily on 10th Mar 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

  • Posted by emily on 10th Mar 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

  • Posted by emily on 10th Mar 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

  • Posted by emily on 10th Mar 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

  • Posted by emily on 10th Mar 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

  • Posted by emily on 10th Mar 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

  • Posted by swapnildixit on 26th Mar 2011

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

  • Posted by swapnildixit on 26th Mar 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!

  • Posted by Sarah on 1st Apr 2011

    Great tutorial, thank you! Worked a treat!

    My recent post This Blog Has Moved

  • Posted by Yousaf on 21st Apr 2011

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

  • Posted by shannon olson on 27th Apr 2011

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

  • Posted by fjpoblam on 15th May 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.

  • Posted by spade on 16th May 2011

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