Jul 29, 2008 in

Navigation Menu or Drop Down Menu for Blogger

Here is an easy tutorial to add Navigation Menu or Drop Down Menu in Blogger. With this navigation Menu widget you can display most important links or categories in drop Down Menu format. This navigation Menu is very tiny and you can display as many links you want.

Let us see how to add this Navigation menu widget in Blogger :

Add navigation or drop down menu in blogger


Here is the Default code of Navigation menu :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Type your Navigation Menu Title Here! </option>
<option value=" Url of your Link here "> Title of your link </option> </select></form>


in this above code , you need to edit the text in red to add links .

The text in green color is meant to open links in new window. If you want the links to be opened in same window then replace the text in green to this blank . ( that is delete _ )

if you want to add more links then add the last three lines in violet repeatedly as many times you want.

Look At My code below so that you can get an idea :


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blogger Accessories- </option>

<!-- change the links with your own -->

<option value="http://bloggeracs.blogspot.com/2008/07/jumong-three-column-blogger-template.html">Jumong Blogger Template</option>

<option value="http://bloggeracs.blogspot.com/2008/07/show-date-before-each-post-in-blogger.html">Show Date before each post</option>

<option value="http://bloggeracs.blogspot.com/2008/07/related-posts-widget-for-blogger.html">Related Posts Widget</option>

<option value="http://bloggeracs.blogspot.com/2008/07/hide-navigation-bar-in-blogger.html">Hide Navigation menu bar in blogger</option>

</select></form>



the result is :


How to Add this Navigation menu / Drop down Menu To my blog ?

It's very simple . First edit the code according to your wish and copy the code .

* Go to Layout section of your template .

* Click Add PageElement tab in sidebar

* Select HTML/JAVASCRIPT subtab

* Paste the Navigation Menu code you copied before there and save .

that's it now you can see a beautiful Navigation Menu in your blog.

See you soon with a new hack .

Check Out This Popular Posts

15 Responses So far
gravatar
Dano MacNamarrah
on August 7, 2008 at 6:31 PM  

I've been wanting to install one for a long time. I d I followed your instructions, but my menu came out slightly different! But it's a great start, and I'll keep tinkering until I figure out where I went wrong.
Thanks, Dano

gravatar
Mohamed Rias
on August 7, 2008 at 7:11 PM  

Welcome to Blogger Accessories Dano . I am here to help you guys , If you have any problem let me know. I will do my best to help you.

Regards ,
Blogger Accessories

gravatar
Conan
on September 5, 2008 at 5:26 PM  

Thank you for this post. I've been using this widget on my site for a week or so and it works great. I've decided I want to change the code to have the links open in the same window, but can't seem to get it to work. I deleted the "_" as instructed, but that didn't work for me. Do you have any suggestions? The Jiu-Jitsu Fighter

gravatar
Mohamed Rias
on September 5, 2008 at 9:15 PM  

Hi Conan ,

In the Navigation Menu code search this line

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

replace that line with this

"window.top.location=this.options[this.selectedIndex].value"

Now the links will open in same window.

In my next post on Navigation Menu I will tell How to open certain ( selected ) links in New window and adding Custom CSS style.

regards,
Blogger Accessories

gravatar
Conan
on September 8, 2008 at 6:43 AM  

Thank you very much! That was the change I was looking for. I've implemented it and it's working great. Regarding your upcoming post on selected links, that is really what I would like to do, but have been limited due to my lack of knowledge in this area. I can't tell you how much people like me appreciate your willingness to share.

gravatar
Conan
on September 8, 2008 at 1:25 PM  

Correction...actually it didn't work so well after all. I realized later that I was getting the error message at the bottom left of my browser saying "Done, but with errors on page." I had made a handful of changes, so didn't know why I was getting this error. I spent the next six hours trying to figure out the problem, then I realized the links in the drop down menu weren't working. The easy fix was to revert back to your original code to have them all open in a new window.

gravatar
Mohamed Rias
on September 8, 2008 at 6:15 PM  

Hi Conan ,

I hope you did some mistake while editing the code to open links in same window. To let you know that the script is working fine , I have included a Navigation Drop Menu in my Blog. I tested it in IE7 , IE8 and Firefox. I got no errors in status bar.

If you still have problem ,let me know.

gravatar
Conan
on September 10, 2008 at 7:32 PM  

Thank you for your patience and responses. I did re-insert the code and it's working fine. I can only assume I made a mistake with the editing as you posited.

gravatar
CJ Harley
on October 8, 2008 at 9:20 AM  

Hi. Great tutorial, but how do I get the links to not be in drop down format? I would just like them to be words on my blog. Thanks.

gravatar
Mania
on January 19, 2009 at 12:48 PM  

Nice tutorial its helpfull.

just that _blank its confusing. Tnx

gravatar
Mania
on January 19, 2009 at 12:54 PM  

How sort alfabeticaly? or must be manual import?

gravatar
Jan Ross
on February 13, 2009 at 5:05 PM  

Thanks! I was putting each separate link on the side of my blog, so this will be MUCH more helpful!!

gravatar
Roady
on February 25, 2009 at 3:25 AM  

Great stuff. Cheers =D

gravatar
Sanketh Kumar
on March 24, 2009 at 1:36 AM  

Hey nice one

how can i change the width of the drop down menu?

how do i make the option appear at the center (right now its left aligned)?

gravatar
NiftySensex
on May 16, 2009 at 3:07 AM  

Hi!
Thanx for such a beautiful widget I was looking for a long long time.
Some of the comments and ur reply helped me het it very fine.
Looking further for more.
Now my blog http://sensexniftytips.blogspot.com/
is having a great new look.

Post a Comment

Custom Search
Web Analytics