A Navigation Menu Bar is a strip at the top of the blog just below the header containing links to the main pages in the blog. The Main Pages of the blog are :
1. The Home Page : Also called the Main Page. This is the page which opens when you click on the Blog Address.
2. The About Us Page : This can be a post created by you with information abut you or your Blog Profile.
3. The Contact Us Page : This is a post created by you containing all your contact information.
4. The Privacy Policy Page : This is a post created by you showing how you deal with information submitted to you by your blog readers.
5. The Subscribe Page : This is a post created by you containing all the links to subscribe to your blog.
Create all the four posts as above and publish them. Also backdate the posts so that they do not appear on the Main Page of your blog. Then open each post in browser and copy down their permalinks. Paste them in a Notepad file and save them.
IMAGES TO USE IN THE NAVIGATION BAR
You can create the images to be used in the navigation bar in an image editor like Irfanview. It is free. Just Google for it. If not you can download some from here.
Have a look at the preview.
Download the zip file and extract the images you want to use in your blog from it. Then upload the images to Photobucket.com or Googlepages and copy down their links.
DEFINING CODE IN THE CSS
Login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. First backup your template. Then scroll down in the Template box and paste the following code :
/*- Menu Tabs E--------------------------- */
#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("LINK OF tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("LINK OF tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
Paste the above code just above the bskin tag in the template :
]]></b:skin>
The above code assumes you have chosen the Menu Tabs E series. Also instead of "LINK OF tabrightE.gif" and "LINK OF tableftE.gif" copy and paste the links for the images you uploaded to Photobucket.com.
Save Template.
CREATING MENU BAR
In your Template box scroll down to below </head> tag. Then paste this code :
<div id='tabsE'>
<ul>
<li><a href='HOME LINK' title='Home'><span>Home</span></a></li>
<li><a href='ABOUT US POST LINK' title='About Us'><span>aStore</span></a></li>
<li><a href='CONTACT US POST LINK' title='Contact'><span>Test Post</span></a></li>
<li><a href='PRIVACY POST LINK' title='Privacy policy'><span>Contact</span></a></li>
<li><a href='SUBSCRIBE POST LINK' title='Subscribe'><span>Link 6</span></a></li>
</ul>
</div>
within the header-wrapper. Replace the CAPS with the relevant post links. So it will look like this :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='false' title=' (Header)' type='Header'/>
</b:section>
PASTE NAVIGATION BAR CODE HERE
</div>
Save Template. Clear Cache and View Blog.
43 comments:
This is a useful post, I did the same thing another way. In order to have a wsywg editor, I uses google docs to create the navigation bar with hyper links. Then I cut the html code and pasted it into a Javascript element at the top of my blog.
See my menu http://lizabetti.blogspot.com or
http://lizabetti.com
What a useful post it is! Realy impressive.Many,Many...Thanks.
Hello, I'm new to this code thing. Per your instructions where do I get the Navigation Bar code from.
b:section
PASTE NAVIGATION BAR CODE HERE
div
Thanks, Moon
Moon,
Did you put a check in the Expand Widgets Template checkbox at the top of the Template Code box?
Hello Vin, thanks for your help.
Okay, I now expanded the widgets. But I still don't know where I'm getting the Navigation Bar Code from so I can paste it where you said too.
My code does not look like yours after I put the check mark in Expand Widget
I'm leaving out the tags.
type='Header'
b:section
changed too.
type='Header'
b:includable id='main'
Thanks, Moon
Moon,
Do you have a Classic Template?
If so Upgrade to Layouts Template.
Vin,
I have the Layouts Template. I have everything working now. All I have to do is associate/point my posts to the tabs.
Could you point me in the right direction on how to this.
Thanks, Moon
Moon,
You have to create the posts first! After publishing them get their Permalinks :
What is a Permalink
Then put the links in the code for the tabs.
i am getting this error code
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "current" must end with the ';' delimiter.
when I try to save template after first step.
Baby~amore',
There is no word "current" in the code which I have given above.
Look for that word in your template. If there is a ";" change it to "& a m p ;" without the spaces and doublequotes.
Also see Error Messages In Blogger Templates.
the current appears to be in the photobucket code for the nav bar tab i uploaded.
do I include the (" my link ")
thanks for the prompt reply.
baby~amore',
That is your choice!
Thanks much. Used the info provided here plus the tip about creating the nav bar in google docs and then copying and pasting the html code into the blog template. Worked like a charm.
You can see it at link
This post is brilliant! Check out the results of your genius at my blog - www.windycityguide.blogspot.com. Many many thanks.
Does this work for the Classic Blogger template? Please let me know where to paste the code.
Anonymous,
In the Classic Blogger Template put the CSS code just above this tag :
</style>
Then paste the Menu Bar code just above this tag loawer doen in the body part of the template :
<!-- Begin #content -->
Preview and save template.
Hi Vin,
Thanks for the response to my Classic blogger question (posted anonymously). I experimented with the placing of the code and was able to get it to work.
Can you tell me how I could get the links in the Navigation menu to align more to the right side above my blog title header?
Thanks.
David,
What is the blog address and where is it in the blog?
Thank you! I've been trying to figure out how to do this for weeks and weeks...I'm off to give it a try :)
Daiquiri
How do you backdate a post? I've checked Blogger help. I've also tried to simply change the date on my computer in case that was the date being used to label my posts...it wasn't.
Help please!
Daiquiri
Daiquiri,
Open the post for editing. Click 'Post Options' link in bottom frame of Post Editor. It will expand and you can change date there and Publish.
Hi Vin,
Thanks for the earlier reply. Tried to leave you a response last week, but apparently the comment did not go through.
Blog address:
http://financetrends.blogspot.com
The nav bar is not up right now, I cleared the code changes after experimenting in "preview". But I was curious as to how to align the nav bar to the right side above the title header. Thanks for all the tips here.
David,
See the slightly easier method :
Free CSS Navigation Menus for Blogger.
Hey, great explanation ...the menu bar works fine... but i was just wondering if theres a way to center align the whole menu, as it seems a little crooked to the left ... thnx
Keke,
In this code :
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
Increase 50px to push it more to the right.
is there a way to define what section of the nav -- a new post will go to?
Brand Blogging,
You have to create a new post and publish it. Then copy the permalink of that post into the code as shown above. New posts do not automatically go into a section.
Hi Vin,
I use a navigation bar that I made on flashvortex.com and it's free to use, just that you need to register with them (for free) and you can use their buttons and images and adjust colour according to your blog.
Check it out on surakshit dot blogspot dot com
Vikas
I have a similar question to the one Keke left on March 2. Adding pixels to the "50px" works, but gives different results in Internet Explorer 7 vs. Safari and Firefox. Isn't there a way to just tell the menu tabs to be centered, regardless of how many tabs there are? Can we plug some html in there if not? Thanks,
George
Is there a way to have separate groups of menu tabs on the left and right sides? For instance, have "home" and main content navigation on the left, a break with no tabs, and then administrative links like "about" and "contact" grouped to the right?
BTW, thanks so much for the post. It is so helpful and EXACTLY what I wanted! So much more polished than the other nav menus out there.
One possible suggestion re your post would be to move the piece of header wrap code above the code that precedes it in your post or explicitly define that preceding code as "NAVIGATION BAR CODE." The relationship between these to pieces of code was only confusing part of implementing the nav menu.
Thanks again!
Trail Goat,
You want two tabs on top of each other on the left and the others on top of each other (stacked) on the right?
Nope. Sorry for the confusion, Vin. I mean a single row with some tabs to the left, some tabs to the right, and open space in between. For instance:
tab, tab, tab, tab..... space..... tab, tab
So, in effect, there would be (or at least appear to be) two separate sets of tabs at opposite ends of a single row.
Trail Goat,
Try inserting '& n b s p ;' without the quotes and spaces wherever you want one space. For example this is a ' ' space between the quotes.
Oops, by "Space" I meant a completely open area between set of tabs, so it would effectively look like two separate menus, one on the left and one on the right.
Trail Goat,
Put in a table code with one row and three columns in a Html page element. Then add the tabs code to the border cells keeping the middle cell empty.
Vin,
Thanks SO much! I never would have thought of that idea.... even thought I've oft been told that tables are the saviors of webpages.
The only remaining problem is that the tab no longer touch the border of the wrapper below. I've got a test set up at yourunfar.com that shows this very small remaining problem. I've trying to resolve this issue, I've set the following table attributes:
border-width: 0px 0px 0px 0px;
border-collapse: collapse;
border-spacing: 0px
Thanks again!
Why does the left side of the tab lack the line? It does not look like it is supposed to...Tried again and again but no luck,,
Here is my blog...Still getting it set up with the links. http://abqnewmexicorealestate.blogspot.com/
Carlos Martinez,
Try increasing the width or experiment with the padding in the CSS code for the tabs.
I've used your tips with great success, but now I want to add more tabs and have a question.
Is it possible to wrap the text within the tab or insert a line break?
see my tabs here:
http://occasionalotherstuff.blogspot.com/
I'd really like to be able to make all the tabs 2 lines and not as wide.
Thanks in advance
Thank you! I've wanted to add navigation tabs for a while now. I finally got them to work thanks to you. Check them out at www.tylerroberts.net
Vin
Is it possible at all if my template will accept this code.I am really interested in trying your code.Your pages have been very informative and I thank you for all your hard work.
UFOManiacs,
It works in both Classic and Layout Templates.
Aesome instructions! I got them from your other link, but they worked like a charm!
Cheers!
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.