Create simple Dropdown Menu Widget for Blogger blog

Is your blogroll, list of favourite links or whatever list you're displaying in your blogspot getting too long and cluttering your sidebar? Probably, you need some extra space too for other cool gadgets that you fancied but couldn't add as yet for want of space? Ready to spring-clean, yes?

Hence, it's about time to learn how to create a dropdown menu (as illustrated below) for those long extended lists so that your sidebar looks neat and tidy, as well as provide the extra space that you're craving for and make your blog more user-friendly and professional-looking!

- My Favourite Food Blogs - A Whiff of LemongrassElinluv's Titbit CornerNo-Frills RecipesRasa Malaysia: Easy Asian Recipes

A hands-on example of Dropdown Menu box
Try it: click to expand and contract, or choose a link!

Slightly more than a month ago, a blogger friend wanted help to make a dropdown menu for her blog list, something similar like the dropdown menus for archives and labels! Not knowing how to do that then, I suggested that she lists them in a stand-alone Google Page and link to it from a page tab at the top of her blog or as a link at the sidebar.

Nevertheless, her request was not unheeded. Being a wee bit freer a couple of days ago, I set out on a google-search mission to learn how to create a dropdown menu list. Woo...hoo, after some serious experimenting, I discovered one widget yesterday that really stands out above the others - not only it's so very simple to install but the menu title of the dropdown will remain static when one of the listed links is selected. This is one feature that I'm most delighted with, not so with the others which will initially show the link that's being selected and the menu title will return only when you move out of that page.

Follow these easy and quick steps to create a dropdown menu list to your blogger blog :

1. Go to Dashboard | Layout | Page Elements, and click the Add a Gadget link and select the HTML/JavaScript gadget. (learn how-to add a gadget if you're unsure)
   
   
2. Next, just copy this script code below and paste it into the content box of the Configure HTML/JavaScript window :
   
   <select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width: 100%; " class="text_noresize" name="select">
<option selected="selected">Title of Dropdown Menu</option>
<option value="http://your URL link1">Link 1 Title</option>
<option value="http://your URL link2">Link 2 Title</option>
<option value="http://your URL link3">Link 3 Title</option>
<option value="http://your URL link4">Link 4 Title</option>
</select>
   
   Replace the Title of Dropdown Menu (mustard-coloured), the links and their titles (red-coloured) with those of your own.
   
   
3. Click Save and you're done. Simple and easy, right?

An example below to show the relevant changes made to the script code to churn out a dropdown menu list...

And, ta..da..the delightful result!

Go on, start spring-cleaning and see your blog creatively and beautifully transformed!
Happy learning and keep smiling! :-D

Tips: Besides the sidebar display, you can even create a dropdown menu in your blog post (as exampled in the top section of this post) or multiple dropdown menus arranged categorically in a static blog page, by simply replicating the relevant script codes inside the post editor's box!

Other related links:

• Blogger Tips and Tricks, who shared the outstanding script code that I've happily applied. Thank you so much!
• Blogger Stop