Creating navigation or menu tabs in Blogger

blogger navigation bar tabs

A typical navigation bar/tabs

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.

(If you come here looking for dropdown menu, then read Installing a multi level CSS dropdown menu).

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. In Minima template (the template I’m using to test this project) as with most other templates, the is no such element. What do we do then? We create it.


page element 1

No Add A Gadget  to hold the widget/gadget


Step 1. Adding an Add A Gadget

Adding a Add A Gadget is done in your template HTML.

  1. Go to Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Look for the following lines (or something similar) in your HTML code:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
  4. Right under it, paste this code:
    <!--Navigation page element starts -->
    <div id='navibar-wrapper'> 
    <b:section class='navibar_section' id='navibar_section' showaddelement='yes'/> 
    <div style='clear: both;'/>
    <!--Navigation page element ends -->
    page element 2

Step 2. Adding the links

  1. Go to Layout > Page Elements sub tab.
  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.
    <!-- Navigation tabs start -->
    <div id='navibar'>
    <a href="YourLink1" class="navitabs" title="TooltipText1">ButtonText1</a>
    <a href="YourLink2" class="navitabs" title="TooltipText2">ButtonText2</a>
    <a href="YourLink3" class="navitabs" title="TooltipText3">ButtonText3</a>
    <a href="YourLink4" class="navitabs" title="TooltipText4">ButtonText4</a>
    <a href="YourLink5" class="navitabs" title="TooltipText5">ButtonText5</a>
    <!-- Navigation tabs end -->
  6. Replace:
    1. YourLink with the URL of your destination page or site.  
      a) 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. 
      b) To show all posts under a label (category), you need to link to the label’s page. You can construct the URL to the page (i.e. label URL) by following the format below:

      c) For a multiple word label such as "YOUR LABEL", you need to replace the space between words with %20, like so: YOUR%20LABEL.

      d) And one more thing, labels are case sensitive.

    2. TooltipText with the text you want to appear when you hover the button.
    3. ButtonText with the text you want show on each button.
  7. Click Save.
    page element 3
    navigation tabs
    A functional navigation tabs, before styling


Step 3. Styling the links (turning them into tabs).

Go back to Dashboard > Design > Edit HTML. Find this line of code in your template:


Copy the CSS code below and paste it immediately before (above) that line.

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */ 
navigation tabs

The finished product


Step 4. Customizing the tabs

  • Change the colors, height etc. to suit your taste.
  • You can add or reduce the number of tabs. Do it in Step 2, each line of code (line 3 to 7) corresponds to a tab.
  • To change tab width, change the value in Step 3 line 1.
  • Changing the number of tabs and/or tab width will make the bar off-centered. To keep it at the center, you will have to change the container width in Step 3 line 4. The width should be equal to the sum of all tab widths (including left and right margins).
  • You can move the bar to the top of the header if you want,
    1. In Step 1 no. 3, inside the header widget, change locked='true' to locked='false'.
    2. Drag & drop the corresponding gadget in Page Elements page.

Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates.



Technorati Tags:

383 comments to "Creating navigation or menu tabs in Blogger"

«Oldest ‹Older 201 – 383 of 383 Newer› Newest»
Anita March 11, 2010 at 5:46 AM    

Thank you!! I have absolutely no html/javascript experience, but I was able to get these just the way I wanted ... including the colors. If you are feeling really generous (like over the top generous!), I would love to know how to add a little more space between my buttons and the start of my blog posts/sidebar.

Thanks again!

Greenlava March 12, 2010 at 3:11 AM    

Add "margin-bottom:10px;" in step 3 code line 2. Replace 10(px) with your value.

Joudie's Mood Food March 16, 2010 at 9:22 PM    

Thanks, i just put this on my blogger and it is perfect. Just what i hav ebeen looking for. And very easy and simple to do.

Tracy888 April 17, 2010 at 2:59 AM    

That was so helpful especially for a beginner like me. Thanks a million.

Greenlava April 17, 2010 at 10:43 AM    

My pleasure

D April 17, 2010 at 1:05 PM    

I have added a menu bar to my blog but I don't know how to get my post to link to them. Can I publish posts then move them to the links?
Thanks a bunch,

Pink Princess April 17, 2010 at 4:49 PM    

Couldn't do step 3 at all. The rest was fine, have to figure out the rest now. Thanks :)

Greenlava April 17, 2010 at 5:13 PM    

Yes, that's right.
But after seeing your blog, I think what you really want is to put label url behind those tabs.
For example your "Recipe" tab. If you use your post url/link then your blog will only show one post when you click the tab. What if you want to add more recipes?
This is where labels come in. Everytime you write a recipe, label the post "recipe" before publishing.
Then behind Recipe tab, use this link:
when you click Recipe tab, all posts labelled "recipe" will be displayed (compared with just one post if you use post link).

Greenlava April 17, 2010 at 5:22 PM    

@Pink Princess
What is the problem with step 3?

D April 18, 2010 at 2:35 AM    

YOu are AWESOME! Thank you so much, I will get on and change this.
Thanks again!

D April 18, 2010 at 11:23 AM    

Greenlava help... I can not figure out where to post the code you sent me, I had to re-figure my html code a bit to make it horizontal on my page and this is what it looks like.

I have tried to add the search/label/recipe after the html, also in between the >< and it just pasted the code to my page instead of a link.
I also made a new gadget to just start fresh and just use the code but it did the same thing.
Thanks so much for your help

Greenlava April 18, 2010 at 2:22 PM    

The code (label url) should replace "YourLink" in step 2 no.5.
To post your code here (in comment form) you have to replace <> with [] or (), otherwise it won't show up.

D April 18, 2010 at 11:23 PM    

ok thanks, I will try it again

D April 19, 2010 at 12:21 AM    

Yahooo, It worked! Thanks again

Greenlava April 19, 2010 at 11:28 AM    

You're welcome

JENIE=) April 19, 2010 at 1:17 PM    

this really helped me, thanks so much for sharing.

BUT what i really am looking for is how to make the available tabs given by the template itself work.

what i hope to have is to have new pages. that when i click a tab, it goes to another page but instead of the homepage displaying, it will be lets say my friends or links...

do you have that here? ;)

Greenlava April 19, 2010 at 5:51 PM    

Are you saying you want Pages to be styled differently than the usual homepage/ post page?
Try Apply different layout/styling to static pages

Camel April 20, 2010 at 4:33 AM    

TY for all the info! Appreciate it.

Admin April 20, 2010 at 7:23 AM    

It is useful for me

Greenlava April 20, 2010 at 10:24 AM    

@Mr Dhakal
My pleasure guys. Do come back.

Andre April 21, 2010 at 2:30 AM    

Thank u sooooooooooooooooo much....^^

Surinder April 21, 2010 at 12:21 PM    

thnaks for your help

Unknown April 23, 2010 at 5:15 AM    

how do i change the color of the boxes...I can only change the font color. Also, to make more boxes fit on one line, is there a formula I can use to adjust the widths or do all the boxes stay the same size? Any help you give will be appreciated, thank you so much!

Julie April 23, 2010 at 11:22 AM    

I have added the tab bar but when you click on the tabs, it says no post matches the query. 3 of my 5 tabs are the label type. these are the one's I'm having trouble with. One of them won't even go to the page. It says Internet cannot display the webpage. Any thoughts? Everything was great and easy to follow though! Thanks :)

Greenlava April 23, 2010 at 9:57 PM    

@clauss house
You can the tab color in step 3 code line 2 and line 3 for hover (mouse rollover) color. Look for "background". The present colors are "wheat" and "olive". Use CSS Colorvalues.
To make more tabs fit -in your case try this:
Code in step 3 line 2 again, replace "width:50px;" with "padding-left:6px;padding-right:6px;". This code will size the tab according to text, with added padding.

Greenlava April 23, 2010 at 10:18 PM    

1. bag tab -
double dots before "blogspost", that's causing "Internet cannot display the webpage".
2. As for "no post matches the query"
Have you labeled your posts with those labels?

pp April 24, 2010 at 1:04 AM    

Impressing, thanks for the free course :), I will try it into my blog :

senthil May 12, 2010 at 3:44 PM    

#linkbar .widget { this code is not there in edit html! i want to start the menu bar on left side.
please give me a solution soon!:)

ahbat May 13, 2010 at 9:33 AM    

hi mr Greenlava,
i want to put button for navigation tab not just the should i do..

Greenlava May 13, 2010 at 6:27 PM    

Where did you get that "#linkbar .widget" code?

You mean you want to use (button) images rather than the squares? Remember this code?
[a href="YourLink1" class="navitabs" title="TooltipText1"]ButtonText[/a]

just replace ButtonText with an image tag:
[img src="YOUR_BUTTON_URL"/]

making the whole code (of a tab) looks like this:
[a href="YourLink1" class="navitabs" title="TooltipText1"][img src="YOUR_BUTTON_URL"/]

Rambling Housewife May 13, 2010 at 9:56 PM    

Thank you so much!!! It's exactly what I've been looking for. A couple of questions.

1. I have numbers around the top of my nav bar? How do I get rid of those? Is it possible to center the nav bar?

2. When I click on the "Home" button I created, is there a way for it to go to my blog home page or do I have to create a label "Home" (which I did to try it out). I would rather not have a "Home" label.

Greenlava May 13, 2010 at 10:19 PM    

@Rambling Housewife
1. You copied the code direct from this page, that's why you have (line) numbers. You should've clicked the "<>" icon on top right corner of the code, and copy the code from a pop up window.
2. Your present Home tab code:
[a title="Home" class="navitabs" href=""]Home[/a]
change it to:
[a title="Home" class="navitabs" href=""]Home[/a]

replace [ and ] with < and >.

Rambling Housewife May 13, 2010 at 11:31 PM    

You ROCK!! Thank you so much smartypants:)

Anonymous,  May 16, 2010 at 11:15 PM    

Okay, I did this, but...I had already tried to add pages with tabs on the home. Now, I have 2 sets of tabs, can you help. If I delete the pages, then my tabs have nothing to go to. If I don't, then I have 2 sets of tabs. Can you explain what I've done wrong? What I am trying to accomplish is: Tabs for certain pages - where I can link specific posts to that page: like this My Projects (on the tab) and then when ever I post details of my projects, someone could click on the My Projects button and see all of my projects there. Please advise, thankyou, Margaret

Greenlava May 17, 2010 at 9:35 AM    

@Margaret, A.K.A. - 'Serenity'
A page is just like a SINGLE post. It is intended to be used for "About me", "Contact us" or the likes. You can't add posts to a page.
Maybe reply #205 helps.

ahbat May 17, 2010 at 11:05 AM    

thanks a lot mr blog looks better than're really amazing people..

moviefridays June 3, 2010 at 2:18 AM    

In my blog i don't have header only one picture is there in my theme so i designed one logo. now how i search that header code?

Shakti June 3, 2010 at 1:55 PM    

I managed to get the menu tabs up, but now what? How do I create/link a new page to it, so when someone clicks on that particular menu tab, they are taken to another page. Thanks!

Greenlava June 4, 2010 at 12:22 PM    

I see you did find the header code.

Replace "YourLink" with the URL to the page, as explained in step 2.6

PSP June 4, 2010 at 12:44 PM    

Great post, is there a way to add a custom google search box to one of the tabs?

Wayne June 4, 2010 at 7:47 PM    

All is well except now my tabs are noticabley smaller, any help?


Greenlava June 6, 2010 at 5:18 PM    

Add left and right paddings to the tabs.
In code line 2, add this:
padding:0px 15px;

Greenlava June 6, 2010 at 6:24 PM    

I see you have added the search box.
Anyway try replacing your existing CSS code (in step 3) with this one, preview and see if you like it:
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:#0000ff; border:1px solid black; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:white; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:red;}
#navibar {width:960px; margin:0 auto;background-color:#0000ff;}
table.gsc-branding {display:none;}
.gsc-search-box {margin-bottom:0 !important;}
#cse{margin:3px 10px 0; display:inline-block;}
/* Navigation tabs end */

Racez Heartnet June 7, 2010 at 10:18 PM    


Wayne June 8, 2010 at 5:46 AM    

Thanks G! One last thing and then it'l be perfecto. How can i put a space (around 1cm) between the tabs?

Thanks again!

Greenlava June 8, 2010 at 2:29 PM    

Just add 0.5cm left and right margins:
margin:0px 0.5cm;

Wayne June 9, 2010 at 6:45 AM    

Too good G! Again, nothing but thanks my friend.

Treasures from a shoebox June 11, 2010 at 10:45 PM    

Thank you so much! I have been attempting to add a Horizontal Tab Menu to my blog for several days, following this person's advice and that person's advice. It was all too confusing and not until I applied your method did I end up with a tab that I am pleased with! I'm your newest follower :)

Never Despise Meager Beginnings June 12, 2010 at 11:33 AM    

I really wanted tabs for a while now! Thanks so much for this site and teaching us how! Everything is perfect, EXCEPT my two links on the right don't work (I have 8 total). The pages are linked correctly. The problem is that I can't click on them. PLEASE HELP! What am I doing wrong?

Greenlava June 12, 2010 at 1:20 PM    

@Treasures from a Shoebox
Glad to be of help :)

@Nitner and Beckers
I couldn't detect any problem, I guess you must've fixed it.

Nancy June 13, 2010 at 12:53 AM    

I put your code in my blog. It looks and works well but the formatting falls apart when printed (piles up on the right side of the blog). Any ideas?

It's placed right after the last /head tag and a section of code that starts with a left carrot and includes the phrase:
body expr:class='"loading" + data:blog.mobileClass'>

Greenlava June 13, 2010 at 6:32 PM    

A workaround -simply remove the bar when printing:
Create printer friendly blog pages

UP Economics Society June 13, 2010 at 7:53 PM    

Wow. Thanks!

Elizabeth July 23, 2010 at 1:49 PM    

Thanks! How did you embed the search bar in the tabs?

Greenlava July 23, 2010 at 11:57 PM    

Go here: Add Custom Search box in navigation/menu bar

Under Urooba's Umbrella! July 30, 2010 at 8:42 AM    

OH MY GOSH!!!!!!!!

make money online July 31, 2010 at 1:42 PM    

can u make some video about this, i believe more people would like to view video with the sound explaining rather than article step by step.. :)

Prasanta Paul August 8, 2010 at 10:53 AM    

really cool!! thanks for the nice piece. I have used this in my blog-

govinda,  August 12, 2010 at 7:35 AM    

Hello Greenlava, please help me---
i have created 2 navigation tabs and wrote the code like

/* Navigation tabs start */

a.navitabs, a.navitabs:link, a.navitabs:visited {display:TRANSPARENT; width:115PX; height:NONE; background:TRANSPARENT; border:NONE; margin-top:2PX; text-align:CENTER; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:16px; color:#ffcc77; line-height:16px; overflow:NONE; float:left;}

a.navitabs:visited {color:#aa9988; background:TRANSPARENT;}

a.navitabs:hover {color:#ffeecc; background:TRANSPARENT;}

#navibar {width:760px; margin:0 auto;}

/* Navigation tabs end */
/* Navigation tabs start */

a.navitabs, a.navitabs:link, a.navitabs:visited {display:TRANSPARENT; width:30PX; height:NONE; background:TRANSPARENT; border:NONE; margin-top:2PX; text-align:CENTER; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:16px; color:#ffcc77; line-height:16px; overflow:NONE; float:left;}

a.navitabs:visited {color:#aa9988; background:TRANSPARENT;}

a.navitabs:hover {color:#ffeecc; background:TRANSPARENT;}

#navibar {width:760px; margin:0 auto;}

/* Navigation tabs end */

please visit my blog and suggest me

Greenlava August 12, 2010 at 11:15 AM    

You need to differentiate between the two set of tabs.
Replace the SECOND one with this:
/* Navigation tabs 2 start */
#HTML3 a.navitabs, #HTML3 a.navitabs:link, #HTML3 a.navitabs:visited {display:TRANSPARENT; width:30PX; height:NONE; background:TRANSPARENT; border:NONE; margin-top:2PX; text-align:CENTER; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:16px; color:#ffcc77; line-height:16px; overflow:NONE; float:left;}
#HTML3 a.navitabs:visited {color:#aa9988; background:TRANSPARENT;}
#HTML3 a.navitabs:hover {color:#ffeecc; background:TRANSPARENT;}
#HTML3 #navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */

barmybex August 13, 2010 at 6:22 AM    

HI, your tips have been very helpful so far, and i am very new to this so any help is appreciated.
However I have labeled some of my posts as 'Book Review' so that they show under my Page 'Reviews', I used your tip of
"All you have to do is label each post (in post editor) with the word "fashion". Then, under "fashion" tab put the the link to that label:"

and i now have a link under my review tab that when i click on it, then brings up all the posts labeled 'Book Review' and a grey box that says "Showing newest posts with label Book Review. Show older posts" which is what i want. How can i get it so that it automatically shows this box and my posts and not the link.

Any help would be much appreciated, i've already got a lot further with your help in 5 minutes than i did in 2 hours on the other help topics i tried last night. if you want to look at my blog to get a better idea of what i'm talking about the address is :

Thank you.

Unknown August 15, 2010 at 2:02 PM    

Thank you! I was able to set up some nice tabs in about 5 minutes! It's gonna make my blog much better! It actually looks like I know what I am doing! lol

Greenlava August 15, 2010 at 7:20 PM    

This URL: is meant to be placed behind a tab, and not inside a page like what you did.
This tutorial will help you do that: Adding non-pages links to pages/PageList gadget.

Robyn Scherzer August 15, 2010 at 9:59 PM    

good morning found this wonderful source as blogger was not alot of help. I have three problems. My tabs background color is shooting off to the right and looks sloppy.
and second, I read your post about label your post and than go to that page and link it, but I don't see where I put the link in? thirdly, I changed my layout and now I noticed my profile words are all messed up.
New blogger here so any help is appreciated, by blog is
Thank you!

Greenlava August 16, 2010 at 9:36 PM    

@Robyn Scherzer
1. For the tabs and profile, add this CSS code in your template:
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}
.PageList {margin:0 auto !important;width:875px;}
.Profile img {margin-right:25px;}

2. To add a tab linking to your label page, refer to reply 263.

a good catch August 18, 2010 at 1:13 PM    

I made it in my site..

Thank you very much..
try to check it here

Shaefiq Bernard August 20, 2010 at 5:13 PM    

Thks for your guide but getting the Tabs done I can't link to individual post. At first it was ok, later on it went error.I hv message -
"The blog you were looking for was not found.
Return to blogger"

owuld appreciate your help/advice.

Greenlava August 22, 2010 at 12:16 AM    

Must've been a typo in your URL. But you seemed to have fixed it.

Unknown August 25, 2010 at 12:28 AM    

It seems like the current version of Blogger (Aug 23, 2010) has changed. The Page Element page does not give a html option anymore though the Design tab does. How can I locate the "contents" section to paste your code? Hope you can help me out.

Greenlava August 25, 2010 at 1:43 PM    

No, Blogger hasn't changed.
When you click the Add A Gadget link in Page Elements, a pop up appears. Select HTML/Javascript gadget. Then you'll see two text boxes -the top box is entitled "Title" and the bottom box is entitled "Content".
Paste your code from step 2 into that Content box.

Quinnie Cook August 27, 2010 at 11:21 AM    

I implemented the menu boxes without problem, however, how do I arrange the text in each box so the I have two lines of text. Example: Home made Soap (on first line in the box and Workshop in the second line in the box? I want to make it the same set-up for all 5 boxes.

Greenlava August 27, 2010 at 3:15 PM    

@Do Your Inner Work
Use a line break [br/]. So instead of "Home made Soap Workshop", you should enter "Home made Soap[br/]Workshop"

Anonymous,  August 31, 2010 at 11:15 PM    

hi! i've tried this out and it worked but when i clicked on the pagelink the nav tab doesn't appear on that page or even when going over to other posts. it only appears in the home page T__T

Greenlava September 1, 2010 at 2:58 AM    

What is your blog url?

Anonymous,  September 3, 2010 at 2:57 AM    


I totally unexperienced but your instructions are wonderful and I could make nearly everyhting. However, when I try to modify some details of my menu bar (color, border, margin...) nothing changes.

Thanks for your help.

Greenlava September 3, 2010 at 1:26 PM    

You want to add/edit the codes in Step 3 code line 2.

Anonymous,  September 6, 2010 at 3:05 PM    

Hi , I want to create a scrollable box like "labels" box in your blog then just click to choose a lebel...
Please teach me how to create that kind of box...
Thank you very much

Greenlava September 6, 2010 at 5:41 PM    

There's a tutorial for that:
Create Dropdown menu for Labels widget

Dar-us-Salam Publications September 9, 2010 at 8:19 PM    

I like this. thank you very much

Greenlava September 11, 2010 at 7:28 PM    

@Dar-us-Salam Publications
You're welcome....and Happy Eid. October 16, 2010 at 3:17 PM    

I have a installed the navigation tab, please help me to how to link this tab to page not visible in my blog post

Greenlava October 16, 2010 at 6:19 PM    

Go view the page. Whcile on the page, copy the URL from your browser's address bar.
Paste to replace "YourLink".

Sam Jones October 20, 2010 at 4:15 PM    

Hi there! I've installed the navigation bar on the top of my page >

The problem is I can't remove the space on the left of the home button, and the right of the navigation bar. I want there to be 0 space. How do I do this?


Greenlava October 20, 2010 at 4:55 PM    

@Sam Jones
Add this CSS snippet in the custom CSS box.
.tabs-inner, .tabs-inner .section {padding: 0; margin: 0;}

Sam Jones October 20, 2010 at 5:18 PM    

Wow, you're brilliant! Thanks for that Greenlava!

One more question... How do I get the Email Subscription on the right to look uniform to the site? And not looking like it is now?

Greenlava October 20, 2010 at 5:40 PM    

@Sam Jones
Where did you get that? I tell you that's surely not the best looking subcription box :)
I suggest you use Feedburner's own box.
Go to FeedBurner and click your feed title.
Then click Publicize > Email Subscriptions.
Under the code box there is a "Use as a widget in" dropdown menu. Select Blogger.
Click Go.

Sam Jones October 20, 2010 at 8:01 PM    

Thanks Greenlava!

Is there any way to remove the white horizontal line above my navigation menu?

Greenlava October 20, 2010 at 8:20 PM    

@Sam Jones
Go back to custom CSS box and add this:
.tabs-inner .section:first-child {border-top:none;}

Emir Haiqal October 26, 2010 at 1:54 PM    

is there any interesting tab view than this?

Greenlava October 27, 2010 at 7:11 PM
To get the look of a default tab, you can use a LinkList gadget. Add it in Design > Page Elements, and then drag it to under the header.

Healthy Daddy November 1, 2010 at 3:43 PM    

great tutorial
very helpful
thank you so much

Greenlava November 1, 2010 at 4:38 PM    

@Sayang Bunda
You're welcome. Terimakasih for leaving a comment.

James Fergusson November 1, 2010 at 11:41 PM    

So, I followed this tutorial and it worked great. See: Now I'd like to add another line of tabs (not a drop down) below it. Ideally, these would have a different look - i.e. just text, no background color or boundaries, with the words (Education, Politics, etc.) separated by vertical lines. Any advice would be much appreciated. One more thing: I can't seem to line up the header with the first line of tabs. Any ideas?
Thanks - and thanks so much for running this v. helpful blog!

Greenlava November 2, 2010 at 11:48 PM    

@James Fergusson
1. Add another HTML/Javascript gadget under the existing tabs. Use same code as step 5 except, this time change the div and class names and add the vertical lines:

[div id='2ndnavibar']
[a href="YourLink1" class="2ndnavitabs" title="TooltipText1">ButtonText1[/a] |
[a href="YourLink2" class="2ndnavitabs" title="TooltipText2">ButtonText2[/a] |

if you want to center the text links, add this to step 3:
#2ndnavibar {text-align:center;}

2. You header width is 922px. To line up your tab, you need to set the actual bar and #navibar to the same length. If you find that impossible, just make sure the bar is smaller than the header. Then match #navibar width to that of the bar's.

bosch servisi November 9, 2010 at 7:37 AM    

thanks bosch servisi istanbul

Siddhartha Joshi November 11, 2010 at 3:20 AM    

Superb! I am happy with the results. Thank you so much :)

James Fergusson November 15, 2010 at 11:50 AM    

Thanks GL. Both navigation bars are in place. Just noticed something though. In Fixfox everything looks great, but in Internet Explorer 8 (and other IEs I think) there's a big gap between the two bars. Any ideas how to fix this? Thanks a lot. My blog is

Greenlava November 16, 2010 at 10:56 PM    

@James Fergusson
Looks fine from here (IE8/Windows 7).
Looks okay on too:

James Fergusson November 20, 2010 at 6:49 AM    

Thanks for checking it out and for the Browsershots link. Yes, it looks fine to me now. Not sure what happened there. Strange.
In some browsers, though, it's still playing up. See the screenshot in this post:

Greenlava November 22, 2010 at 12:39 AM    

@James Fergusson
Try replacing this:
#navibar {width:927px; padding-bottom: 18px; margin:0 auto 10px;}

with this:
#navibar {width:927px; height: 18px; margin:0 auto 10px;}

Bill November 25, 2010 at 12:57 AM    

Very helpful!
Good job.

Del Glamiva December 5, 2010 at 2:59 PM    

It's not working...i'm trying to get another menu under my first one but they stand on top of my first menu and it's not appealing..

Sachin December 5, 2010 at 10:31 PM    

Please tell me how to allign navigation bar at left.

Thanks in advance

Sachin December 5, 2010 at 10:45 PM    

Please tell me how to reduce space between blog title and blog description when simple template in used.

Unknown December 6, 2010 at 5:35 AM    

I must be the only one... Where exactly do I paste this code? I know you said "or something similar" but there are a lot of "similar" spots in my HTML and I'm not sure which spot is the right spot :(

Unknown December 6, 2010 at 5:55 AM    

Ignore my previous post... I was looking at the "add gadget" instructions! D'oh!

Greenlava December 6, 2010 at 1:57 PM    

1. To align navigation bar to the left remove margin:0 auto; in step 3 code line 4.
2. To reduce space between blog title and blog description, add this is CSS:
.Header h1 {margin-bottom:0;}
.Header .description {margin-top:0;}

Marcy December 6, 2010 at 2:31 PM    

Hi - I am trying to use this code but I think that perhaps I may have manipulated my existing code to the point where I cannot even find [div id='header-wrapper'] to even add the code you have given. What can I do? Help! Here's my blog:

Thanks in advance!

Sachin December 6, 2010 at 4:03 PM    

Thank you very much.

It is very helpful.

Greenlava December 7, 2010 at 12:16 AM    

I believe your template (Template Designer's right?) has an Add A Gadget under the header by default.
You can skip step 1.

Oor if you want to keep your template's native tab styling, choose a LinkList gadget in step 2 (instead of HTML/Javascript gadget). If you so choose a LinkList, steps 3 and 4 won't be needed.

James Fergusson December 8, 2010 at 10:09 AM    

Thanks. I think that worked.
James Fergusson

Anonymous,  December 9, 2010 at 4:26 AM    

i can't thank you enough for this tutorial!! THANK YOU!! one question do i choose a specific color? i've changed the html to gray and it goes gray but is there a way to choose a specific shade of gray?

Greenlava December 9, 2010 at 4:13 PM    

@a little lovely
Use color code instead of color name.
There's a free tool that picks color code right off your computer screen. Read 10 tools to help you develop a better blog. It's tool no.7.

Happy Cottage Children Chinese Books and Resources December 10, 2010 at 1:30 AM    

Hi Greenlava,
I've copied the codes you mentioned and got the menu bar up. But it's not align to the header. It looks like there's left and right margin to the bar. Tried changing the width but it just spill into the next line. I tried to read through your replies above but still don't quite understand.
Really appreciate your help.

simply di December 10, 2010 at 6:43 AM    

This tutorial was exactly what I was looking for, thank you so much for the the great details.

I'm struggling through with how to have the menu tabs go on the right side rather than the left. The two tabs I created are Home and About (may add one more later) I have more room across the other side and it doesn't distract from my blog header. Can you suggest what changes to make?

THank so much!!

Greenlava December 11, 2010 at 7:33 AM    

Try this:
In step 3 code line 2, change float:left; to float:right;
BTW I could not view your blog because it is set to private, so I'm not 110% it will work :)

Lgali December 14, 2010 at 2:16 AM    

thnaks for this info I love all only problem How I can get space between tabs

Greenlava December 14, 2010 at 10:18 AM    

Add left and right margins declarations to the tabs (in code line 2), like so:
margin-left:5px; margin-right:5px;

Azam Mohammed December 24, 2010 at 3:12 AM    

Hey, I can't get Step 3 to work :( I paste it in before ]]> and nothing happens :( The style hasn't changed... Please take a look at my blog, and any help would be appreciated!

Greenlava December 24, 2010 at 10:27 PM    

You left out a closing curly bracket, here:

.titlewrapper, .descriptionwrapper {
position: relative;
left: 50px;
top: 15px;
#navbar { display: none; }
/* Navigation tabs start */

You need to insert a closing curly bracket right before #navbar... line, like this:

.titlewrapper, .descriptionwrapper {
position: relative;
left: 50px;
top: 15px;
#navbar { display: none; }
/* Navigation tabs start */

Azam Mohammed December 25, 2010 at 5:28 AM    

Wow, who would have thought that one little thing would make such a difference! Thank you for your help! :)

MASQUERADE CREATIONS January 6, 2011 at 6:00 PM    

helped a lot! thanks!!!

The Place To Be For.... January 10, 2011 at 8:14 AM    

I cant pull any of my posts under tabs I created. How do you link the post to navigational tab. Please help me as I am new to this.

Greenlava January 10, 2011 at 2:14 PM    

@The Place To Be For....
For the posts to show up, you need to label them first. Read How do I label my posts? - Blogger Help.

Pandora January 14, 2011 at 6:17 AM    

really it's great work

sadia frozen January 15, 2011 at 9:27 PM    

hey ..
this is sadia .. i m having prob with the navi bars .. with every bar its number is writen from 1 to the last bar .. how can i remove that numbers ??

Greenlava January 16, 2011 at 11:31 AM    

@sadia frozen
Where is this navi bar of yours? I dont't see any in your blog.

Karrisa_T January 21, 2011 at 10:53 AM    

I did it! I was up all night last night trying to figure out how to do this and I finally stumbled upon this tutorial. Thanks for making it easy to understand. I'm still going to tweak it but I'm glad it's up. Thank you so much!

Anonymous,  January 24, 2011 at 10:33 AM    


instead of having the display as block, what other options are there?

Greenlava January 24, 2011 at 9:34 PM    

Refer to w3schools for a list of "display" values.

Grace Tan January 27, 2011 at 2:07 AM    

Hi i was wondering how i could have tabs that could lead to another page within my blog?

Greenlava January 28, 2011 at 1:05 AM    

Just replace "YourLink" with the URL of the page.

belognisa January 30, 2011 at 3:48 PM your tutorial.. keep posting! :)

Felicia February 2, 2011 at 1:40 PM    

I have been overhauling a friends blogger site all day and she wanted cute tabs that matched her layout. This was a life saver! (and i figured out the images all on my own yay)

Thank you so much for posting this.

Homestead Bounty Blessings February 7, 2011 at 3:45 PM    

Help. I pasted code as directed, but I don't get any tabs with my newly created links as instructed on your page. I have the words, but now color and "tabs."

Greenlava February 7, 2011 at 9:39 PM    

@Homestead Mom
You've made a mistake pasting the tabs CSS code before the existing CSS declaration's closing bracket.
You want to replace this:
.Header {
text-align: center;
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
a.navitabs:active {color:white; background:indianred;}
/* Navigation tabs end */

with this:
.Header {
text-align: center;
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
a.navitabs:active {color:white; background:indianred;}
/* Navigation tabs end */

Homestead Mom February 9, 2011 at 6:36 AM    

Thank you so much!!

Homestead MOM

Anonymous,  February 13, 2011 at 1:22 AM    

Thank You!!!
This helped me do exactly what I wanted to!

Write2Write February 20, 2011 at 3:04 PM    

I'm using this for my blog but there is a wide gap between my first button and the second. Any suggestions on how to fix this?
Here the blog site:

Greenlava February 20, 2011 at 3:55 PM    

The gap is due to the tabs being fixed widthed.
To make the widths follow text lengths, replace:
padding:0 15px;

Dr. Ubaldo Guillermo February 20, 2011 at 10:16 PM    

Wonderfull, your tutorial is excellent, thank for you help. Very, very helpful

e February 21, 2011 at 12:36 PM    

I use the simple template on blogger. I did not need to "add a gadget" under my header as there was one already there. I added the code to make the nav bar = perfect. The code to style them does not work for me though. I added the code directly above the }]]>
I notice yours does not have this } on it and mine does, could this be the problem?

Amanda February 21, 2011 at 2:28 PM    

Hi. I think an example would best explain my question. Say you have a craft blog and you blog about multiple types of crafts: sewing, paper crafts, knitting, clay, etc. So now you have a tab called "crafts." How do you make it so that when you click on the "crafts" tab, it opens to your crafts page, and each type of craft has it's own section within the "crafts" page? So that if you wanted to look at all clay crafts, you would click on the "crafts" tab, and then you could click on "Clay" within that page, and it would open up to a page with all clay projects? I haven't set up tabs on my blog yet, so there isn't much to look at, but just in case you need the info, the URL is Thanks in advance. Your tutorial seems pretty easy to follow...

Greenlava February 21, 2011 at 5:16 PM    

@Poetic Justice
That's exactly the problem. You should paste the navigation code after the }.

Greenlava February 22, 2011 at 1:17 PM    

This is not exactly what you want but it's the closest thing -a dropdown menu. Make sure you
1. Label clay posts under both "crafts" and "clay".
2. In the dropdown menu code, put "clay" on the second level, under "crafts".

mikiboto ♂ ( Migo Dolar ) February 23, 2011 at 1:12 AM    

tanks for posting this!! big hepl..tanks agen!!

South Suburban Savings February 23, 2011 at 1:40 PM    

Thank you so, so much! This is EXACTLY what I was looking for and you explained it so clearly! :)

e February 26, 2011 at 7:12 AM    

Thanks a bunch Greenlava, worked like a charm!

1st in Prperty March 5, 2011 at 9:22 PM    

Thanx for your info, problem with mine.I can't trace the mistake at all. I read text at the top in my Design view, no menu bar...

Greenlava March 7, 2011 at 7:53 AM    

@1st in Prperty
Make sure you paste the CSS code in step 3 at the right place.

Verona,  March 11, 2011 at 5:05 PM    

Thank you so much! This is really the icing on my website!!!!! Looked for this for ages, and now I can save me lots of money on not hiring a webdesigner.

But one question, how do I remove the "Newest posts with label blabla"?
I think it looks a bit unprofessional.

Greenlava March 12, 2011 at 10:23 AM    

"a bit unprofessional" is an understatement, it's ugly :)
Hurry! hide it by adding this snippet in CSS:
.status-msg-wrap {display:none;}

mikiboto ♂ ( Migo Dolar ) March 13, 2011 at 6:19 AM    

hi green lava! i was thinking if this is off the topic, but i think it's still is..
because its the same as navigational tab..its just that its not located at the header. sir i would like to ask if how can i add like "terms and conditions", "about us" or such "tabs" if thats the ryt term for it at the verry bottom of my blog or footer? i've read all of your post but it wasn't discusd. pls. pls, if it's not too much favor to ask, can you please teach us how.. pls??? my super hero green lava!!☺

Greenlava March 14, 2011 at 1:46 AM    

@mikiboto ♂ ( Mitch Dolar )
Go to Design > Page Elements and drag the Pages gadget box to the footer.

Verona,  March 18, 2011 at 1:58 AM    

haha thank you so much!

Lisette,  March 19, 2011 at 8:52 PM    

When I click on the menu tabs, the first two don't show all the post on the 1st page. Is there a way why this is? Or how to fix it? If i press older posts, there show up more articles.

API CODEIGNITER March 19, 2011 at 11:37 PM    

thanks for info

jackii,  March 29, 2011 at 10:15 PM    

how do u change the font on the button?

Greenlava March 29, 2011 at 11:02 PM    

Step 3 code line 2:
font-family:verdana, arial, sans-serif;

change verdana to your first choice font, arial with your second choice,...

Shannon Edwards April 14, 2011 at 1:04 AM    

LOVE how easy this is, the steps are great! The only problem I'm having is when I try to change my background color of my tabs as they are scrolled over. For some reason when I switch from the colorname to a hex color it just goes to white....

Anna April 14, 2011 at 4:53 AM    

I was able to create my tabs and customize them fairly easily... but do you know how to link the archive gadget to a tab? I don't want that on my sidebar anymore- but I can't figure out how to connect it to a tab...

Greenlava April 15, 2011 at 11:46 PM    

@Shannon Edwards
The colox hex code requires a hash prefix:
background:118899 --> background:#118899

Maria N April 18, 2011 at 4:48 AM    

for part 3, how do i construct the url so that the posts are not visible on my actual blog?

Greenlava April 18, 2011 at 8:44 AM    

@Maria N
Is this for the About, Contact and Shop tabs?
What you want is to replace the posts with stand-alone pages.
1. Go to Dashboard > New Post > Edit Pages > New Page.
2. Once the page is saved you will be prompted "How would you like the Pages Gadget to appear?" Select "Blog tabs" and Save.
3. View your blog to see the added tabs.

Mistress Patron April 21, 2011 at 2:17 AM    

i made it through the tutorial and have the buttons now how do i name them and add text to them

Greenlava April 21, 2011 at 7:34 PM    

@Mistress Patron
It is explained in Step 2.6.

표류생물 May 3, 2011 at 4:32 PM    

Thank you for this Posting!
Very helpful to me!

Graphic May 6, 2011 at 11:48 PM    

this is a great post and helped me alot...thanx

Primriz May 27, 2011 at 11:45 AM    

Hi..this is what I have been wanting to put in my blog..I hope I will be able to do not very familiar with codes, but I'll try.thanks

Kristen June 1, 2011 at 1:08 AM    

I am so grateful for your help! Being a complete computer idiot, you are an asset! Given that - I have a question! =) I've added everything, and when I did, it jacked up the way the blog looks in IE. It looks great (with the full navigation tabs installed) in FF, but it's ruined in IE. If I move the buttons back to the sidebar and remove the html (which makes them not work, obviously), the blog looks good in both IE and FF...but I'd like operational buttons. I've been going back and forth on this IE/FF mess forever trying to make it work...and like I mentioned, I'm a computer idiot! Any ideas? Thank you soooo much!!!

Kristen June 1, 2011 at 1:16 AM    

Maybe if I can style them to be stacked on the side? Maybe then they would work in IE and FF? I have no idea...obviously. =) lol

Greenlava June 2, 2011 at 5:57 PM    

Why don't you try a LinkList method, as explained in the update.

storybeader June 18, 2011 at 12:31 AM    

thank you so much for helping me clean up my navigation bar! I just wrote a post about your site


Greenlava June 18, 2011 at 10:18 PM    

Wow! Thank you very much. I really appreciate that :)

travel8ing June 25, 2011 at 12:14 AM    

I've managed to create a horizontal navigation bar by following your very good instructions (I had tried others without success). However, I have two problems:
1. I'm trying to get the whole navigation bar to justify left but I can't see where to change the code.
2. I'm trying to use PT Sans Caption for the text, but the only code I see relating to font asks for a font family and it doesn't work when I insert (PT Sans Caption) instead of (Arial, Tahoma, Helvetica, FreeSans, sans-serif;) after (font-family:). How can I get PT Sans Caption to show?

Greenlava June 29, 2011 at 8:26 AM    

1. To align the whole bar to the left, try replacing margin:0 auto; in step 3 code line 4 with float:left;.
2. PT Sans is a web font, so applying it is not that simple. Try this method: Using custom/nonstandard fonts with Google font API

Anuradha Ramkumar July 21, 2011 at 11:42 PM    

I'm in the process of creating a new website using blogger and found this information very useful. Is there a similar easy way to add sub menu too? If yes, how and if not, how to add sub menu in blogger.

Greenlava July 22, 2011 at 3:54 PM    

@Anuradha Ramkumar
Adding submenus is not that easy. Try this tutorial:
Installing a multi level CSS dropdown menu

Health Shelf August 6, 2011 at 12:47 PM    

HI, is there nay way to move old posts from blogger into new created tabs. I have almost 400 posts and It would take a long time to do it one by one.

Greenlava August 7, 2011 at 8:56 PM    

@Health Shelf
Have you checked out this tutorial?
Listing post titles in alphabetical or chronological order

Tiffany LaCourse,  August 23, 2011 at 5:00 AM    

thank you so much! Out of ALL the tutorials I tried before I found your site, I could NOT figure it out!! And now I did THANK YOU!

Nikki Thareja September 11, 2011 at 11:09 AM    

Hey GreenLava,
How do you change the widths of the individual tabs themselves? I have one that says Home and another that says Discussion and I would like them to have different widths. Also, how to you change background color to a color that isn't a default color (I need a lighter, less bright color than default blue)

Greenlava September 20, 2011 at 11:48 AM    

@Nikki Thareja
1. Tab width: Use padding instead of fixed width.
Replace width:150px; in step 3 code line 2 with padding: 0 20px;.
2. To change the back ground color, add background: #7777BB; to that line.
Replace the color code with your own.

«Oldest ‹Older 201 – 383 of 383 Newer› Newest»