Home » Blogger Tutorials, Tricks and Hacks » Blogger Beginners » How To Add Top Navigation menu (Bar) To Blogger (blogspot)

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add Top Navigation menu (Bar) To Blogger (blogspot)

How To Add Top Navigation menu (Bar) To Blogger (blogspot)

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

122,188 views

A lot of bloggers asked me about how to add top navigation bar for a blogger template,
And through this tutorial you’ll know how to add a top navigation menu for your blogger templates.
it’s very easy task, so let’s do it.

1. Add Css To Your Template

Go To your Blogger Dashboard, Layout >> Edit HTML >>
And find This code

</b:skin>

And before it add next code.


/*URL: http://www.AllBlogTools.com/ */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

that’s it, and now let’s add the menu it self to our template.

2. Add The Menu To Our Template

Go To your Blogger Dashboard, Layout >> Page Elements >>

and now above blog posts area, click add gadget,

Add top navigation menu for blogger template

And choose Add HTML/JavaScript

Leave the title empty and at the content area add this code

<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

Now Click Save and check your blog,

3. Customize Your Menu

Now you have to change the menu links for your own links and titles, and you may want to change the menu colors as well.

3.1 Change The Menu Links

In step 2 you’ll find this words in the code

<li><a href="#">Edit</a></li>

change The symbol # to your link, and change the word Edit to your title.

you can repeat this part of code as you like,

every time you add this part of code again to your menu code, a new link will be added to your menu.

3.2 Change The Menu Colors

To change your menu colors you have to edit the css code in step 1 before you add it to your template. So Copy and past it in new text -notepad- file to edit it there.

We’ll use AllBlogTools.com html Colors Code Generator to edit this menu colors.

in step one code find this codes and change it’s color codes to your favorite, you can grab your favorite color code here.

AllBlogTools.com html Colors Code Generator

To change the main background color.

Find

 background-color: #f6ffd5; 

and change f6ffd5 to your favorite color.

To change the selected and hover background color.

Find

 background-color: #DBFF6C; 

and change DBFF6C to your favorite color.

To change the text color

Find

 color: black;

and change black to #xxxxxx and xxxxxx should be your new color code

you are done, and you have got your own customized code, now use it as we used the code in step 1.

Live Demo

Click here to see demo menu added to blogger template.
Enjoy.

Liked It ? Please Share

Comments

61 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Ehtesham says:

    this is realy awesome, but i dont need it, because its allready installed in my template :-)

  2. wickrama says:

    I always follow the tricks in your Site..absolutely I am very thankful to you giving us these tricks…

  3. adrin rogers says:

    I regularly visit your blog post and gather lot of valuable material from here. Nice post as ever and nice you too…….

    Domain registration india

  4. Beth says:

    Hey I have mine all set up but I can’t figure how to add multiple giveaways/reviews to my one link button on the navigation bar. I have multiple giveaways that need to pull up when readers click on that link…PLease Help

  5. Max says:

    hi Beth,
    do you mean multilevel navigation menu, if yes, so wait our next tutorial about it.

  6. wiNK says:

    thx . . .

  7. Yrene says:

    Hi… i´m trying to set my blog for a travel im organizing to japan, i dont know how to do it, im just following tutorials and steps… but i really like the basic template i choose but i need a navigation menu… i followed your tutorial but the result wasn´t as yours… please help… 1 silly question, when you say: Change The Menu Links
    In step 2 you’ll find this words in the code

    Editchange The symbol # to your link, and change the word Edit to your title. which link i have to use?… maybe im so sleepy but i dont understand…
    thanks in advance, regards from Puerto Rico.

    • Max says:

      hi Yrene, ok, it’s not very complicated and i’ll make it clear now,
      what kind of links you may put in this menu?
      about us page, contact us page, home, or any page, ok, just create new post, call it about us then write in the content area what ever you want, and publish it, but make its date very old so it won’t display on your blog first page,
      then view this post, and copy it’s url, and this is the url that i was talking about, i wish you understand me now,
      i’m still here for any help.

  8. vamp6x6x6x says:

    I need help. I added this code and it works fine, but then i added the Adding Numbered Page Navigation Bar For Blogger code and that code only will work on the home page for some reason. please help.

  9. Patrick says:

    Hi, I managed to get a menu bar, but how do I get new posts to fall in under the relevant label and not just on the home page? Please help!

  10. mrjack says:

    Thanks Max ! This site is so helpful !

  11. mrjack says:

    I wanted to ask something Max. I dont know whats all about.
    When I add a gadget in there (as said in article) my main blog image is going a few pixels below. And that’s causing a problem ’cause this image is seen as unique with my backround.
    And when a gadget is added there are not together as images, there is a difference is just in that move from main image.

    Thanks again.

    • Max says:

      hi mr jack, why don’t you leave your blog link while commenting to let us see it.

  12. Poras says:

    Hey Plz Can You Tell Me How To Add Menus Button In My Blog,I Have To Start My Blog So Plz Tell Me As Soon As Possible.

    My Blog Template Is : Isabela

    I want To Add Menu
    It Should Look Like This one : http://world4free.in

    • Max says:

      @ Poras,every thing is explained clearly in the tutorial, just read it and apply.

  13. vamp6x6x6x says:

    is there anyway to make it show columns when people hover over it?

    • Max says:

      @ vamp6×6x6x,
      yes you can, but you have to be good css and helm code, or you can wait for my upcoming tutorial about adding menus to blogger .

      @ Devi , please go to layout, and in page elements, drag the widget to your header or above your posts area.

      @ katie i visited your blog and i think every thing is great, sorry for my late answer.

  14. Devi says:

    I don’t know why… it show on footer … http://contestmagz.blogspot.com... help me…

  15. Katie says:

    I have done exactly what you said putting the first step right before :

    <![CDATA[/*
    and then followed the other directions as instructed but all I get when i preview the blog is the code listed at the top of the blog and then the menu in list format under the title. How do I make it look like your demo?

  16. katie says:

    I use blogger and Ihave done exactly what you said putting the first step right before
    and then followed the other directions as instructed but all I get when i preview the blog is the code listed at the top of the blog and then the menu in list format under the title. How do I make it look like your demo?

  17. katie says:

    sorry my comment keeps messing up. take a look at my blog, may be just from looking at it you can see whats wrong teamyounkin.blogspot.com

  18. tutor says:

    wow awesome ^_^

  19. Max says:

    thanks tutor

  20. ning says:

    help..
    how can i do a new link that go to a new page for commment???

  21. sya says:

    i follow all the steps. However, the navigation menu is on the left, not on top. please advice.

  22. sulltan says:

    Thank u … its working fine

  23. Ellyali says:

    Can you teach us how to do a link tab that shows pictures like yours? I don’t wish to sound ungrateful, but tweaking the hex code and font is rather common , we wish to stand out from the rest, mine is still boring… Please Guru

  24. Max says:

    @ Ellyali, ok, i’ll try to add a tutorial soon, but i’m too busy.

    @ sya, can you show me your blog.

  25. Hani says:

    hello there. I have tried the steps but unfortunately, after I added the first code you gave, there was no ‘add a gadget’ shown above my ‘blog posts’. why is that?

    Thank you.. :)

  26. Hani says:

    actually I have no idea what my template name is. but it is a 2-column stretch template. I got the layout codes from http://www.butterflygirlmsblogdesigns.blogspot.com. thanks

  27. Carolina Pardo says:

    I did the whole process , but my question is:
    What do I have to do that everytime you click on something u know it goes to a certain item?
    How do i group the elements?

    thanks

  28. MikeM says:

    Can you change the font and font size on the menu?

  29. venus says:

    ur code is too good. i tried it but when i click HOME BLOGGERTEMPLATE EDIT EDIT its not displaying me anything rather its showing me some site’s home pages. how can i use your code in best way. pls help me out. i want menu bar to be installed in my blog. but facing lot of problems. pls let me know.

  30. venus says:

    Your Comment Here …. *
    my url is::: http://www.musicvenusblog.blogspot.com
    pls visit and plsss help me.

  31. edie says:

    Love the nav bar, but it’s knocked my header down into my postings…how do I remedy this? Also, how to create the links for the menu bar?
    Thanks!

  32. norel says:

    Thank you for sharing. I love your site and this nav bar is nicer than what i found so far.

  33. i want to add comment box on my site like this box
    please help me
    because its look cool and easy

  34. Max says:

    @ all readers, Please read this tutorial to fix the urls problems,
    http://www.allblogtools.com/tricks-and-hacks/editing-blogger-top-menu-links/

    @ Ankit Navgwal, sorry but this is not a blogger script.

  35. krystle says:

    How do I space out the links across the entire page instead of being so close together?

  36. The Designer says:

    Somebody asked this above but I didn’t see any answer so hopefully you can help us. I followed your directions and everything worked perfectly except no other link is highlighted other than the main page when clicked on. I’m assuming this is because we all have the “class=selected” on the first link. How do we set it so the other pages are selected once they are clicked on? Thank you

    • Max says:

      @ The Designer, this is possible but it require some codding knowledge, it’s not really hard but i’ll try to post it soon in a new tutorial.

  37. elec says:

    Good article, really helpful. http://www.diggyourblog.blogspot.com/ here

  38. I have pasted the CSS code.
    And then I get the code at the top of my blog. But when I try adding the page element and paste the html code for that, I still don’t get the navigation bar. I just get the name of the links listed just below where it says “Home” on my page. And the css code just stays at the top of my blog.
    Don’t know what I’m doing wrong.

    • Max says:

      i visited your blog and i see your template already got the navigation bar. you don’t need to add this one.

  39. Shailesh says:

    Nice post, really useful, Short and Sweet.

  40. Gen says:

    I implemented this and it was perfect i had a black box with turquoise letters and then i changed my template and now the tabs are just plain words no boxes :( not sure what i messed up

  41. wenl says:

    I just spent hours on it and it did work!!! Thanks!

    But I want to make it more beautiful. Well, I have to say I dont know how to customized the menu colors. God.

  42. emad says:

    thats awesome but its appear that the home tap is always selected how could i disaffect this

  43. Mrs. Turner says:

    Hello! This site has been so helpful! Thanks for all the great tips. I was just able to successfully add the menu bar to my blog – now I would like for the “home” button/tab to always be white – instead of always green. I am totally confused as how to do this. I have read the above tips over and over again – im not sure if I need to go to my blog and “CUT” the code from step 1 FROM MY BLOG..or leave it on my blog?? Can you please help!?! Thank u so much

  44. fan says:

    CPM AND CPC AD NETWORK

    WEBSITE OWNERS EARN MONEY

    http://WWW.ADSWORLD.TK

    * Go from signup to embed code in seconds.
    * Generate revenue from website or app ads, and get paid for every clickand more supported.
    * Text and image ads in standard sizes.
    * Live statistics on clicks, impressions, CTR and more.
    * Join over 17,500 satisfied websites.

    INSTANT PAYMENT WOULD BE MADE BY PAYPAL

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here