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 .




If you like this article , then please help us by bookmarking

19 Responses to “Navigation Menu or Drop Down Menu for Blogger”

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. Nice tutorial its helpfull.

    just that _blank its confusing. Tnx

  11. How sort alfabeticaly? or must be manual import?

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

  13. Great stuff. Cheers =D

  14. 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)?

  15. 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.

  16. I tried to make some changes to this hack but could not do so as my blog’s code did nto accept the script mentioned above.
    Can you please help me out.

  17. this is waht that is not easily found

  18. I added the drop-down menu on my blog…but the links don’t take me to anything. They’re just there. If you click on it, it doesn’t take you anywhere. What do I need to do to link the menu items to a separate page?? Thanks in advance for your help.

  19. Wow….it is great view. I like your way to open link in the new window. thanks for it.

Leave a Reply

You must be logged in to post a comment.