January 3, 2009

Drop Down Menu Widget For Blogger/BlogSpot Blogs


One of the most convenient way to display huge lists of links, like BlogRoll or favorite sites etc. is using a drop down menu. It looks like this:


The tool is very useful for webmasters and bloggers, and equally simple is the coding required to put it on your blog/web site.

Follow these simple steps, to add a Drop-Down menu to your blog:
Log in to Blogger, go to "Layout" section, then click on "Add a Gadget", and select it as "HTML/JavaScript"
Now put this code in to it:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>- Your Title - </option>

<!-- change the links with your own -->
<option value="http://yourlink.com">Title One</option>
<option value="http://yourlink.com">Title second</option>
<option value="http://yourlink.com">Title Third</option>
<option value="http://bloggerstop.net">Blogger Widgets</option>
</select></form>
Replace the blue and red parts of the code, as per your requirements !


39 comments:

Jerry ! said...

Just checking these new smilies....never saw them in any blog ;))

carlota said...

you have a great blog...lots to learn.

Divya Sai said...

:)

chelsea said...

Hi there, thanks for the info! I was wondering if you know of a way to have a drop down menu in blogger but with your own images as the button and drop downs, instead of the drop down it's in now.
Thanks for your time.

Divya Sai said...

Soon there will be a post on multi-level step down menu, you can use that one.

Bean Sprout's Cafe said...

thanks very much :D

Divya Sai said...

Thanks dude !

@ Chelsea,

As I promised, here's the post on multi-level drop-down menu:
Multi Level DropDown Menu For Blogger Blogs

GK said...

yea this is cool stuff 8-}

therock said...

great! this is what I'm looking for. simple and usefull :) thanks man

Kirk said...

Thank you so much for the info!!! I have read all these other Blogs with instructions. I spent hours on getting a drop down menu. None of the others worked.
With your instructions I (not a techie by any means) was able to build a "Drop down Menu" in a few minutes.

Divya Sai said...

I am glad to know that Kirk...thanks for commenting and your feedback !

Shivani said...

thanx buddy ;)
http;//Xperiencemedia.blogspot.com

B Donald said...

Thanks for the drop down menu code, I have tied several others but had issues with all but yours.
Is there a code that can be added so you would be able to use the Configure interface instead of the HTML?

Divya Sai said...

I couldn't get your point Donald, can you plz rephrase it !

Ika said...

Thanks for the info :D

TJ Sanders said...

Thanks for the info! On my blog, when I navigate throughout the choices within my dropdown menu, I'd like it if it opens up the page I selected on the same page. You have it set up to when I select something else, it opens up in a new page.

What part of the cod eneeds to be edited to fix this?

Thanks!

Divya Sai said...

Hello Sanders

In the code above change this line:

onchange="window.open(this.options[this.selectedIndex].value,'_blank')"

to this:

onchange="window.open(this.options[this.selectedIndex].value,'_self')"

PC411, BITCHES! said...

Just a quick question... what if I don't want the menu option to go to link?
I just want it to open some information.
For example, if you click 'hi' in the dropdown menu, a piece of text appears saying 'hello'

Divya Sai said...

@PC411

you mean something like a pop-up?

Stan said...

hi, thanks so much for the awesome tips.

Sai @ Blogger Help said...

You are most welcome Stan !

SymbianFile said...

I need Go button After selecting.. ;;)
please can you help for this?

Divya Sai said...

If there's no relation between the "go" button and the selected drop-down item, then you can simply add a HTML button button after the menu.

Caroline said...

I like this single-level drop-down menu (I am only using it as a basic archive for my blog posts, so I don't need more levels), but I would like be able to change the background and text colors to match my blog. Is that possible?

Caroline said...

...I was also wondering if it is possible to center it, or somehow change the padding, so that the menu does not appear on the left side of my sidebar.

Divya Sai said...

Hey Caroline,

This widget is a simple html based widget, to add a more customizable widget, use this one:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Instructions are really simple, and in case of doubts feel free to comment/mail me.

Bloggers said...

awesome ;))

KING SINGH said...

thanks for the valuable post !

www.king--singh.blogspot.com ! I got help for it ! i hope , in future more valuable posts will be here for blogger !

Rachel said...

Is it possible to change the font and colour within the widget?

Sai - Blogger Widgets said...

For a customized widget, use this widget:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Clair said...

I really want to install this but have a feeling it's over my head!

JVSTREAM said...

hello. how can i make many of them in a single line? can i align them? thanks. your blog really helps...

Mafia Wars said...

thank you very much i was looking for this widget, very cool site

Livia said...

thank you very much for these instructions!

Jacqueline said...

This fabulous widget worked like a charm...so easily applied! Thank you so much, truly appreciate your sharing and God bless!

Noname said...

I want to use it on wordpress. Is it possible? what do i need to change to make it work?

The Funky Bunch said...

Ok, so I was able to create the drop down menu...but when I click on one of the links it doesn't take me anywhere. So how do I make it so it takes you to a specific page of my blog. Thanks so much for your help!

Sai - Blogger Help said...

Instead of "http://yourlink.com" type the url-address of the pages/websites - whatever you want.

Anonymous said...

i would like to have the background of that drop down menu in some other color like black. for example see this link

http://www.basicslife.in/store-locator.php

in tha above link there s a drop down menu to select cities. it is in a kinnd of black colour...is it posible to change thw white background of dropdown menu?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]Seeking4Hosting[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy