add Awesome navigation or tabs menu in Blogger blog | My Blogger Tricks

add Awesome navigation or tabs menu in Blogger blog

Tab Menu For Blogger

A navigation or menu bar is a bar made up of tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal. While links are arranged vertically, navigation tabs are usually arranged horizontally. In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML. But in order to do that, the template must have an Add A Gadget link thingy or widget container as I would call it, at that particular location. The is no such element. What do we do then? We create it. In our next tutorial we will learn how create Element just below header.

 

Update:- 11 November 2013… Version 2.0 Available.

 

Live Preview

 

Add It To Blogger

 

1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget (Just Below Header Like Screen Shot.)

how to a  add Gadget

2. Click Add A Gadget link below the header.
3. Scroll down the Add A Gadget window and select HTML/JavaScript.
4. Leave the title box empty.
5. Copy and paste the HTML code below into the content box.

<style>

#tab_menu {
	background:url(http://3.bp.blogspot.com/-OycpSljNY-E/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;
	height:50px;
	width:960px;
	line-height:50px;
	list-style:none;
	margin-top:10px;
	font-size:14px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	overflow:hidden;
}

#tab_menu li {
	float:left;
	border-right:1px solid #FFA722;
	border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
	border-left:none;
}

#tab_menu li:last-child {
	border-right:none;
}

#tab_menu li a{
	text-decoration:none;
	float:left;
	display:block;
	height:50px;
	padding:0 20px;
	color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
	color:#622900;
	text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
	color:#000;
	text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Replace “#” with the URL of your destination page or blog.  

7. You can get the URL of a page by copying the content of your browser’s address/URL bar while you are on that page.  
8. To show all posts under a label (category), you need to link to the label’s page.

9. To change the width of the menu edit width: 960px.

 

Update:- 20-06-2013 Background Option Added

 

1.

menu_bg_1
http://3.bp.blogspot.com/-f3ORap0IbMI/UcQLTr-sN1I/AAAAAAAACjA/lLak8xIEoxA/s1600/menu_bg_1.png

2. menu_bg_2

http://3.bp.blogspot.com/-I5ddZuLgrJw/UcQLTjhTmAI/AAAAAAAACjI/Yb3yhgPRIBI/s1600/menu_bg_2.png

3. menu_bg_3

http://1.bp.blogspot.com/-_P9c5moKK7o/UcQLUc9rF1I/AAAAAAAACjU/anVA6KuWp9U/s1600/menu_bg_3.png

4. menu_bg_4

http://3.bp.blogspot.com/-OB85xAfJPfI/UcQLUnbbJGI/AAAAAAAACjg/yWWiaCSgjdk/s1600/menu_bg_4.png

5. menu_bg_5

http://3.bp.blogspot.com/-eKVpgd7fjkA/UcQLUgO_EAI/AAAAAAAACjY/NfsBYjPXyhQ/s1600/menu_bg_5.png

6. menu_bg_6

http://3.bp.blogspot.com/-4ccU3i0MrDs/UcQLVRHIlqI/AAAAAAAACjw/XnIWQ_dTVuc/s1600/menu_bg_6.png

7. menu_bg_7

http://3.bp.blogspot.com/-9i_l3hRT6Y0/UcQLVcvpW0I/AAAAAAAACjs/ZOW6CjQRff0/s1600/menu_bg_7.png

8. menu_bg_8

http://3.bp.blogspot.com/-QX3hor6qsBI/UcQLVm-rJbI/AAAAAAAACj0/rDVtHMvgfoY/s1600/menu_bg_8.png

9. menu_bg_9

http://2.bp.blogspot.com/-a2i-Vuheci4/UcQLWEpqL3I/AAAAAAAACkE/mdbH_irg_a8/s1600/menu_bg_9.png

10. menu_bg_10

http://4.bp.blogspot.com/-wLdR4j6FmPE/UcQLTjvxQ2I/AAAAAAAACjE/Ao5IPiehxtE/s1600/menu_bg_10.png

Just Replace highlighted background URL with any background which you want to add in menu.

background:url(http://3.bp.blogspot.com/-OycpSljNY-E/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;

For any further help please feel free to post your queries in the comment box below. Please do not hesitate to ask questions, we love responding! Its Very Handy, Light weight and Professional Tab Menu. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates.

Enjoy!

52 comments :

  1. Great Tut Dear Thanks For share :)

    ReplyDelete
  2. pls am new to this field how do i link to a labels page to make certain posts to align under a particular tab/category. like in news, tutorials,etc

    ReplyDelete
  3. Hi i want to move the menu bar totally to center.. Can u tell me the steps

    ReplyDelete
  4. I am still not clear about replacing the # with the URL page . If let say I want to write things under ' about us ' where does the place is ? is it at the new post ? And how to link the labels with the tab ?

    ReplyDelete
  5. Thank you for the information and now I am almost done , but how can I link the labels with the tab , I try it to link but does not working , please help me . and once again thank you.

    ReplyDelete
    Replies
    1. @Merry Much

      Replace hash sign "#" with the URL of your destination page or label..

      Thanks for Encouraged..

      Delete
  6. This is a very simple and practice to apply it. But how to add a ne sub-tab on each menu?

    ReplyDelete
    Replies
    1. @Mamen Aja

      This is a tab menu with no sub menu..
      so if you want to add sub menu we will try to update the menu code as soon as possible..

      thanks..

      Delete
  7. That's cool, but can you add, current page indication in this?

    ReplyDelete
  8. your site is very 'contentful'. I have learnt alot here. Thanks for this tutorial. Few days back i search same thing on google but unfortunately nothing found. This really help me alot.

    ReplyDelete
  9. Thank you for your post. It truly works and very easy to implement too. If you will visit my blog you will see that I used it there. Awesome! thanks again :-)

    ReplyDelete
  10. In the Live Preview there are two nav bars. The second nav bar is what I want to do. In the second nav bar for example one clicks on 'blogger' and there are four sub tabs. I need to create a nav bar when one, for example, clicks on 'Notes' and there is a drop down lists with four tabs. 'Notes 2' 'Notes 3' 'Notes 4' 'Notes 5'.

    And then one would click on 'Notes 4' and then a static page would open with a variety of diary notes.

    ReplyDelete
  11. Good use of css gradient. This is the power of css. It completely changes the look of navigation menus. Along with css shadow this mega collection looks superb. Thanks for sharing this with us.

    ReplyDelete
  12. HOW CHANCE THE COLOUR OF THE MENU?

    ReplyDelete
  13. am replacing each of the # sign with one url?

    ReplyDelete
  14. Please help I am putting the copy information in and it is saying illegal characters

    ReplyDelete
  15. how do i make the menu bar to the center?

    ReplyDelete
  16. Love it. But now I have less tabs then your original design and I want to make them all the same width. Can you advise?

    ReplyDelete
  17. Can you give me code of the above floating bar like yours..home logo..categories..Tools..Follow us ..Guest post.

    Thanks in advance

    ReplyDelete
    Replies
    1. Hi Md Mohsin, its so simple. You can just set the position of the div to fixed in css.

      Delete
  18. Awesome ! but how to put 'clicked colour' on this javascript ?

    ReplyDelete
  19. How do I center the text on the bar? the text appears an the top center

    ReplyDelete
    Replies
    1. Hi Tommy Putman,

      You can use the line-height property for that.

      Delete
  20. Thank u sooooooooooooo much !! :)

    ReplyDelete
  21. awesome, i searched at many places, but finally it worked for me. thanks for share.

    ReplyDelete
  22. is their is any thing like when click on any tab like contact us the blog's fb page open
    sir plz when you solve this problem plz send the link on my email (vipinjoshimails@gmial.comk)

    ReplyDelete
  23. How do I add more navigation buttons?

    ReplyDelete
  24. How do I add more navigation buttons than the 5 you have shown?

    ReplyDelete
    Replies
    1. Hi Rebekah Morris, You can just add additional buttons by adding it on the ul part of the above copied code which seems to be present at the bottom. That is within ul id='tab_menu'

      Delete
  25. hi sir tab banaliya but proper post proper tab mai kese add kre plz reply me

    ReplyDelete
    Replies
    1. @Pratik

      Sory dear mein ap apni problem zara detail mein btaye gay kay ap karna kia chah rahe ho ?

      Delete
  26. wow great post... Excellent 100 % working.
    Thanks to you Your post solve my problem

    ReplyDelete
  27. 100% working post it help me a lot

    ReplyDelete
  28. Hello,
    Thanks for your post,I did manage to get the menu bar by using the html text that you have shared,But I can't change the background color despite several attempts and I'm quite certain I'm making some error....Any advice?
    Thank You!

    Also,It would help beginners like me to know If every single # sign in the html text needs to be replaced with our URL or just the background URL....Please Clarify.
    Cheers!

    ReplyDelete
    Replies
    1. @Anonymous

      #Sign:- Replace #sign with your home, product, faqs, contact us, about us page link. you can also change any other page link if you have.

      backround:- If you want to change menu background then you must replace the current background code from the css code with new background image link which is we provided above....

      Delete
  29. thanks for the great trick ,it really help me in modify my blog
    check how beautifull my blog has become :http://menaveron.blogspot.com/

    ReplyDelete
  30. Nice and easy trick! Thanks!
    But I can't expand the width. I've tried to change the width in both 'px' and 'percentage' format. But no use. Could you please help me in this?

    ReplyDelete
    Replies
    1. @இ.பு.ஞானப்பிரகாசன்

      This is a fixed width menu, if you want to increase the width of menu you need to create a new background..

      Delete
    2. Thanks for the reply friend!
      Already I've changed the url of the background and fixed the menu bar successfully. Thanks again for this helpful post!

      Delete
  31. Hey Very helpful...but when i m trying to open other tabs it says Sorry, the page you were looking for in this blog does not exist. how can i show post on that seprate tab...plz reply

    ReplyDelete
    Replies
    1. ?@Vicky
      Please replace all #signs with your blog urls then it will be work fine..

      Delete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.

Get Widget