Today I continue the second half of this tutorial…how to add a horizontal navigation bar in Blogger…

How To Add A Horizontal Navigation Bar in Blogger – Video 3

Code needed for this video:

3. Nav Bar Code

<div id=”newnavbar”>
<ul>
<li><a href=’http://www.yourblog.blogspot.com’>Home</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>About Me</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>Reviews</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>Links</a></li>
</ul></div>

(NOTE: If your nav bar displays as bullets, make sure you only have one set of quotation marks when the snippet is copied over. For some reason, single quotes seem to work better than double quotes, but toggle between the two if you have problems getting it to display correctly. Also, try erasing my single quotations altogether and retyping your own. There is something wonky about copying and pasting them that happens in Blogger.)

How To Add A Horizontal Navigation Bar in Blogger – Video 4

Congratulations! You have successfully added a navigation bar to your Blogger blog.

Any questions?

Yes, you in the back…

After many requests by clients to add a horizontal navigation bar to their Blogger (Blogspot) blog, I decided to create some video tutorials illustrating step by step the process. Below I’ve listed the first two videos and tomorrow I will post the last two, for a total of 4 short videos.

If you’re not very comfortable working with HTML and CSS code, have no fear. BACK UP your template first (I’ll show you how and where to do that in the first video) and take it step by step with me. And see my very legal disclaimer below.*

So to get started click on the images below and follow the directions. All the code you need is also pasted below each video.

How To Add A Horizontal Navigation Bar in Blogger – Video 1

Code needed for this video:

1. New Nav Bar:

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

How To Add A Horizontal Navigation Bar in Blogger – Video 2

Code needed for this video:

2. New Nav Bar Effects:

#newnavbar li a{
color:#e087aa;
}

#newnavbar li a:visited {
color: #9e9e9e;
}

#newnavbar li a:hover {
color: #f2b9cf;
}

That’s it for today. Sit back and take a break, you HTML guru. And come back first thing tomorrow for the rest of the videos. (Don’t worry…if you clicked “Save Template” all your hard work will be there tomorrow!)

*I offer this tutorial as a free service to you and am in no way to be held responsible for you screwing up your own blog. (But don’t worry…you’d have to try pretty hard to do that.) Thank you.