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. 
Nicole!
Thank you so much for doing this. I was just searching for this info. I went to a few computer brain sites and I was LOST.
Thank you for making it simple for the rest of us
[Reply]
hi Nicole,
thanks a lot for your very well made tutorial,
however i do have an issue, for some reason my nav bar isn’t horizontal and has bullets.i copied every bit of code exactly where you said.
thank you
[Reply]
Nicole- I watched all your tutorials, inserted the code by I can’t figure out WHY my navbar is appearing in a list form rather than in a line! It’s driving me CRAZY!! Can you help me with this? THANKS!!!
[Reply]
Shanda,
I can answer that.
For some reason when you copy & paste the code, there are extra quotation marks. There should only be on set on each end of the link, like this:
[Reply]
I have another question…it’s probably so obvious but I can’t figure it out.
I would like to add giveaways to my nav bar. How do I tell the nav bar to pull up all the giveaways? They all have different addresses.
Thank you Nicole for all your hard work!!
[Reply]
Thanks for pointing that out, Shelley! Im going to add a little note about that in the post.
As far as your question about adding your giveaways to a giveaway page, its just like any other content…you’ll have to manually add them to the page. There probably is some super-crazy-coder-geek out there that could automate the process, but this process only creates the page, not the content. You may want to just add a list of links on that page and update it each time you add a giveaway. Good luck!
[Reply]
Great tutorial – thanks so much. But for some reason my nav bar isn’t horizontal and has bullets. I took out the extra ” that kept appearing, but it’s still not working. Any ideas? I’m using That Girl Tonia (my old blog) as a test site.
Thanks!
Tonia
[Reply]
Thank you so much for putting this together for us. I am sooo excited.
I am still having issues with it showing up vertically instead of horizontally. I have pasted below what I copied. I also did the things you suggested. Any ideas?
Thank you again,
Michelle
Home
Another Time
Living this Life
Menu Planning
[Reply]
I figured out how to get it horizontal, now how do I change the color. Thank you!
[Reply]
First off thank you so much for this! It was very helpful.
I’ve watched all the videos. I cannot seem to get my bar to be centered though, above everything. If you have a minute, would you be able to visit my blog and tell me how/where in my code I would center the bar (and the title and anything that could help me center it all!). I am having a lot more people visit my blog lately, and I want to have it looking it’s best. However, I cannot find help on the same codes that you listed here. So I need some help if you can spare some!
Thanks again,
Christie
[Reply]
[...] got a lot of feedback on my post last year about adding a horizontal navigation bar to your Blogger blog. Before a few months ago, [...]
Nice tutorial
How To Add A Horizontal Navigation Bar in Blogger that drops down like yours.
thank you
anna
[Reply]
Hello Dear,
First of all, thank you so much for putting up this tutorial it has been so helpful for me … I am really thankful. Thank you I was able to improve my blog and add Horizontal Navigation Bar.
Now I have 2 others problems, first, how to add my posts into different category or menu. I have 6 menus categories in my Navigation Bar. I have been struggling to get my pots organized into different categories.
The second question is I don’t see different categories in my labels list. How can get the labels list appear before to post and just put the post into the right section?
Maybe you’ve done videos about these problems but I have looking and couldn’t find anything.
Thank you in advance for your help
Nadège
[Reply]