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:

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

«Oldest ‹Older 1 – 200 of 384 Newer› Newest»
Werner von Wallenrod July 6, 2009 at 6:03 PM    

A couple of your tips (this one, the one about changing the color of your comments text), say to "copy the code below and paste it into the CSS section of your template."

Does that mean just anywhere in the Edit Template HTML box?

Werner von Wallenrod July 6, 2009 at 7:09 PM    

I also have a problem with the text from the last button appearing on the line underneath the buttons when viewing the page in IE (but not FireFox) after following these instructions.
Interestingly, that text disappears if you highlight the button (but reappears again right after). Any idea what this could be?

Greenlava July 6, 2009 at 7:40 PM    

CSS (Cascading style sheet) starts from:
< b:skin >< ![CDATA[
and ends with:
]]>< /b:skin >

you will notice the similarities in syntax with the code I've given.

Greenlava July 6, 2009 at 8:13 PM    

Ahh..just as you're about to scream "I did it!", along comes every webmaster's nightmare -IE :).
I don't really know what's causing this problem, but try changing the tab width to 130px, that will remove it.

Werner von Wallenrod July 6, 2009 at 8:22 PM    

"Ahh..just as you're about to scream "I did it!", along comes every webmaster's nightmare -IE :)."

LOL Exactly!
Thanks for both answers. Gonna try resizing the tabs now. 8)

Werner von Wallenrod July 6, 2009 at 9:11 PM    

Resizing worked. :)

By the way, after I resized it to 130, the buttons were (naturally) noticeably smaller, and worse: bunched over to one side with an obvious gap on the other side. So I played with the sizes, and found 137 was the highest I could go without having the "spill over" problem. And that looked much less crappy.

Now, I'm still using the default blogger column widths (I haven't resized them like Greenlava shows you how to do in another post), so if anyone else reading this is having the same issue, 137 might be your magic number. :)

Thanks again!

Greenlava July 6, 2009 at 9:41 PM    

I thought I typed 137px...Need to remind myself -Proof-read before posting.

Dumb Status July 18, 2009 at 4:16 PM    

Hey! Everything worked great but I was wondering if there was a way to add dropdowns to these?

Greenlava July 19, 2009 at 10:11 PM    

Hi Dumb Status,
Dropdown menus are a bit different. Better build anew. This is on project list too.
But for the time being you can go to CSSPlay. They have all sorts of menus there.

Katie McFarlan July 26, 2009 at 1:33 AM    

I used your code but for some reason, when I click on the links on the menu bar, rather than going directly to the URL, they go to rather than just

Can you offer any suggestions?

Greenlava July 26, 2009 at 2:19 AM    

You omitted http://. To correct it, use this:
One more thing I notice your header is slightly misaligned. To correct it, set margin to 0px in #header.

Katie McFarlan July 26, 2009 at 1:38 PM    

Perfect!!! Thank you so much for your help!

tanweer,  July 26, 2009 at 3:36 PM    

thanks greenlave,
a question is, as we done above, how can one link to that nav. buttons (if suppose external link then ok but) within same blog how can we link to that nav. buttons we just created?
and how can we create the other page to be display on click nav. buttons.
plz clarify about both points.
thanks in advance.

melody July 26, 2009 at 3:50 PM    

thanks greenlava,
(1)after creating nav.buttons how can we link them in the same blog. (ok for external link we can change in href but what about inside link)
(2)and to that link how/where will we creat the linked pages . lol

thanks in advance.

Greenlava July 26, 2009 at 5:54 PM    

You're welcome. Come back anytime.

@tanweer, melody,
1. To get the link to an internal(post) page. Click the post title to display only that post. Then look inside your browser address bar, that's the post link/address. You use that link in the nav. tab.
2. Create a page first, then link to it. Not the other way around. In Blogger (post) pages are created automatically when you publish a new post.

melody July 26, 2009 at 8:17 PM    

sory greenlava, first it seems that there is error in posting comment, later i observed that both the comment gt posted.
thanks for your kind cooperation.

Greenlava July 26, 2009 at 9:34 PM    

No problem.

Profile August 5, 2009 at 1:01 PM    

what should i do so that
instead of wheate color an small image will appear in that block and another image for mouse rollover (instead of indianred color)
i can upload images for that on other domains.
thanks in advance.

Greenlava August 5, 2009 at 8:06 PM    

Put an id in each of your link code, like this
< a href="YourLink1" id="navitab1" class="navitabs" title="TooltipText1" >ButtonText1< /a >

then define the background for each id in CSS:

#navitab1 {background:url(Link_To_Navitab1-Image;}

Do this for all tabs.

mike s. August 13, 2009 at 12:12 AM    

hi green lava,
for step 3, i have to copy the codes into which part of the template? i cannot find the (CSS) in my template.

Greenlava August 13, 2009 at 12:25 AM    

Hi mike s.,
Please refer to comment#3.
Paste it immediately before ]]>< /b:skin > line.

Mama Snow August 14, 2009 at 4:49 AM    

I am so close to getting this done, except.... I paste step 3 in my CSS and I loose my side bars and everything moves to left, causing my whole blog to be off center.

I see the buttons and they link too, but it is just text and smooshed. Help. By the way I love all the tips you put on your site.

Mama Snow August 14, 2009 at 4:55 AM    

So I posted this towards the end of my CSS like you said to mike above, but when I change the width and color, nothing happens. Here is my blog so you can see how it looks. Can you be more specific on what to change in the HTML to make my buttons appear in a box with a background color, etc. Sorry I am not the best with HTML.

Greenlava August 14, 2009 at 10:09 PM    

Hi Mama Snow,
Welcome to my blog :)
I think I know what the problem is. You have this near the end of your CSS:
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;
a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;

You left out two closing curly braces "}". The first one is for .numberingcomments and the second one is for a:link...
Just insert the curly braces.
When you are done with that, add in the codes for the navigation tabs at the end of CSS...and you'll be all right.

Mama Snow August 15, 2009 at 4:08 AM    

I am still struggling. I see what you mean. I do not have a brace by the a:link. I think I have one before numbering comments though. I tries it and it still isn't doing much.
I think I am just more visual. Could you show me above where they go exactly.

Here is what I have as of now...

float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;
a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;
/* 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 */

Thanks so much.

Greenlava August 15, 2009 at 8:41 PM    

Mama Snow,
It's like this:
.numberingcomments { float: right; bla bla bla font-weight: normal; <--- NG
.numberingcomments { float: right; bla bla bla font-weight: normal; } <--- Good, with a closing curly

a:link, .numberingcomments a:visited { color: #445566 bla bla bla !important <--- NG
a:link, .numberingcomments a:visited { color: #445566 bla bla bla !important } <--- Good, with a closing curly

Momma Morgan September 16, 2009 at 9:18 PM    

Thank you so much for this Greenlava. I plan on revamping my blog and stumbled upon this post today and it really broke the process down in a great way.

I do have a question though. I have seen navigation bars on which if you place your mouse over a tab, more tab options drop down. I was wondering if you know how to do that?

mustbedgy September 20, 2009 at 8:00 AM    

hey greenlava !!!

marvelous.. i luv my new menu... i tried it on a bogus blog before applying on mine.... marvelous !!!
thank you, thank you

my only question is similar to the one of katie and tanweer:
let's say that i have tab name "fashion" in my menu. And let's say i have 5 posts that i want people to see when they click on the "fashion" tab, do i have to put the link for each post under the tab ? (a coma between each , indefenetely) isnt there a faster way to do this because if ihave 1000 posts , i will have to put 1000 links in the html code ?

thank you in advance !!!

Greenlava September 22, 2009 at 11:40 PM    

Momma Morgan,
Pls see comment no.9.

Greenlava September 22, 2009 at 11:51 PM    

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:

graceonline September 27, 2009 at 9:11 AM    

Thank you so much for providing this information. I'm using it on a new blog I'm building, using a heavily customized template. So far, I'm only getting a text link. The buttons are not showing. Below is the code I'm using. I've altered the text colors to match my blog links, but left your background colors for now.

You are providing a wonderful service. Thank you!

/* 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:#5588aa; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:#006699; background:olive;}
a.navitabs:active {color:#5588aa; background:indianred;}
/* Navigation tabs end */

Greenlava September 27, 2009 at 10:52 AM    

I can't check out your blog (set to private)so I'm guessing here.
Maybe to forgot to include the class attribute (class="navitabs") in the links HTML in Step 2.

☼¨`*•.♥Rocío♥.•*¨`☼ September 30, 2009 at 8:03 AM    

I want to thank you so much for your AWESOME tutorials. You have help me a bunch!
I want to stylish my bar but I don't understand part 3. I try to place it on EDIT HTML but it gives me an error.
can you help me? I try to understand the answers you gave the others but no help!
Thank you in advance for taking the time to help me!!!

Greenlava September 30, 2009 at 3:35 PM    

Copy the code in Step 3 and paste it immediately before
]]>< /b:skin > line
in your Layout>Edit HTML page.

Tamara October 1, 2009 at 11:28 PM    


answered my question (mustbedgy) pretty well

thank you again

Rainbow Coloured Shadow October 1, 2009 at 11:34 PM    

Hi there,

Your site is fabulous and darn side more helpful than Blogger discussion forum. I am trying to build the navigation buttons you describe and am half way and everything is going smoothly, but I don't know where the CSS section of the template is? Please could you give me detailed instructions on how to find or do this. I have never coded a thing in my life so have followed your instructions by the letter, but the CSS letters are still not something I understand.

Greenlava October 1, 2009 at 11:49 PM    

You're welcome.

@Rainbow Coloured Shadow,
Thanks, please read comment #34.

Rainbow Coloured Shadow October 2, 2009 at 12:48 AM    

Thanks for the speedy response. I tried that. Now my buttons are in a line underneath each other and have no boxes. Am I doing something wrong? I assume that there is a "}" after the 150px.

My site is

Also how do I change the colours. I see the steps you have listed and will try that as soon as I have the boxes working, but how do I know the names of my blog colours when the colour tab just gives me a reference number rather than a colour name. Can I insert the colour numbers where you have the colour names or is there a way to find the name of the colours I have selected so that the buttons match the colours of my blog?

Greenlava October 2, 2009 at 11:18 AM    

Rainbow Coloured Shadow,
I think I know the problem. You copied the code when my page wasn't completely loaded into your computer. Any way this is the complete code:
/* 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 */

Yes you can use Color hex code instead of Colornames.
To find a hex code of any color, I use colorpicker from

BG,  October 2, 2009 at 2:12 PM    

I'm having problem to add second tier to my existing menu tab. Can you give me the right code to add in as second line? You may check my menu tab at Thank you.

SL,  October 2, 2009 at 3:40 PM    

Thank you for your tutorial it is really helpful. Now, I have another problem. I just want to add one additional layer of dropdown under text button 1 that only show when the mouse point at the button. Can you give me the code? Thank you.

Linn Marie Hansen October 4, 2009 at 3:59 AM    

Hi. I was just wondering. I did everything you wrote, but the tabs won't align with the content wrapper, and they're pushed all over to the left. Do you know if i did something wrong or something to help?

graceonline October 4, 2009 at 7:49 AM    

Thank you for getting back to me about the issues I was having (comments #31 & #32). You are so kind to check each of our comments and blogs. I'm not ready to publish yet, so the blog is not up for viewing. I apologize for any inconvenience that may have caused you.

I had copied your code exactly, so class was not the issue, but I had added a note, beginning with the greater-than, exclamation point, dash-dash; and ending with dash-dash, greater-than sign, as follows:

9/26/09: To add navigation tabs just under header, added the "navigation element code" (far above) and navigation tabs code immediately above, per advice of Blogger Central at

Today, I moved the note BELOW the new code and the problem disappeared. Don't know why that should make a difference, but it did.

Thanks again for all the good you are doing for us. I'll twitter this page later today.

Rainbow Coloured Shadow October 4, 2009 at 9:36 PM    

How do I create a navigation tab similar to what you have on this site with the Home and All Posts so that blogger does not put up the label vs all posts flag, but that it is a permanent feature such as you have on your absolutely helpful blog site?

Greenlava October 5, 2009 at 12:34 AM    

@BG and SL,
My latest post is about dropdown menu, check it out.
@Linn Marie Hansen,
Please add this line in CSS:
#navibar-wrapper {margin: 0 auto; width:950px;}
Can't say what the problem is since I could not view your blog, anyway glad your solved it.
@Rainbow Coloured Shadow,
I answered it in replying to your comment in the other post.

Program Sukarelawan Teknologi (PROSTEC) October 7, 2009 at 12:23 AM    

Greenlava, i'm having problem when applying this method..
can u help me..
i'm really not sure about the part that needs to add the code..

when i'm trying to put the code, it says an error..

Greenlava October 7, 2009 at 12:43 AM    

Program Sukarelawan Teknologi (PROSTEC),
I see you've added the HTML part (step 2).
To add the CSS code in step 3, you need to find /b:skin in your template code. Then add in the CSS code right before the line.

Program Sukarelawan Teknologi (PROSTEC) October 7, 2009 at 12:46 AM    

i already did it, but how to change that button color?
where can i find the color code?

Greenlava October 7, 2009 at 1:11 AM    

Program Sukarelawan Teknologi (PROSTEC),
The code for button color is background:wheat. Replace wheat with your own colorname. You can find a list of colornames here

Program Sukarelawan Teknologi (PROSTEC) October 7, 2009 at 10:20 AM    

thanx.. how about make the button edges smoothly..?
it is possible to do that?

Greenlava October 7, 2009 at 7:33 PM    

Program Sukarelawan Teknologi (PROSTEC,
The easiest way to do that is by using image as a button.
To make smooth cornered buttons, go to GRSites. Then download the button into your pc, after that upload the image to image host such as Photobucket or Flickr. Once uploaded, get the link to the image and use it in the background code (the code in comment no.49).
To learn how to use images as background, read Using image as background.

Program Sukarelawan Teknologi (PROSTEC) October 8, 2009 at 8:36 AM    

for example, if i only put 3 button below my header..
can i move all the button to the center?

Greenlava October 8, 2009 at 1:35 PM    

Program Sukarelawan Teknologi (PROSTEC),
Yes you can. Add this line:
#navibar-wrapper {margin: 0 auto; width:592px;}
where the width must equal the sum of all tab widths (plus margins).

Program Sukarelawan Teknologi (PROSTEC) October 8, 2009 at 4:18 PM    

thanx greenlava..
u're great.

Greenlava October 9, 2009 at 11:17 AM    

My pleasure Program Sukarelawan Teknologi (PROSTEC).

☼¨`*•.♥Rocío♥.•*¨`☼ October 14, 2009 at 11:30 PM    

Thank you so much for the tutorial!
Now I have an another question: do you have a tutorial or a code on how to apply a navigation tabs but with pictures and a scroll down options like the one from "MckMama"<--click to see her navigation bar to see what I mean.
Thank you so much for all your help!
Have a Lovely♥Day!
~Rocío a.k.a."Mamí♥Picture"

Greenlava October 15, 2009 at 2:34 PM    

Welcome back :), that's a dropdown menu. Read Installing a multi level CSS dropdown menu.
To replace tab text with a photo just replace (in the HTML code) the word with an image code, you know the img src="http://blahblahblah thing.

April Ficek October 22, 2009 at 7:47 AM    

I loved this post. I found I easily put in my nav bar. It was refreshing for it to be so simple. The great thing I found too is if you change template then this formatting ends up being another sidebar, which is great! So then I followed your steps again to put in a nav bar and now I have a nav bar and another sidebar.
Thank you
April Ficek

If you drink coffee. Learn how you can improve your health one sip at a time.


Greenlava October 22, 2009 at 4:12 PM    

April Ficek,
My pleasure.

Himal Rangana October 25, 2009 at 4:02 PM    

Hey!..Buddy..Nice work here ...Keep up :-)

Greenlava October 25, 2009 at 7:38 PM    

Himal Rangana,
Hey thanks. Don't forget to come back...

HillBillyFilly October 28, 2009 at 12:19 AM    

I am having a problem with my youtube video feed widget. Everytime I change something in the title of a video-this punk rock group intermintently puts inself in place of the specified video. This has happened many times.I have done everything I know to stop this. Here is a new page I am making

The intruders youtube name is KakashiMr
The title comes up as undefined intruder when it knocks my James Dean Video off Bloggersentral is a great site that I have gotten many tips from. My main site is which I am still working on. Email me at

Greenlava October 28, 2009 at 2:31 AM    

View my answer in the Any question/comment? gadget in the right sidebar.

HillBillyFilly October 28, 2009 at 5:29 AM    

Thanks for the answer & your time GreenLava, but it didn't really solve the problem as I would like. Yes I am aware of how to embed a youtube video and have done some both ways(widget & embed)

Yes I did just want that one James Dean video to load as I thought it good to put on my Obit page. The keywords I used should bring that one video in exclusively. And did and does on others till I go back and change the title or something, and then here comes the same guys with the same videos--no matter what the keywords. They did it on a Shirley Temple--they have skulls & punk. It's some type of security breach, and it almost has to be being perpetuated by them. I did a malware check on my computer & the program did find 1 malicious, and removed it. Thought that solved my problem but it did not. I guess I will have to report to Google & YouTube. If anyone knows anything let me hear from you.
Thanks Much

Greenlava October 28, 2009 at 9:43 AM    

Try reporting it in YouTube Help Forum.

Jon October 29, 2009 at 4:11 AM    

When I insert the styling code, it styles the tabs fine but changes the background of the entire blog to white. What do i do to keep it black?

Greenlava October 29, 2009 at 4:13 PM    

1. Make sure you copy the full code. Do this by hovering the code, clicking View Source and select all in the source code window.
2. Paste the code immediately before ]]>< /b:skin > line.

Cara Powers October 31, 2009 at 1:41 AM    

I'm trying to change the font to Verdana Bold and to remove the space between your navbar hack and my header; I'm unsuccessful so far. Help?

Greenlava October 31, 2009 at 2:18 AM    

Cara Powers,
I answered your question in Blogger Help Forum

melandria November 10, 2009 at 12:24 AM    

thanks i did it but still in the process of customizing it. thanks a lot.

CindyD November 21, 2009 at 1:05 AM    

Your blog is fantastic. The best one I have come across. I put in the tabs, but wondered if I could connect three page URl's to one tab. In other words I want to have three pages to be able to open under one tab. Does this make sense?? Thank you so much for all your help.

Greenlava November 21, 2009 at 2:55 PM    

Make sense to me. Read my answer here: Opening multiple links in a single click

TwentySomethingMomma November 23, 2009 at 5:41 AM    


I followed the above steps and was able to get the navigation bar successfully on my blog. However, the nav bar does not appear to be centered - instead it seems to be aligned to the left. Is there any way I can fix this? Thanks!

feathersfromabird November 23, 2009 at 8:34 AM    

Love this blog Greenlava! Can u help me with one thing please.
I just added the menu bar to my blog, but I just can't get it to place in the center instead of left/right! Please help me before I go crazy! :p



Greenlava November 23, 2009 at 1:26 PM    

I've updated the post to include bar centering. Please read Step 4. Customizing.

You need to add div id in the HTML code -line 2 and 8, then add line 5 in the CSS code.

You only need to add line 5 in the CSS code.

Samot November 24, 2009 at 4:43 AM    

Hi there; my nav bar is working perfectly, but a problem appears: i had the blogger navbar hidden but now with the custom navbar code it shows again. If i cut the old code where it belongs (exact same place than the custom bar code is now) a white background apears and everything turns into a mess. Please help!

Samot November 24, 2009 at 4:47 AM    

Lol, problem solved pasting the custom navbar after the code that hides the blogger bar instead of viceversa. :P

Barbara November 24, 2009 at 10:35 AM    

I followed the above steps and was able to get the navigation bar successfully on my blog & renamed the tabs. Thanks so much. This was helpful. I now need to know what url to put in "yourlink" section. I'm new to this and I'm very lost.

Greenlava November 24, 2009 at 2:37 PM    

To get an url is easy. First go view the page that you want to link to in your browser. The url for that page is inside the address/url bar on top part of your screen. You want to copy and paste it to replace "yourlink".

koco December 4, 2009 at 3:32 AM    

how to post code adsense in sidebar

Greenlava December 5, 2009 at 7:10 PM    

Go to Layout>Page Elements, click Add a Gadget, and select HTML/Javascript.
Copy the adsense code and paste it in the content box.

e-space December 6, 2009 at 4:19 AM    

Hello, this was really helpful, but i need to ask one question. I want to set my navigation bar(i made background color transparent) on the image, or to make my image to be a background of the navigation bar, how can i do it. Thanks

Greenlava December 6, 2009 at 3:07 PM    

To make an image as your bar background, in step 3 add background: COLOR url(IMAGE_URL) repeat-x; inside #navibar (line 5)and change background:wheat to background:none inside #navitabs (line 2). Replace COLOR with a color code and IMAGE_URL with the url to your background image.

365 Cheap Dates December 8, 2009 at 7:43 AM    

Thanks! It worked for me! But I ended up "upgrading" to your multi-level drop down menu, which is awesome and saves me so much space on my blog (check it out!). Thanks again!!

Greenlava December 8, 2009 at 1:38 PM    

365 Cheap Dates,
I see the bar but can't see the dropdown when hovering. You set the background color codes wrongly.
Line 14 to 16: #grey, firebrick and #indianred. Colornames do not require pound sign(#)

Kirigalpoththa December 10, 2009 at 1:48 AM    

Thanks very much! It worked for me!!! :)

Brumby December 15, 2009 at 1:06 PM    

Hi Greenlava,
Thank you for your tut, it is very easy to follow, despite this I seem to have mucked up.
I am currently running a test blog so there is minimal disruption on my blog while I renovate, the test blog is
I am trying to do a horizontal nav bar using 5 images which are been hosted by Flickr. I would then like each of these images to change when hovered over, again using images hosted by Flickr. Each has a link to either static page, or label pages within the blog.
When I tried just putting your plain tabs on it worked, but as I added the images it all disappeared, initially it skewed all my formatting but this seems to have rectified itself now.
Any assistance you could offer would be great, I have already tried a few changes from other comments you have made but no luck.

Greenlava December 15, 2009 at 7:40 PM    

To use images (an image per tab),
1. You need a unique id for each tab. Add the id in the HTML. Example, for tab1:
[a href="YourLink1" id="tab1" class="navitabs" title="TooltipText1"]ButtonText1[/a]
2. Then in CSS, add:
a#tab1 {background-image: url(TAB1_IMAGE_URL) no-repeat;}
a#tab1:hover {background-image: url(TAB1_HOVER_IMAGE_URL) no-repeat;}

Add those codes for each tab. Make sure image size matches tab size.

Brumby December 16, 2009 at 8:43 AM    

Hi Greenlava,
Thanks for these additional pointers, I have made these adjustments but still to no avail. This is the HTML in my 'gadget'

[div id="navibar"]
[a href="" id="brumby" class="navitabs" title="brumby">BrumbyMusingsWotM?DIYEmporium[/div][/div]

And this is the code in the CSS

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:200px; height:90px; margin-top:2px; margin-bottom:2px;text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:90px; overflow:hidden; float:left;}
a.navitabs:hover {color:black; background:white;}
a.navitabs:active {color:white; background:black;}
#navibar {width:1000px; margin:0 auto;}

/* Navigation bar images start*/

a#brumby {background-image: url(;)no-repeat;}
a#brumby:hover {background-image:url(;) no-repeat;}

a#musings {background-image:url(;) no-repeat;}
a#musings:hover {background-image:url(;) no-repeat;}

a#wotm {background-image:url(;)no-repeat;}
a#wotm:hover {background-image:url(;)no-repeat;}

a#diy {background-image:url(;) no-repeat;}
a#diy:hover {background-image:url(;) no-repeat;}

a#emporium {background-image:url(;) no-repeat;}
a#emporium:hover {background-image:url(;) no-repeat;}

/* Navigation bar images end*/
/* Navigation tabs end */

Can you see where I have mucked up at all?

For some reason blogger keeps swapping the order of the HTML so the id is in the middle of a href so it reads [a id="brumby" href="" class="navitabs" title="brumby">Brumby</a] instead. Could this be why? And any way I can stop this from happening?

Thanks again! I am so excited at the prospect of getting this working!

shelter sublime December 16, 2009 at 12:27 PM    

after linking a blog post to a tab, how can i remove it from my archives without deleting the post all together?

Greenlava December 16, 2009 at 2:30 PM    

1. Find this:
.post ul {
list-style:square inside url("");
margin:0 0 0;
padding:0 0 0;
/* Comments

there's a missing closing brace that makes your tab stylesheet has no effect on the tab. Add it before /* Comments line, like this:
padding:0 0 0;
/* Comments

2. Delete this:
a.navitabs:hover {color:black; background:white;}
a.navitabs:active {color:white; background:black;}

3. Slight change to each tab styling, and its hover counterpart:
a#brumby {background-image: url(;)no-repeat;}
change it to this:
a#brumby {background: #333333 url(;)no-repeat;}

#333333 is background color, change this with your own.

4. Remove text in HTML:
[a id="brumby" href="" class="navitabs" title="brumby"]Brumby[/a]

Good luck

Greenlava December 16, 2009 at 3:25 PM    

shelter sublime,
You mean remove from BlogArchive gadget? You can't. But if you want to "remove" it from the homepage (which displays your most recent posts), you can change the posting date to a date in the past. Or you can try this Creating static pages in Blogger

shelter sublime December 20, 2009 at 4:17 PM    


you are genius. without you the blog i am building for my husband's small biz would be nothing. thank you for your so-easy-to-follow-even-i-can-do-them tutorials. i look forward to your future posts. thanks again!

Dee December 21, 2009 at 9:43 AM    

First of all, thank you so much for sharing your expertise, greenlava!

I just put a navigation menu horizontally, but I'd like to a) stylize (make it look nicer with color coordination to my blog) and b) want simply the menu tabs to act as "labels". I have labels on the side of my blog as well, but I wanted to separate the labels into 2 large groups due there being so many. Hope this makes sense.

Here's my blog to help provide a visual:

Thank you!

Greenlava December 22, 2009 at 12:52 AM    

a. Styling the tabs is explained in Step 3. Tab background colors are defined in code line 3 (color during normal times) and in line 4 (color during mouseover).
b. The link for a label page takes this form:
where LABEL is your label such as bakery, music, etc. If you reblace that label with "bakery" then the url will take you to a page showing all posts labeled "bakery". You can't combine many labels under one url (this is what you are trying to do I think).

Deborah December 22, 2009 at 3:43 AM    

Hi Greenlava -

I've installed the navigation bar per your instructions and now I would like to install the tabs: one for translation, one for search and one for bookmark.

I tried copying the script for one and inserting it into the your link 1 part of the html but that just really messed it up.

So how do I insert these widgets into menu bar?

Thank you for your help

Greenlava December 22, 2009 at 11:38 PM    

That portion of code is for direct link to a page only, you can't put widget in it.
How about you try this(using another HTML/Javascript gadget first):
Paste the widget codes one after another inside that same gadget. See how they come out.

Danny December 24, 2009 at 5:37 AM    

Thanks for this easy solution. I do have one problem, however. The base, hover, and active colors & backgrounds work fine until I hit the browser's (IE7) back button. If I click on button 1 and move to another page and then go back, button 3 looks like the active button until I click somewhere else on the page. If I select button 2, then button 4 misbehaves. Click on 3, guess what, button 5 misbehaves. Your thoughts are appreciated.

Gina December 24, 2009 at 8:57 PM    

Hi Greenlava, I use the Professional 2 template, which already has a "linkbar" built in, and I installed it this morning. But I have two problems:

1. How do I get the tabs to start lining up on the left side?

2. One of the tabs is "Recipes", where I want only the posts with recipes to appear. Is the solution the same as you gave "Dee" on Dec. 22? If so, do I have to give recipe posts only the label "recipe" and delete all the other labels for that post?


Greenlava December 25, 2009 at 12:34 AM    

1. Find this in your template code:
#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 20px 7px 20px;
text-align: center;

change text-align from center to left.

2. Yes label them "Recipe". You can keep other labels. Labels are case sensitive, make sure the actual label and link label match.

Stacie December 26, 2009 at 11:41 AM    

WOW! Your blog is unbelievable! You are so kind to share and so helpful to go back and help us as we wade through figuring out how to make a free blog fabulous! You are saving me a great deal of money and giving me a great deal of pride in myself as I follow your directions and magicaly my blog does what it is supposed to! Thanks so much!

Greenlava December 26, 2009 at 7:24 PM    

My pleasure Stacie :)

dana December 30, 2009 at 10:22 AM    

Great tutorial. THANK YOU for sharing with us!

REILA. :) January 1, 2010 at 5:27 PM    

THANK YOU SO SO SO SO MUCH. i've been dying to put some on my blog and accidentally stumbled on this article of yours. this is so nice! ^^

Brumby January 3, 2010 at 12:33 AM    

Me again (comment response 91). I have just got around to trying your suggestions and have succeeded in a couple of points. But those darn images are still not showing up. I have followed instructions 1-4 to the letter I believe but they are not cooperating with me. I am starting to feel like a complete goof for being so silly, would you mind a little more help for a fool? Also, I removed html code as per point 4, but how do I link each image, (when I finally get them to show) to the pages I want them to without the code?

Greenlava January 3, 2010 at 1:12 AM    

1. You want to remove the semicolon after .jpg (in bold), example:
a#brumby {background: #fff url(;)no-repeat;}
you should be able to see the images after that.
2. Now that you can see the image, remove the link text (the word "Musings", in bold), example:
[a id="musings" href="" class="navitabs" title="musings"]Musings[/a]

Good luck, once again :)

Hijab Galore January 3, 2010 at 5:49 PM    

Hi Greenlava,

i manage to create navigation button as per your tutorial in this site.. but, can you please teach me how to add page in each button that i created?


happy new year 2010.

Brumby January 4, 2010 at 6:09 AM    

Thank you SO much for your help and patience. IT WORKED! Cannot express how grateful I am.

Greenlava January 4, 2010 at 10:32 AM    

Hijab Galore,
Please read step 2 no. 6.1

Marti Icenogle January 6, 2010 at 3:09 PM    

I have followed your tutorial and created the navigation bar for my blog and all works except the active tab. It does not show any color other than the standard for all tabs and changes only with hover. I know I must be doing something wrong but I don't know what it is. Here is my relevant code--

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:125px; height:30 px; background:white; padding-bottom:20 px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12 px; color:black; line-height:30px; overflow:hidden; float:left;}
a.navitabs:active {color:white; background:black;}
a.navitabs:hover {color:white; background:black;}
#navibar {width:894px; margin:0; border-bottom: 2px solid $blogTitleColor; auto;}
/* Navigation tabs end */


Thanks for any assistance you can provide.

Greenlava January 6, 2010 at 8:16 PM    

Marti Icenogle,
For active pseudo-class to work, you must declare the link in this order: link, visited, hover, active.

Marti Icenogle January 6, 2010 at 11:06 PM    

Thanks for the quick response. I have made the change--but the active tab doesn't change. Here is my new code:
a.navitabs:hover {color:white; background:black;}
a.navitabs:active {color:white; background:black;}
What else do I need to look at?


Greenlava January 7, 2010 at 2:29 AM    

Marti Icenogle,
But it does work. But Active only works the moment you click the tab, once you release it's gone.
Are you trying to keep a tab highlighted when its corresponding page is open?

Marti Icenogle January 7, 2010 at 9:28 AM    

YES. I thought that was what active controlled. I had started with a different template and it worked that way. Is there any way I can have it keep the tab highligted easily? If it takes lots of coding I will pass.

Aung January 8, 2010 at 12:47 AM    


Thanks for sharing useful tutorial.

Victoria Winters January 8, 2010 at 3:25 AM    

This is the first tutorial that I have successfully used to create a tab menu! Thank you so much! Now, one minor question (I hope). How can I customize the tabs to have rounded edges?


Victoria Winters January 8, 2010 at 4:36 AM    

Help! Why is it wrapping? I've got it set at 450px width just like the header is. I've tried various lengths, but it either cuts off or wraps.

#header, #content, #sidebar, #footer, .widget {
overflow: hidden;
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:137px; 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:450px; margin:0 auto;}

wafawj January 8, 2010 at 4:59 AM    

Thank you for the code, it worked perfectly, I even changed the font size tab color and width.

Now suppose I want to change the look of the tabs suppose rounded edges and making them radiant, how can I do that?

Thank you

Greenlava January 8, 2010 at 10:20 AM    

@Marti Icenogle
Rebuild your navigation bar, using this method

You're welcome

@Victoria Winters
I see the CSS and navibar-wrapper but not the gadget. Did you remove it on purpose?

@Victoria Winters
You need to use background image. To get your buttons, go to
You might want to read my discussions with Brumby.

Remodelaholic January 8, 2010 at 12:43 PM    

I used this navbar in my blog and have really liked it! But, now I am trying to dress my blog up a little more, and would like the links to be images (without the actual bar).

Right now I am working with two test images, and followed your instructions to Brumby, but the images still aren't showing up, even though the links are actually working, the images and words are just invisible!

I don't necessarily want or need the button to change when you hover over it, I just want the image to be the link. I am not sure how to change it all, and am in too deep to figure it out.

I am doing this on my very messy test blog. the address is

I would love your help!

Thanks for your blog I LOVE it!

wafawj January 8, 2010 at 4:47 PM    

Thank you Greenlava for your response, I really did not read all the responses here sorry, I will make sure to do so next time :), I will try it and let you know if it worked out or not. Thanks again

Greenlava January 8, 2010 at 5:50 PM    

Please recheck your background syntax. Example:
a#HOME {background: #333333 url("") no-repeat;}
1. Make sure there no gap between URL and ("http...
2. Image link must be enclosed with quotation marks and brackets, like this ("link").
3. Some links have semicolon before the closing bracket. Remove them, they don't belong there.
1. Replace backround-image property (you use this in hover) with background. Background-image doesn't seem to work, I don't know why.
2. Change BLOG ROLL and BEFORE/AFTER with one-word ids -BLOGROLL and BEFOREAFTER? Don't forget to change them in HTML too.
Good luck
*Actually I have the corrected code with me. Posting the corrected code here would be too easy, wouldn't it? :)

Rose Bridger January 10, 2010 at 12:32 AM    

Great, I managed to do it and it looks great with the colours, plus I can esily add more buttons later , Thank you so much for this tip!

Marti Icenogle January 11, 2010 at 2:42 AM    

Thanks for the suggestion to try the other method so that the active tab can be highlighted. Unfortunately my CSS knowledge isn't sufficient to translate all of the changes needed into the template I am using. And, I am way too far along to switch templates I will keep this bookmarked for later when I can spend sometime figuring out the needed changes.


Broxholm Road January 12, 2010 at 4:48 PM    

Thank you so much! I tried it and it works!

Greenlava January 13, 2010 at 12:53 AM    

@Rose Bridger
You're welcome

@Marti Icenogle
Remember that method only works with Blogger LinkList gadget.

@Broxholm Road
My pleasure, do come back...

sherry January 13, 2010 at 2:17 AM    

This worked out very well. Thanks! I have only one question: there is a slight gap between my header & the navigational tabs (buttons). Any way to get rid of the gap?

niteswimming at blogspot

Greenlava January 13, 2010 at 11:22 AM    

Welcome to Blogger Sentral.
Find this code:
#header-wrapper {
margin:0 auto 10px;
border:0px solid #999999;
change margin to margin:0 auto 0;

and this code:
#header {
margin: 5px;
border: 0px solid #999999;
text-align: center;
change margin to margin:none;

this will also fix the left edges' alignment.

Emily January 14, 2010 at 11:30 AM    

Greenlava, thank you for the tutorial on adding a navigational bar.

My question is... I followed the steps and added the bar. I also fixed it to my liking. The only issue is that between my header and the nav. bar, the word tabs is visable.

How do I fix this?

Greenlava January 14, 2010 at 3:32 PM    

That's your widget title.
Go to Layout > Page Elements > Edit and remove the title.

Emily January 14, 2010 at 10:25 PM    

Worked like a charm. Thanks!!

mom January 15, 2010 at 1:39 PM    

your info. is great it has even helped me someone with no html experience. I was able to get the navigation bar up but I can't seem to style it. I posted it immediately in front of the code <![CDATA{/* I don't have the other code or can't find it any suggestions?

Greenlava January 15, 2010 at 2:48 PM    

Paste it before (above) ]]>< /b:skin >

Pharaoh January 16, 2010 at 10:08 AM    

thanks alot this really helped me fix my blog out some, thanks alot

TART January 17, 2010 at 8:36 AM    

The template I am using already has some links at the top. How do I get them off so I can put the buttons up?

Katherine January 17, 2010 at 9:34 AM    

Thank you for this post, it was very helpful.
I've been wanting to add a navigation bar for some time.

Greenlava January 17, 2010 at 9:54 AM    

You're welcome

My pleasure. Don't miss out on upcoming tutorials, follow me or subscribe my feed.

Greenlava January 17, 2010 at 10:11 AM    

First backup your template.
The menu is not a widget, so you have to go to Layout>Edit HTML. Find this code (replace [] with <>)and delete it, starting from [div until [div]:

[div class='menu'][ul]

Then the CSS part. Find and delete (including the curly braces and their contents):
.menu ul li a {}
.menu ul li.current_page_item a {}
.menu ul li a:hover {}

Good luck

TART January 17, 2010 at 11:22 AM    

That was excellent. You really know what you're doing. I appreciate the help.

I have one more question if you have time to answer. My gadgets have a design on them --like lines paper. It looks great for the ones on the right. But the new buttons have this white block behind them and I don't know how to get rid of that. Also, is there a way to get rid of a little space in between my blog title and the buttons?

Sherri January 17, 2010 at 12:42 PM    

Thank you so much for all the information but I am stuck. This is the code I have in my HTMl

/* 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 */

But it shows up at the top of my blog see here.

Greenlava January 17, 2010 at 5:22 PM    

Paste it BEFORE ]]>< /b:skin >, NOT AFTER.

Greenlava January 17, 2010 at 5:48 PM    

1. To remove the background, add this code:
#HTML1 .widget-content {background:none}

2. To reduce the gap, find this:
#header-wrapper {
margin:0 auto 10px;
change height from 153px;to none;

and find this too:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
change the last number in margin and padding to none.

...and you might want to change navibar width to 960px to match that of the header's.

TART January 17, 2010 at 10:23 PM    

Thanks again, I really appreciate the help. I just don't know where to put #HTML1 .widget-content {background:none}

I've inserted it in a bunch of different places because I didn't want to bother you again! But I can't figure it out.

Greenlava January 17, 2010 at 11:19 PM    

Put it before ]]>< /b:skin >

Volante Research January 17, 2010 at 11:23 PM    

Hi Greenlava, your tutorials are great! but I still have one little problem, how can I upload my flash menu bar into blogger and how can I make it work? I'm trying to use my main website template on my blog but without luck. Thanks!

Kate January 18, 2010 at 12:42 AM    

This was great, Really easy to follow. Thanks a million. I have to add more links when I have them ready but am deilighted with the results and I don't even have to change the colours coz they already match my blog!

Sarah January 18, 2010 at 5:03 AM    

Greenlava: Great instructions!
I have my menu bar - and like mustbedgy, I want to post to my "static" pages (Recipes, Memories, etc.).

I added a label and a link to the label, but when I added a post, it is only on the Archives under Labels and Categories and is showing on every page ....not just on the page it should show up on.

If you have time, please look at my blog ... ....check out the Memories page (where I entered "test"). It shows as an Archive on that page and on the Recipes page.

What have I done? Or, more accurately, what have I NOT done?

Again, many thanks!!


Greenlava January 18, 2010 at 9:09 AM    

@Volante Research
Normally you can just put the code inside a HTML/Javascript gadget, but it really depends on the instuction that comes with the menu code.
To put it in HTML/Javascript gadget, first do step 1. Then in step 2 use your flash menu code instead of mine.

Greenlava January 18, 2010 at 10:02 AM    

Glad you like it.

Go to Layout>Page Elements and Edit the LinkList under the header. For "Memories" enter this link:

Did you apply some kind of hack to your template? (It acts differently) If you did, then I'm sorry I can't offer much more help, because I don't know what it's supposed to do.
If you want to revert to the default settings, go to Layout>Edit HTML and click the "Revert widget templates to default" in bottom left corner.

Emily January 19, 2010 at 5:56 AM    


I added the nav. bar perfectly on one of my blogs but when I added it my 2nd blog, there are problems.

When you click on "Menu" or "Side Dish", the posts with that label comes up perfectly but if you click one of the other, the post do not come up. I can't figure out what is going on.

The posts were alread on the blog when I added the nav bar.

Thanks for any advice.

Emily January 19, 2010 at 6:05 AM    

Thanks Greenlava..

I fixed it. It was due to caps.

mmc January 19, 2010 at 5:55 PM    

Hi, i keep getting the html on top of my page. pls help

Greenlava January 19, 2010 at 7:49 PM    

Paste the styling code BEFORE(above) ]]>< /b:skin >, not AFTER.

Sarah January 19, 2010 at 10:42 PM    

Oops ...guess my "hokey" fix didn't work, after all. When I page down further, the extra heading still appears (Tips to Share).

Can you check

Thanks again!!

Greenlava January 19, 2010 at 11:54 PM    

What you consider headings are in fact post titles. From what I see, you have 3 posts labeled under "tips-to-share". One post is untitled, two posts are titled Tips to Share.
Please don't title your posts using labels word for word, you'll get confused.
Labels are used to categorize posts.
Take for example your "recipes" label. The titles of your post under that label should not be Recipes, it should be something like Lemon Chicken, Potato Soup, Southern Fried Chicken etc. So when a reader click Recipes tab, your Lemon Chicken, Potato Soup, Southern Fried Chicken will be come out.

Sarah January 20, 2010 at 7:54 AM    

Greenlava - Got it!! Made changes.

Thank you, again!

mmc January 20, 2010 at 3:12 PM    

AWESOME! How can i miss that?
Thanks so much!
You're the best!

i.k.y January 21, 2010 at 9:32 AM    

awesome, thanks

GM January 24, 2010 at 6:58 AM    

Hi there, this is a great step by step tutorial. I wish I could be such a great tutor..... Please keep the spirit. Very helpful indeed!

Greenlava January 24, 2010 at 9:27 PM    

@Sarah, mmc, i.k.y
My pleasure guys

Thanks for the kind words :)

Maggie January 25, 2010 at 9:56 AM    

Thank you so much. Your tips were very easy to follow!

Frk. Fosli January 25, 2010 at 6:49 PM    

My blog:

Thanks alot for this great tut! I've tried several tut's with no luck - but this one was simple and easy to follow. Nice work:)

I struggled for a long time trying to make my navbar center, but finally comment #128 solved my problem. It's still a tiny difference between my header and the navbar, but I think it has to be that way: my header is 920px and I have seven tabs wich don't come out as an even number when divided on 920.

My only question for you is: How do I add some space between the navbar and the main content? As you can see the navbar is very close above the postings and sidebar, and I really really want some white space :) Hope you can help!

Greenlava January 25, 2010 at 10:31 PM    

@Frk. Fosli
Try adding bottom padding in step3 code line 4, like this:
#navibar {width:760px; margin:0 auto; padding-bottom:30px;}

Frk. Fosli January 26, 2010 at 12:56 AM    

Great, thanks a lot :)

webbyidiot,  January 27, 2010 at 4:03 PM    

hi i'm testing it out on a test blog. so far it works perfectly but i do have some questions. How do i get e posts that are labelled to appear under e relevant tabs exactly? Because when i check my blog it shows all e posts on e main blog even though i've added labels to them. Is there any way to prevent all e blog posts from appearing on one page when one enters the blog?

Greenlava January 27, 2010 at 4:51 PM    

Use the label page link format as shown in Step 2 6.1. Labels are case sensitive, make sure your actual label and the one in the link match.

Dan Wells January 27, 2010 at 11:41 PM    

Worked perfectly. Thank you

Anuj Gupta January 28, 2010 at 12:44 AM    

Hi I loved your post and made my first blog for a non profit organization that i volunteer for.

this is my blog:

I have learnt to write a new post, takes its URL and link it under the navigation tab that I want it by replacing the yourlink. I have two problems:
1. All the posts that I use to link appear in the navigation tabs as desired, but they also get stacked up on the homepaage and I am not able to remove them from their. I just want them to occur on the desired navigation page.

2. On a desired navigation tab, If I want a new entry, keeping the old post below it, how shall I do it. "your link can be replaced only once"

sunrise January 28, 2010 at 10:50 AM    

I have a problem after the tabs are the numbers 34567. The change over for january removing line 4 above was confusing but I assume I was to remove line 4 which was #navibar {width:760px; margin:0 auto;} and "replace" it witha.navitabs:active {color:white; background:indianred;}.

Greenlava January 28, 2010 at 3:32 PM    

@Dan Wells
You're welcome

@Anuj Gupta
1. What you want is static pages. Read Pages come to Blogger In Draft
2. Use label to categorize your posts. For example, categorize all your weekly update posts under "Weekly Update". Then behind "Weekly Update" tab use a label page url as explained in step 2 6.1.
You can label a post when creating it (see the bottom of your post editor), or you can try this method to label existing posts: Adding, removing and renaming a label across multiple posts.

Greenlava January 28, 2010 at 3:47 PM    

You must've copied the code direct from this page. To copy the code properly, read the FAQs
Do not use that code in Jan's update. It was just an info telling that the original code included that line (which no longer in use). Anyway I've removed it to avoid confusion.

Heather January 29, 2010 at 4:50 AM    

Thank you so much for this tut! I have done all I can with it, but for some reason the tabs are aligning themselves starting over my first sidebar? I use Minima Lefty with two right sidebars. You can see it at How do I get the buttons to align themselves under my title box and not over the two sidebars?

I can paste my coding if you need it. I'm not very good at html.

Greenlava January 29, 2010 at 12:18 PM    

Your tabs is in the sidebar. You need to move it to under the header.
Minima Lefty...I think you don't have to do any HTML, just go to Layout>Page Elements. Drag and drop the HTML/Javascript gadget into the Add A Gadget box under the header.

Matt Holland January 29, 2010 at 8:07 PM    

How do you write a url for a widget. I have a load of widgets down the right hand margin but they can't be seen unless you scroll down so wanted to add links to them at the top. Can I do this?

Heather January 29, 2010 at 11:05 PM    

Thank you so much! I've bookmarked this site, the help here is phenomenal. Thanks for sharing all these tips.

Greenlava January 29, 2010 at 11:50 PM    

@Matt Holland
To make in-page navigation,
First find the widget id.
Then use the id (with # as prefix) as the link. For example, to jump to "Guides" widget, use this link:
[a href="#LinkList2" class="navitabs" title="Jump to Guides"]Guides[/a]

Matt Holland January 30, 2010 at 4:26 AM    

Thank you for your help Greenlava feel like I have more control over my blog now


Greenlava January 30, 2010 at 3:37 PM    

@Matt Holland
The tabs work! Now put the icing on the cake by adding a floating “back to top” button

Pharmajobsindia February 3, 2010 at 10:58 PM    

Dear friend your Home All post Faqs tabs are good and the tab has search baar. if you dont mind kindly guide me i have 5 tabs. please set to Thisaway blue templete

Sayyidi Family February 3, 2010 at 11:35 PM    

Is there a way to change the color of tab by using hex code, I tried and it didn't work.
Thank you so much. This is such a great resource.

Greenlava February 4, 2010 at 12:14 AM    

To include search bar, put the search bar code right after navigation bar code, in the same HTML/Javascript gadget:
[span style="float:right;"]SEARCH BAR CODE HERE[/span]. Replace [] with <>.
You may need to fine position the search bar by adding margins inside the span tag styling.

Greenlava February 4, 2010 at 12:27 AM    

@Sayyidi Family
Assalamualaikum, maybe you forgot to put the pound sign, as in #123456.

Stuart February 6, 2010 at 8:27 AM    

I am also trying to get rid of the gap between the banner and the menu bar but I don't have #header-wrapper in my code.

I also want it aligned to the left and as wide as the banner. How do I do this?

Greenlava February 6, 2010 at 8:05 PM    

You placed the widget inside an existing wrapper (crosscol-wrapper), so it inherits the stylings of that wrapper. Some of the fixes below are needed just to undo that inherited stylings:
1. In step 3 line 2, change margin-top to 0px.
2. In line 4, change to this:
#navibar {width:1000px; margin:-0.5em 0 0 -1em;}
3. Find this code:
[div id='crosscol-wrapper' style='text-align:center']
change it to this:
[div id='crosscol-wrapper']

Good luck

Stuart February 9, 2010 at 1:53 AM    

Thanks, thats great.

Is there a way to get rid of the little dividing line between the banner and the menu?


Greenlava February 9, 2010 at 9:00 AM    

Try this, remove border-bottom:dotted 1px #e0ad12; inside #header.

LK February 9, 2010 at 8:16 PM    


lisarenata February 11, 2010 at 11:06 AM    

So I am fairly new with all this HTML stuff, but the way you show us step by step has made it fairly easy for me to understand. I actually was able to set up the navigation bar with no problems. Yey! Now I am off to customize the darn thing.
If I have any problems I know who to go to. ;)
Thanks a million!

Punken February 19, 2010 at 1:10 AM    

Thank you this was very helpful!

Jos February 20, 2010 at 4:14 PM    

Have implemented the new static pages in blogger as a navigation bar (horizontal)
And due to your post about different layout/styling to static pages, been able to change those. It worked perfect, thanks!

I also want to change the styling/layout of the navigation bar. Perhaps use buttons with a picture background of water similar to my header.

Do I have to go 'back' to your fix to be able to do that or can you tell me how to implement that with the (new) static page feature in blogger ?

my blog:

Many thanks!

Greenlava February 20, 2010 at 10:13 PM    

If you want to put a different image to each tab, then you have to make a new set of tabs using this article and read my discussion with Brumby starting on comment#87.
If you want to use similar image for all tabs (except for current page and during hover of course), you can keep your existing bar. And you might want to read Highlighting current page tab in navigation bar (0)

Angela February 24, 2010 at 8:08 AM    

Thanks so much. Worked out perfectly!

Ida Mae February 26, 2010 at 9:22 AM    

thanks! I have been trying to figure this out for a week :)

Jos February 28, 2010 at 3:33 PM    

I've been implementing several of your codes in the last week; navibar, numbers on comments and so on. Still need to tweek the navibar to reflect rainbow colours when you hoover over them, but that will happen to.
You can see the results at:

I wanted to thank you very much for your work and guidance. It has been very helpful!
I've subscribed and will come back!

Greenlava March 1, 2010 at 12:33 AM    

My pleasure.

Your blog looks really good and it looks like you put a lot of thoughts in every post and page.
To reflect rainbow when you hover the tabs (I know you are working on it, but I just could not resist :)), use the rainbow as navibar background. And when you hover, remove the tab background, thus exposing the rainbow.
a.navitabs:hover {
color:black; background:none;
font-weight: bold;
#navibar {
width:785px; margin:0 auto; height:20px;
background:url( repeat;
and you want to lose the 1px top margin in navitabs too.

Anonymous,  March 1, 2010 at 5:21 PM    

thank you very much

Jos March 1, 2010 at 7:20 PM    

What you did in a short time, would have taken me a lot longer. A very neat solution, indeed!
My thanks once again.

Rainedrop87 March 3, 2010 at 7:26 PM    

very helpful! Thanks alot dude!

Rebecca March 6, 2010 at 10:20 AM    

Sweet! I did it!

Wonderfully Made..... Psalm 139:14 March 10, 2010 at 8:47 PM    

YES YES YES! This is what I was lookinf for. SO excited! Thanks so much!

«Oldest ‹Older 1 – 200 of 384 Newer› Newest»
Click to go to top Click to comment