Free CSS Navigation Menus in Blogger. ~ The Blog Doctor.
Loading...

Free CSS Navigation Menus in Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

A reader wanted to know how he could add a navigation menu bar in the header. You can add your most frequently occuring labels as tabs in the header (See header of this page) but if you want to add only four or five links like in the picture below :


here is an easy method to do so..............


CREATE POSTS


The first step is to create posts which will be linked to the various links in the menu bar. Create a post and title it 'Contact' and put in it all the information on how you can be contacted. If you want to remain anonymous you can put in an email form on the page. Publish the post and copy down it's link from the post title. Paste link in a Notepad file and save.


Create another post and title it 'Subscribe'. Put in it all your feed information and publish it. Copy down the link of the post to the same Notepad file and save. Create another post called 'Archives' and in it put all the links for your posts. Publish it and get it's link in same way.


Lastly create a 'Copyright' post and do the same. Login at Blogger.com and click 'View Profile' link on Dashboard. Your profile will open. Copy the link of the profile page from the address bar and save in the Notepad file.





GET IMAGES FOR MENU BAR


To choose the images for the navigation bar go here. They are available for commercial or private use and you can doownload them from free css navigation menus.


After this unzip the file and upload the images you want to a free host and copy their links to paste in the code in the next step.





ADD PAGE ELEMENT TO HEADER


The second step is to add a Html Page Element to the header. For this follow these steps :

1. Login at Blogger.com and click 'Layout' link on the Dashboard.

2. The Page Elements tab will open. Click Edit Html subtab of Template tab.

3. The Edit Html tab will open with the Template Code box.

4. Scroll down in the Template Code box to this code :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Change above code to :

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>


Save Template.

5. Switch back to Page Elements tab. Click 'Add Page Element' link in the header.

6. In popup window choose Html/Javascript option.

7. Copy the code below and paste it in the contents window (leave Title blank.) :

<style type="text/css">
/*- Menu Tabs J--------------------------- */

#tabsI {
width:660px;
margin:5px 5px 0;
background:#000;
font-size:93%;
line-height:normal;
border-bottom:0px solid #24618E;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 10px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("LINK_OF_tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("LINK_OF_tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
<div id="tabsI">
<ul>
<li><a href="BLOG_URL" title="Home"><span>Home</span></a></li>
<li><a href="LINK_OF_CONTACT_POST" title="Contact"><span>Contact</span></a></li>
<li><a href="LINK_OF_SUBSCRIBE_POST" title="Subscribe"><span>Subscribe</span></a></li>
<li><a href="LINK_OF_COPYRIGHT_POST" title="Copyright"><span>Copyright</span></a></li>
<li><a href="LINK_OF_PROFILE" title="About Us"><span>About Us</span></a></li>
<li><a href="LINK_OF_ARCHIVES_POST" title="Archives"><span>Archives</span></a></li>
</ul>
</div>


Replace the CAPS at the bottom with the links to the various posts created and paste the links to the uploaded images "LINK_OF_tableftI.gif" and "LINK_OF_tabrightI.gif". Save Page Element and you are done. View Blog. See picture below :



You can arrange it below the header by dragging it below the title on the Page Elements tab.


Enjoy!


139 comments:

Tannis said...

I think I have followed your instructions however I can't seem to get the tab images to work. Also how can I change the colour of the links to white and make them bold and centred.

I am brand new to blogging but have become addicted. Your blog is amazing thanks to much.

my blog address is http://covetjewellery.blogspot.com/ so you can se what I have done or not done.

Vin said...

Tannis,

Your image links have to be changed from :

http://arebelami.googlepages.com/tabrightH.gif_tabrightI.gif

TO :

http://arebelami.googlepages.com/tabrightH.gif

Tannis said...

Awesome, thanks. Now one more, how do I make them bigger so they strech across the page?

Tannis said...

OK, I got the menu bar bigger and changed the colour of the font, but for some reason there is a gap in the image for the menu bar. I am so close...

Very proid of myself, never written or orked ith code, I figured it out all by myself ;)

Vin said...

Tannis,

I don't see any gap in IE7!

Tannis said...

Thanks Vin, I worked at it and figured out ho to fix it. Thanks for everything. Great blog!!

Erin said...

I love your blog! It's pretty easy with the step-by-step instructions. I did need a little bit of help if you're able. Here is my blog (it's a work in progress) www.schlosserdesigns.blogspot.com

I am trying to add tabs under the main header and this is a link to the tabs I created http://erinschlosser.googlepages.com/tabheader.html

For some reason I got all the links to work correctly, but the tabs don't look anything like the tabheader file... Do you know why this is? Thanks in advance for any help!

Vin said...

Erin;

This s your code :

#tabsI {
width:250px;
....}

This is mine :

#tabsI {
width:660px;
.....}

Erin said...

Vin,
I changed that back, but it just moved it over to the left a little... Sorry for the silly questions. I've really just started editing html text in the last day or two. So far so good though!

Vin said...

Erin,

Where did this code come from before each link :

<span style="font-size:0;">Home</span>

Erin said...

It looks like if I change that font size from "0" to a pixel number it makes it larger. The color still doesn't match, but maybe I can find where that gets changed. It looks like changing that pixel in the code fixes the size problem. Thanks!

Erin said...

Ok, I got it to work, now I'm centering it and it should be done. Thanks so, so much for your help! I've bookmarked your blog and will return often for updates!
Thanks!

Pixiu said...

Hi Vin,
Pixiu here again..... I searched a lot but could not find my answer.
Just wanted to know if it's possible to have CSS expandable/drop-down navigation menus.
Also, you taught us how to make a static home page.
My second question is can we can display the navigation menu on the static home page itself.

Thanks in advance cause i know that you respond fast.

Regards

Vin said...

Pixiu,

Will make a post on that soon. You can paste the menu code in that page also.

Herbert Wong said...

Hi Vin,
Like Pixiu, I am VERY interested in a dropdown navigation menu. Hope you can post that very, very soon. In the meantime I tried your css navigation menu here on my 3-column template. It works except that the css menu starts from the left of the pag amd curiously, in the process push the left sidebar towards the centre???

Vin said...

Herbert Wong,

What blog are you trying it on?

Naruto-kun said...

Is there anyway to fix this problem, that happens only with Firefox?

http://img187.imageshack.us/img187/5073/problemed9.jpg

As you can see, the header and the menu are trying to share the same space. Seeing the site with Opera and I.E., they're fine. The problem is with Firefox...

Thanks

Vin said...

Naruto-kun,

What is the blog address?

Herbert Wong said...

Hi Vin: I have deleted the changes after trying them and did not quite work. Anyway I will redtry again tonight and send you the address to have a look.Thanks.

Anonymous said...

Hi,

I created a bunch of posts for the different tabs, but is there a way I could have the tab without publishing the posts? Can I hide it in the from the posting section and make it appear only when I click the tab? or can I Post date the date of a post so it gets archived really far behind?

Vin said...

Anonymous,

When you create the posts they do not automatially get linked to the tabs. You have to add their links in the code for the tabs as shown in my post above.

You can have the tabs without publishing the posts but then which posts will they link to?

If you backdate a post it will not appear on the Main Page of the blog. Then if you link it to a tab it will appear when the tab is clicked on.

Anonymous said...

Hi Vin,

Thanks for the reply. Could you please tell me how I could back date a post so that I dont see it in the front page?

Thanks.

Vin said...

Anonymous,

Change the date in the bottom frame of Post Editor. See :

How to Change Post Order?

Junjun said...

good post... thanks for the guide.. now i can get wat i wan for long time :)

aj said...

Hi Vin,

Thanks for all your tips! They certainly have helped me build my blogs successfully.

About the menu tabs...

I've been trying to 1- center it, and 2- have one row of tabs be one size font, while having another row a different size font. for some reason, i've tried using two page-elements and it picked up the coding from the first code instead of the second blogger page element.

what should i do? do you have any ideas?

thanks!

Vin said...

Aj,

I don't see two page elements! Looks OK in Firefox2!

Bhargav said...

hey vin...i am having a navigation bar..and in that i have 5tabs....for example..i have "sports" tab....when i am posting something and making the label as "sports" its not going into that tab......
my blog is...."www.iare-ece.blogspot.com"

Vin said...

Bhargav,

Your "Sports Arena" tab is pointing to your "Sports Arena" post of March 2008.

In the Template change that link to :

http://www.iare-ece.blogspot.com/search/label/Sports

Then just add Sports label to your posts on Sports as shown in Everything About Labels in Blogger.

Bhargav said...

hey vin,i didnt get u wt u said...but anyways...i applied some other method to get the navigation bars...its ok...but i need one more help....how can i insert inner tabs inside a menu bar......like i want to have in "sports menu",,,some more tabs like "cricket" ."football"..etc.,...how can i get that?please check my blog...

Vin said...

Bhargav,

There are many methods. You can use Flash navigation also.

Channelofhealing said...

Hi Vin, what a blog you have here and I must commend you for all you are doing for the bloggiong community... I did follow your instructions and could only install six links on the navigation bar,but wanted to add more links but couldn't.
your blog is a blessing to me

Godbless

Rishi said...

hey Vin ,
i went through your instruction on adding a tab , however there is some problem , please have a look at it and suggest what best can be done ..

also tell me what has to be improved in my blog ... ?

i really find ur blog helpful ur help in google group is really appreciating ... :-)


my blog >>
http://science-tech-knowledge.blogspot.com/

Vin said...

Rishi,

What is the exact problem that you see? It may be that I see another problem!

Rishi said...

hey vin ,

The tag that i have placed according to ur instructions , does'nt look correct , the tabs are not displayed correctly , the green color is supposed to be on the front side however it appears behind the text,and after placing the pointer over it,gets highlighted in white color,
my question is not regarding the color but the way it appears on the blog , .

i thought might be b'coz i might have placed the left part of the tag in Right one and visa versa ..
i checked that too but still the problem persists ,

please help me and give me some more suggestions on my blog ,,

http://science-tech-knowledge.blogspot.com/

THANKS A LOT !!!

Vin said...

Rishi,

Try This method : Create Navigation Menu Bar.

Rishi said...

hey Vin
thanks for ur help ,,
i tried this step and everything is working fine except for one thing ,
why do i see a black background behind the tabs ..?
and i cannot see my banner on firefox ..(visible in IE 6)

black back ground can be seen in both IE 6 and mozilla .. how do i fix this problem ..
please help me ..

thanks you !
www.science-tech-knowledge.blogspot.com

Vin said...

Rishi,

The black background is due to this code :

#tabsC {
float:left;
width:100%;
background:#000;
....
}

Change #000 to #fff if you want a white background.

Also no need to put your blog url in every comment. The links in comments are not followed by search engines!

:-)

En Ghedi said...

How can I center the menu whithout having it set to the left? I tried the align=center command with no success.

Please advise!

Vin said...

En Ghedi,

Try modifying this code :

#tabsI {
width:660px;
margin:5px 5px 0;
....
}

TO THIS CODE :

#tabsI {
width:660px;
margin:5px 5px 0px 50px;
.....
}

Adjust '50px' to center it.

Ranaesheart said...

Hi Vin!

I think this a kool idea.I tired on my blog it seems to be working but there is a serious problem.You can see what I am talking about in this blog http://one-man-shows.blogspot.com/

My blog uses exactly the same template as www.ranaesheart.com.

Would appreciate if I can get some help,

Thanks!

Vin said...

Ranaesheart,

Can you give more details please about the problem?

Ranaesheart said...

Vin!

JUst love youer blog!

Here is my problem.

This is my blog http://one-man-shows.blogspot.com.It is a three column template.


When I add a page elment under the heading for navigation bar the sidebar on the right gets pushed to the right.You will see it when you visit the blog.

You will see the proper layout at www.ranaesheart.com.This is the original layout.but when the navigation bar comes on it makes the blog look entirely different.

i think it has something to do with the width
of my template i think...

Hope to hear back form you.

Thanks for all your help!

vin said...

Ranaesheart,

In your Template Code box scroll down to this code :

.sidebar-wrapper {
width:25%;
float:left;
margin-top:100px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Add the margin-top line to it as shown. Increase '100' to push the sidebar down.

castlegard said...

Hey Vin!

Thanks for the reply

I tried this method but i cannot save the template

it gives me an error message

"More than one widget was found with id: HTML16. Widget IDs should be unique."

Any idea why it is doing this?

Thanks!

Vin said...

Castlegard,

Use Ctrl+F to find 'HTML16' in your Template. Change one of them to 'HTML17' or any other number.

Ranaesheart said...

Hi Vin!

It's Ranaesheart Again!

I tried this code "margin-top:100px;"

in the place where you suggested,but i still have the smae problem.I treid to increase the 100px but it still doesnt work.

Any help would be great!

Thanks!

Vin said...

Ranaesheart,

Click on Preview to see the change before saving. Put in a larger number like '400' to make it more evident.

Bhargav said...

hey vin,
just have a look at my blog
"www.iare-ece.blogspot.com"
my posting section has gone below after putting the menu...jus have a look please

Bhargav said...

hey dude!!!
i got it thnq nice blog

Tammy Snyder said...

Hello,I was pointed to your blog from the blogspot folks. I am trying to have a dropdown menu and some of your directions I got.I already had the menu elements set up when I got the template. I have since learned how to post then save the link. BUT cannot get the links in the HTML correctly. They keep giving me errors. Could you please show me exactly where and what to put in there?
Thank you,
Tammy
http://cwdigest.blogspot.com

Vin said...

Tammy Snyder,

Your links are correct except for the Archives link. Put in a Blog Archives gadget in the sidebar.

katgreen said...

Your instructions are the best to follow (and I have looked at others, they all have the same info but not easy to follow). I have tired to add the tabs but instead of looking like "tabs" I get a long black bar. I understand how to change the color (I tried that and it still was a long bar). I was able to get rid of the color all together but still didn't look like "tabs" My problems are:
1. want the "tab" look
2. there is an empty space at the end (after Archives)
3. Not centered
What did it do wrong? I have copied your script several times and still have trouble. Here is the blog. Thanks in advance!
http://collectionsofjunk.blogspot.com/

Vin said...

Katgreen,

You have to replace this code :

#tabsI a {
float:left;
background:url("http://collectionsofjunk.blogspot.com/<a href="http://s289.photobucket.com/albums/ll220/kitkatgreen/?action=view&current=tableftI.gif" target="_blank"><img border="0" alt="Photobucket" src="http://i289.photobucket.com/albums/ll220/kitkatgreen/tableftI.gif"/></a>") no-repeat left top; margin:0;
padding:0 0 0 5px;
text-decoration:none;
}

WITH THIS CODE :

#tabsI a {
float:left;
background:url("http://i289.photobucket.com/albums/ll220/kitkatgreen/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}


Do same for other codes where you have to include the image link.

katgreen said...

That (along with some stuff I figured out from reading your blog) worked! Thanks so much for your QUICK help. I am always amazed with the speed of your help! You are better than any tech support out there.

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya said...

I have followed these instructions but come to where I pick a navigation menu and get stumped. When I go to the website that has the various ones to choose from...how do I select the one that I want to use to download it? And how do I find an empty host?

Thanks!

richardsroad.blogspot.com

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya said...

I have downloaded to an empty host...sorry about the previous question...i believe I have solved that. But i fear i am super stuck now on step 5/6. After completing step 4 sucessfully, I go to "page elements" and a new header has now opened up but it says "add a gadget" when clicked on...a window pops up but it doesn't give me an option for html/javascript...is there something else that could be wrong with my html in my layout?

thanks

richardsroad.blogspot.com

Vin said...

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya,

Click the Add Gadget link. In popup window scroll down till you come to Html/Javascript and click it or the blue + sign.

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya said...

Thanks...apparently i was super tired and TOTALLY missed the html/java script one. Thanks for the super quick reply! I am now stumped on where I am suppose to "paste the links to the uploaded images "LINK_OF_tableftI.gif" and "LINK_OF_tabrightI.gif"" Also one of the tabs that I am creating is a "journaling page that I have several links that I have created (for different dates) How do I put all those links into one tab?
Thanks so much! What a HUGE help you blog has been! I feel that I am SO close to having tabs. :)

Vin said...

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya,

Click Edit link in the same Html gadget you just added (on Layout---->Add Page elements tab) and replace the CAPS in it with the link of the images.

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya said...

Thank you SO MUCH. My tabs have been successful.
One more question to throw at ya...is it possible for me to have multiple html codes in one tab? I have read above (in the other comments) and it was mentioned that a drop-down tab would be awesome...I would agree..have you had the time to put instructions on your blog concerning this? Or is there another way to have multiple html's on one tab?

As always thanks so much,

Vin said...

Houghton, Gretchen, Jesiah, Gwenyth, and Adalaya,

One tab is for one link only unless you have drop downs about which I will post soon. Do subscribe to this blog feed to keep up with updates.

Sarah said...

Hey Vin, great post! I copied the code you provided and inserted both the destination links and image links. However, I'm still having some issues...

Any help you could offer would be greatly appreciated :)

http://funtrades.blogspot.com/

Vin said...

Sarah,

What seems to be the problem?

Sarah said...

There is a thick black line running across the top of my menu, which I don't want, since my background is purple.

Vin said...

Sarah,

What is the blog address? (You have three blogs.)

Sarah said...

This is the blog where I'm using your menu code:

http://funtrades.blogspot.com/

Vin said...

Sarah,

Somehow I am not seeing it in Firefox3. Which browser (and version) are you using?

Can you provide link of a screenshot file?

~*Laura*~ said...

Thank you for posting this help, I have a question though... There is a black bar above my tabs.. how do I get rid of it? thanks!

Vin said...

~*Laura*~ ,

Go to Layout---->Page Elements---->Click Edit link in the widget fr the menus and delete the background line in this code :

#tabsI {
width:660px;
margin:5px 5px 0;
background:#000;
font-size:93%;
line-height:normal;
border-bottom:0px solid #24618E;
}

Save. Clear cache and view blog.

His Handmaiden Laura said...

Thank you!

WillTRiker said...

I have tried to get this NAV menu to work, but I have run into a couple of problems.

1) I made a post called "Archives" mistakingly thinking I should link to that. On checking however it is unclear to me how I should link to the archive as the dropdown menu I have now doesn't give me an URL. I'm obviously missing something here, but it escapes me as to what that might be. I noticed that in the picture of te example page the archive is still in the sidebar also.

2) My intention is that when the Archive / Profile buttons are working to ditch these entries from the sidebar. It's isn't mentioned in the steps to install the menu, but I assume I have to hide these parts of the sidebar?

3) I noticed that in Firefox the entries for the Nav menu are outside the title box/header ... in MSIE they are neatly inside (like I want it). Any fix for this?

4) I also wanted to have the navbar in it's own bar with the same lay-out as the title and spanning across the entire title. I put as background URL the same as the main page ("http://content.pimp-my-profile.com/tp/ffffff-70-tp.png"), but that acts only at the invidual menu options and not for the entire navbar as I would have liked. I also noticed that it somehow overlaps with the edges of te title bar which also needs fixing.

Sorry about the massive post .... novice at this and probably will be for life.

Vin said...

WillTRiker,

1. After publishing a post you get a permalink which can be used to link to your post.

2. To remove the Archive and Profile gadgets from the sidebar go to Layout---->Page Elements and click Edit link in those gadgets. Then click Remove button in popup window.

3. You will have to experiment with the padding line in this code :

#tabsI a {
float:left;
background:url("LINK_OF_tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
....
}

The first 0 is the top padding, the second 0 is the right padding, the third 0 is the bottom padding and 5px is the left padding.

4. Instead of a background picture use the background color line :

background:blue;

Click Preview to see changes.

WillTRiker said...

Thanks for the reply Vin.

I don't see a permalink after a post or do I have to determine what it is using the standard lay-out you mentioned in your entry about permalinks?

Also I think you misunderstood me a little. I want the archive that blogger keeps itself, no my own post, as a link in the navbar. I've looked al the blogs that are mentioned in the comments and none have this (in a working fashion).

I will do some experimenting with the code even though I'm bad at this -_-. I don't want to use the background:blue; as I want to have the navbar to have the same look as the other parts on the blog (small black border, transparant background which only LOOKS blue because of the background ... I got the same template with a different back ground here http://willtrikertg.blogspot.com/ so now it turns red).

Vin said...

WillTRiker,

Click on any post title and it will open the post page. Then copy the permalink of the post from the address bar.

The color 'blue' is only intended as an example in the code. You can put 'red' if you like or any hexadecimal code : #ff000f

WillTRiker said...

Got you on the permalink (saw that as just a regular link, so that's why I didn't get it -_- ).

As for the color ... I don't want any color at all as it needs to look identical to the rest of the header. If you could answer me how to do that (some kind of header where I have to put the navbar in?) I'd appreciate it. I'll post later in the template helpgroup otherwise.

You missed the archive link question, but I'm thinking of leaving it where it is as whith the drop menu it doesn't take much space anyway.

Vin said...

WillTRiker,

The Blog Archives is a gadget and hence it cannot be inserted in a post which is also another gadget ( The posts gadget ).

You can use any color if you put the hexadecimal value. Just Google for a color hex convertor.

Robin said...

Hi Vin,
Thanks for this. How do I get rid of the top black line on top of my tabs?

Thanks,
Robin

Robin said...

Hi,

I got rid of the black line. Thanks again for this. :-)

Sincerely,
Robin

Joey Hiller said...

I have used your code and it worked great. I was able to change font colors, etc. My question is "How do I add a vertical submenu to the existing navigation menu code that I have?". I have looked and looked and can't find that anywhere. I have found some stuff, but as I am new to all this, I don't know where to insert code, etc. Figured my best bet was you.

thesikaleon said...

hello Vin, thanks for your help!!!


this is my blog http://thesikaleon.blogspot.com


As you can see I have a problem.

There is a small gap between the two images of the buttons.

Please help me

Thanks for your time and sorry for my poor English

Vin said...

thesikaleon,

Can you link to a screenshot image showing the problem?

thesikaleon said...

here is the image http://img387.imageshack.us/img387/6042/25270330rr8.png

Vin said...

thesikaleon,

I don't see any gap. Can you draw an arrow on the image pointing to it?

Is it seen in all browsers?

thesikaleon said...

http://img186.imageshack.us/img186/2892/25270330rr8jq8.png

you can see the gap in the yellow circle


I use firefox

Vin said...

thesikaleon,

Which browser and version are you using?

thesikaleon said...

firefox 3.0.6

Also I tried IE7 and the result is the same

Vin said...

thesikaleon,

This is how I see it :

http://simblogg.googlepages.com/thsikaleon.jpg

Tartelette said...

Hi,
Thanks to your very clear post I was able to post a tab bar and customize it a bit except that when I placed it under my header it looks included in the header and not as a separate element.
I use minima stretch template.
What do I need to do in order to separate the tab bar from the header?

Vin said...

Tartelette,

Try getting rid of the header borders by putting '0px' in the border lines. Then it will not look as if it is in the header.

Tartelette said...

Thank you! It worked perfectly.
I have got 2 more questions:
- how do I increase the space between the header and the tab? I am guessing it has to do with padding but I am not sure which one.
- Is there a way to drop the tab to the left, in between the header and the first post?

Thank you.

Graceful Degradation said...

Hi there. Thanks for the site, it's proving very useful - especially since I'm totally new to coding.

I'm clearly being dense because I thought I had followed all the instructions correctly, but I can't get the navigation bar to show up at all. I'm trying to add it immediately above the main posts rather than in the header, but when I've tried it in the header it doesn't appear either. If you're able to figure out what I'm doing wrong I would be really grateful.

Vin said...

Graceful Degradation,

I do not see it on your blog!

Graceful Degradation said...

Yes, the non-appearance was the problem! I've tried it again this morning and don't think I did anything different, but this time it has appeared. Weird. Anyway, thank you so much for this tutorial, this was exactly what I was looking for!

Paula Woods said...

Hi
I have successfully managed to get it all working well but my titles don't look like the tabs I wanted. I installed tab menu 2 from CSS Tab Designer. My blog is stampinchat.blogspot.com. I'm on firefox.

Vin said...

Paula Woods,

What did you want it to look like?

Lina said...

Hi, thanks for this site, it has helped immensely. I've tried everything on this page, and it *seems* to have worked, however my tabs aren't looking quite right, I'm thinking it might look better if I centered them? Just wondered if you knew how?

Many thanks, Lina

Vin said...

Lina,

Change this code :

#tabsI {
width:660px;
margin:5px 5px 0;
.....
...
}

TO :

#tabsI {
width:660px;
margin:5px 5px 0 100px;
....
....
}

Increase '100' to shift it more to right. Click Preview then save.

circleinspoon said...

hello.
I'm still testing this tab feature, and I need help.
How do I move the tabs lower?
i have a 750x320 header image and the tabs are stuck on the midde of it.

I wanted it to appear below/after the header image.

Hope you can help.
Thanks a lot Doc.

the blog:
http://circleinlife.blogspot.com/

Vin said...

circleinspoon,

Try increasing the margin. Change :

#tabsI {
width:660px;
margin:5px 5px 0;
...
}

TO :

#tabsI {
width:660px;
margin:5px 5px 20px;
...
}

farrukhthegreat said...

hey how i can change the size of menu bar bigger?? plz reply thanks

Vin said...

farrukhthegreat,

Try changing the code here :

#tabsI {
width:660px;
margin:5px 5px 0;
....
}

farrukhthegreat said...

thankyou for your quick reply, I have solved the problem..Thanx

BonnieBelle said...

Thank you so much! I had some trouble at first, but reading through the comments, I figured it out. I've been trying to figure out how to do this for about a month now! So glad I stumbled across this post.

To see the results, go here.

http://awthome.blogspot.com

Thank you so much, again. :) I feel like a code monkey now.

Libby said...

Hi, Thanks for your site. I think i followed the directions correctly but my tabs don't look right.They don't look like tabs. my blog address is http://budgetbailout.blogspot.com/
I uploaded the pictures to picasa -is that where i went wrong?? Thank you for your help

R. Thamilselvi said...

Hi,

As your instructions, i hare tried to create a Navigation menu.. which is start with creating a post, save image in photobucket, then changed the template codes page element and then i have even paste your code on HTML / Javascript where the CAPS has been changes accordingly. Now the menu links is working when i click but the problem is, the posting that i have created in the step 1 to link to menu, it is visible in the homepage. How do i make it invisible? Then the 2nd problem is whenever the menu is clicked it should open a new page where it will allow me me create new post as in home page, but it only allow to comment. I am not sure whats the problem here. Pls help me.

Vin said...

R. Thamilselvi,

If you do not want a post on Main Page backdate the post.You can only create a post by login at Blogger.com and click NEW POST button on Dashboard. This menu is to go to various blog posts or pages.

Vin said...

Libby,

Upload to Photobucket.com and use the Direct Link they give for the uploaded images in the template.

R. Thamilselvi said...

Hi

Thanks for you reply. I think you have misinterprate my question.

As in your tutorial, 1st i need to create a post to link to various link in my menu bar right? let say i have created the following posts: "Visitor's Contributions", "Song & Lyrics" and "Contact Me".

Once i have added the links in templates coding and update it accordingly, when i click view blog.... i can see the 3 new post that i have created to link to my navigation bar is visible in my main post page. I want it to visible only when i click the navigation menu link....to open in new page. Beside that i want to create new post on each menu link. Its just doesnt work properly....

PLs help me

Vin said...

R. Thamilselvi,

After creating and publishing the 3 posts did you copy down the correct permalink of those posts?If you do not backdate (Change the post dates) the posts they will still be visible on Main Page of blog.

You cannot create new posts by clicking on the links in the blog. To create new posts you have to login at Blogger.com and click New Post button on Dashboard.

If you want New Post button on your blog install the Blogger Meta Gadget.

R. Thamilselvi said...

Hi,

As you instructions, i have created new post to be linked to menus and backdate it. Now the post appears at the end of the post, but still at main blog page.

I am now trying to create new post for "Visitor's Contributions" and "Song & Lyrics" sections by clicking "new post" from dashboard, but the new post is just appear as normal on the main blog page (homepage) and not under each menu links.

Pls check my blog: http:/idhayamkaviyam.blogspot.com

Vin said...

R. Thamilselvi,

This also depends on how many posts are on your Main Page. Go to Settings---->Formatting---->Show __ Posts on Main Page and set it to '1' and save settings.

Now your second post will not be seen on Main Page after clearing cache.

After publishing the post the link of the post has to be manually put in the template code as shown in above post. It does NOT appear automatically!

R. Thamilselvi said...

Hi Vin,

Is that mean, every time i created new post for each menu section (beside homepage), I shall key in the post link manually to template code? Which part / section of template code shall i include the new post link?

Pls give me some examples of coding....

Vin said...

R. Thamilselvi,

Yes, read above post carefully to get the code.

R. Thamilselvi said...

Hi Vin,

I have read through carefully you post but what i can find is the code to create the very 1st new post which is to link to navigation menu. I still unable to find how to create a multiple posts for one link. For example, let say i wanted to post multiple song lyrics in the "Song & Lyrics" navi menu bar... how do i create that to be link to this section?

Pls guide me. Thanks

Vin said...

R. Thamilselvi,

First step is to create multiple posts and when creating them add this "Song & Lyrics" as a Label in the bottom frame of post editor and publish the posts.

Now you can put this link :

http://idhayakaviyam.blogspot.com/search/label/Song & Lyrics

in the template code for your Song & Lyrics tab. It is the link of your Song & Lyrics LABEL page which holds all the posts containing Song & Lyrics.

R. Thamilselvi said...

Hi Vin,

Thank you so much for the guidance. Finally i manage to solve my navigation problems. Your blog is very helpful and your prompt feedback are super.

Keep up your good job.

ruthleen said...

hi sir,i followed your instructions,managed to add the element,how am i supposed to add an about me or other as i click on my main website,it shows no profile page,am i supposed to add a page element,our help will be highly appreciated,
http://youngmoneymaker97.blogspot.com

Somewhere said...

I did not get any problems with this tutorial. Thank you so much.

justine said...

Can you help me with this? I am so confused!!

~Justine

Vin said...

Justine,

What specifically are you confused about? Give all the details.

Max said...

Hi,
Thanks a lot for this navigation menu, it is awesome. I have modified it so that to refer to labels as well. Here is the code I use :
href="http://maximepiat.blogspot.com/search/label/Malaysia

Now I would like to control how many posts will be shown under this label, but I don't know how... If you can help this would be great.
URL of my blog (remove the [ ]): max[xxx]ime[xxx]piat[dot]blogspot[dot]com
Thanks a lot !

Vin said...

Max,

Use a label link like this one :

http://www.blogdoctor.me/search/label/Blog%20Header?max-results=100

Add '?max-results=100' at the end as shown above.

gek-op-italie said...

Hi Vin,

Thanks for the nice code on your site.
I tried it and it works but not the hover.
Look here at my blog:

http://gek-op-italie.blogspot.com

Do you see that the hover is not complete?

gek-op-italie said...

Allright, I used photobucket instead of picasa and now it is working.
You can delete this comment.
Sorry.
Greetings.

Srinivas said...

I'm sorry but I can't find the 'Add Page Element' link in the header of the Page Elements tab. Please help. I can see only 'Add a Gadget'!
Please help!

Srinivas said...

Hey Vin,
Thanks a lot! I got it. I figured out my mistake. It is a true service you are doing to mankind! I thank you wholeheartedly. Thanks a lot!! Please continue doing this social service!

Srinivas

R. Thamilselvi said...

Hi,

Currently i have 5 navigation menu link on my blog and i would like to add more. When i create the 6th navigation menu, the menu goes to 2nd row (below the current menu row). How do i add the menus on the same row as my blog page is width enough to put more menus on same row?

my blog: http://idhayakaviyam.blogspot.com

R. Thamilselvi said...

Hi,

How do i create a navigation menus in my sidebar with dropdown menus (more menus in one navigation button)?

Pls guide me....

Thanx

Vin said...

R. Thamilselvi,

Give the link of a blogspot blog having such links.

Rising East said...

so now i hav tabs but no new page....help? my email is ayumi_kimura96@yahoo.com
i think i might hav 2 give you my blogger and password so u could help me

Vin said...

Rising East,

1. Create and publish an ABOUT ME post.

2. Change date of that post to a backdate so it is not seen on Main Page.

3. Get permalink of that post and copy it.

4. Paste the permalink in the code shown in above post.

Rogan's Photography said...

Hi and thank you for sharing your wealth of knowledge. I do have a question though. I have created the tabs, but I am having trouble with the icons. I deleted the LINK_OF_tableftI.gif (everything in between the quotes and replaced it with the html code from photobucket. I did the same for tabright html. Any advice would be much appreciated.

website is
www.rogansphotography.blogspot.com

Thank you

Vin said...

Rogan's Photography,

You are putting HTML ">" "<" within the quotes. Put only the link of your image like this :

"http://i996.photobucket.com/albums/af85/rogansphotography/tableft.gif"

fittingbackin said...

Hey! Just stumbled across your blog today when trying to add tabs to my blog! I was hoping you could tell me if it looks 'right' and:

1. How to center my tabs.
2. How to change the color (so they're always white - never blue like they are now pre-hover).

Any advice you have would be awesome - thanks for the GREAT tips!!

Vin said...

fittingbackin,

Change the first number for the margin to shift them to center and click Preview :

#tabsI {
width:660px;
margin:10px 10px 0pz 100px;
background:#bbbbaa;
........
...
}

To change color to white change bbbbaa to fff.

Rogan's Photography said...

Vin. Thank you so much for answering that question. Now I have one other. I now have the tabs, but behind them there is a black bar. How do I get that off?

Vin said...

Rogan's Photography,

I do not see it.

Mommy Melback said...

I can not tell you how long I have been looking for this "how to". You explained it perfect. I almost had it but got my husband to help me SEE what was right in front of me. I love it.
Question is:
I got the menu/navigation bar up, how do I post a blog and it go to that menu in the bar. Do I have to just keep adding it to a static (? right word??) page?
Thanks

http://mommymelback.blogspot.com/

KVM Switches said...

I am really very pleased to announce that I definitely enjoying every little piece of fact describe in your post. It is really very hard to get these kinds of horizontal navigation bars to blogger. You appear to be known what exactly you’re referring to and just would like to say that please keep up your amazing work because the internet needs someone like you spreading the word.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.