Thursday, March 1, 2012

How to Add Navigation Menu Bar to Blogger Blog [Updated]

Without a navigation menu bar on your blog, it will be difficult to scroll through pages. creating menu tab below your blog header has been made simple with the outcome of this new blogger dashboard. you can now easily create menu tab on you blog and also direct the links to other external pages without using html codes. you can link your menu tabs to a page or post on your blog, a page on another blog, labels/categories, or any external link you want. in one of my post, i wrote how to add top navigation menu bar to blogger that will link to other external pages and not only static pages using html codes. But with this new features on blogger dashboard, you can do every thing without the help of html codes. And in this tutorial, i will guide you on how to add navigation menu bar to your blogger blog without using html codes.

Creating navigation menu bar using this method will also display all your menu on blogger mobile template unlike when you are using the html code type.

To Get Started
Log in to your blogger dashboard and click on the blog you want to work with. If you are still using the old blogger dashboard, please switch to the new blogger dashboard at least for the purpose of this tutorial. Ok now after selecting the blog, click on Pages (see at your left hand side) as shown in the picture below


To create a new page like About me, Contact etc, just click on New Page then select Blank page. you will see a page editor which you can use to create pages.
Now to link to other pages URL, get all the pages and external link URL you want to create menu tabs for, click New page and then select Web Address as shown in the picture below


A new window will pop up asking you to enter page title and URL  thus


Enter the name you want for the menu and the url address to the web page and save. The next thing to do is to choose how or where you want your menu tab to appear. so click on "Show Pages as" and set it to Top tabs this will make you menu tab appear below your blog header. Then save. see below picture



You can arrange your tabs and choose or hide the appearance of any menu on you blog. to do this, go to Layout and select edit then you should see a new pop up window. here you can select menu tabs you want to be visible by ticking it or untick if you want to hide it. you can also rearrange it accordingly by dragging and dropping to change the order of menu tabs. save your work and preview you blog to see the changes that' all.

Read Also:
How to Submit your blog to Technorati
Controlling widget and adsense placement on your blog

I hope this info helps? feel free to share this post with your friends using the like/share buttons. you can also subscribe to my blog below this post for more tips delivered to your inbox. or simply ask any question by using the comment box below. subscribe and never miss any future post through this link CLICK HERE TO SUBSCRIBE Once entered, you will have to check your inbox for a confirmation email containing a confirmation link. Once you VERIFY your email by clicking on the confirmation link in the message, you will never miss any future articles again.

33 comments:

  1. Nice blogging. Keep it up! Please visit my blog
    http://gallery-earth.blogspot.com

    ReplyDelete
  2. My dear bro.

    i tried for find out how adding navigation bar it most easy way. after two days i find here and successful to add in my blog. thanks you vary much.

    ReplyDelete
  3. Very nice. Please also visit this link

    http://linux-mac-windows.blogspot.com/

    ReplyDelete
  4. nice one. thanks for the help
    http://www.howtogetrevenue.co.cc

    ReplyDelete
  5. Very nice post...really helpful...

    please visit to see how i have designed my website

    www.smscollections.in

    ReplyDelete
    Replies
    1. please could you help i looked at your page and it is great i cant get the coloured bar behind the tabs to stop at the end of the white it goes right across the page, i see yours does not how do you do that. Thanks Moira

      Delete
  6. nice tutorial..
    tq for your tutorial... :)

    ReplyDelete
  7. I vl apply to my blog www.kmdeepakkumar.blogspot.in

    ReplyDelete
  8. this is also great

    http://www.theberrycracks.co.in/2012/08/how-to-add-navigation-menu.html

    ReplyDelete
  9. Hello webmaster. I am a novice and do not know how to customize my blog at autoinsurancemarket.blogspot.com I want to:

    1. Link all my blog MENUS to their corresponding pages (i.e. the 'Contact Us' menu should link to the Contact Us page. The same goes for the other menus)

    2. Remove the 'Read more' from all my post (i.e. all the post should display fully on the first page with links)

    ReplyDelete
  10. pls help me to look at this blog i have been try it but it was not working out with it.http://thespiritofbiz.blogspot.com/

    ReplyDelete
  11. I have implemented this in my site www.indiastudyzone.com ...check it

    ReplyDelete
  12. How to give a website look by changing favicon,Header and how to use the social networking plugins?
    Help me to make better looking of my blog.

    http://www.onlinebodycare.com/

    here is my blog http://online-body-care.blogspot.in/

    ReplyDelete
  13. I'm so happy I stumbled across this blog- this was so quick and easy! thank you so much! <3

    ReplyDelete
  14. Thank you so much!! Now I just need to figure out how to use our labels and have them appear in the Navigation bar. Thank you again!

    ReplyDelete
  15. This is very helpful for me. Thank you So much.

    ReplyDelete
  16. hey thanks for the help it worked out fine but wheneve i share my page on FB it shows this under the link /*URL: http://www.bloggersfaq.blogspot.com/ */ .basictab{ padding: 3px 0; margin-left: 0; font: bold how can i change that and put what i had before which was A blog about Music | Production| Sneakers| Sports & Networking please get back to me thank you

    ReplyDelete
  17. Thanks for the nice blog. It was very useful & helpful for me. Keep sharing such ideas in the future as well.
    make toolbar

    ReplyDelete
  18. thanks for the info.i had searched a lot and then found your blog to be best in terms of updates..thanks .it helped me to make the menu bar in my blog very easily

    ReplyDelete
  19. thanks for this tip! It worked out fine for a while when I added the
    Top-Tabs to my Blog, but for some reason since a few days I'm having serious problems. Maybe you can help?! =(
    The thing is; I made some Tabs as shown, linking them to labels of my posts (e.g. made a "colours" Tab that should lead to all posts labeled with colour). Suddenly I noticed the links stopped working!
    I went to the pages editing section and saw that every URL I had entered for any page was replaced by "javascript:;"...?(
    I've tried entering it anew, but everytime I click "save Layout" it'll be removed again afterwards.... =(

    Do you, or does anyone reading this, have a clue where this error comes from, or how I can make it work again!?
    pre-thx alot!
    Tiki

    ReplyDelete
  20. Please help me How to make multiple page in single navbar ?

    ReplyDelete
  21. I do not leave a response, however I read a great
    deal of remarks on this page "How to Add Navigation Menu Bar to Blogger Blog [Updated]".
    I do have 2 questions for you if it's okay. Is it only me or does it look like some of these comments come across like they are left by brain dead folks? :-P And, if you are writing at additional social sites, I'd like to follow you.
    Could you make a list of every one of your social sites like your linkedin profile, Facebook
    page or twitter feed?
    Look into my homepage ; commodities market news

    ReplyDelete
  22. http//:www.Onlocker.com
    You Are Make ANice PostsAnd i like the Post And And Your Blog

    ReplyDelete
  23. you're actually a just right webmaster. The website loading velocity is incredible. It kind of feels that you're doing any unique trick.
    In addition, The contents are masterwork. you have performed a wonderful process in this topic!
    My site > Heavy Smoker

    ReplyDelete
  24. This piece of writing will help the internet people for setting
    up new webpage or even a blog from start
    to end.
    Here is my site free monopoly slots online no download - More inspiring ideas

    ReplyDelete
  25. An outstanding share! I have just forwarded this onto a coworker
    who has been conducting a little homework on this.

    And he in fact bought me dinner due to the fact that I discovered it
    for him... lol. So let me reword this.... Thank
    YOU for the meal!! But yeah, thanx for spending the time to discuss
    this subject here on your web page.
    Here is my weblog ; theresa thompson

    ReplyDelete
  26. nice and simple to understand..Also visit my site www.getflop.com

    ReplyDelete
  27. I always follow the tricks in your Site..absolutely I am very thankful to you giving us these tricks…
    I have done this method on my blog www.getmeboom.com template.

    ReplyDelete

Please if you have any question to ask or contributions to make, use the comment box and do not spam. spam comments will be removed

Related Articles

Widget customized by Cyracks