Let's Blog With Donny

I asked it many times when I started to make my first blog in Blogger.com. I don’t have any idea on how to add navigation bar in blogger. Navigation bar will served as the pages of your sites. This is where we write the: Home, About Me, Contact, Frequently Asked Questions, Advertise etc. in order to separate it from the blogs.

Only to find out that in just simple steps you can make it in just few minutes. Here are the simple steps:

Note: Before you try it in your original blog. Please try it in your other account of blogger if you have, as this will mess up your blog if you mistakenly put the code in a wrong place.

• Copy exactly the following codes provided:

/* navigation links css code
----------------------------------------------- */
#topnav {
height:40px;
}
#topnav ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0;
}
#topnav a:hover {
color:#666;
}
#topnav li {
display:inline
}

• Then, log in to your blogger account. Go to LAYOUT , then EDIT HTML. Paste the codes mentioned above before the closing skin tag as shown below:

/* navigation links css code
----------------------------------------------- */
#topnav {
height:40px;
}
#topnav ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0;
}
#topnav a:hover {
color:#666;
}
#topnav li {
display:inline
}
]]><*/b:skin>
<*/head>

Note: The * shown is not included just to give space. Just put it before the closing skin tag.

• Copy the following codes. Take note to change the ‘YOUR URL’ portion where you are linking to:

• Then, paste it below the closing div header as shown below:

• Preview first your page. If it happened you mistakenly put the codes, just clear edits then try it again. Do not save any changes unless you had preview it.

• Hit SAVE TEMPLATE if you are through.

That is how to add navigation bar in blogger.