How To How To Create A Horizontal Navigation Bar

by Sherry Riter in Blog tips  ,Blogger,Navigation Bar - Navigation Menu

You can create a horizontal navigation bar in your Blogger blog.

This is an easy navigation bar and it is not a mystery!

Before you change ANYTHING in your template, always be sure to save a copy first.

Follow these steps to create a horizontal navigation bar.

Step 1. Dashboard


Step 2. Layout


Step 3. Edit HTML

edit HTML

Step 4. Expand Widget Templates

Expand Widget Templates

Step 5. Do a “Control” “F” to find this code in the template:

    /* Header

the Header code

Step 6. Add the following code below the /* Header */ and above #header-wrapper {

after header and before wrapper
    #menu ul li {
    list-style-type: none;
    border:3px solid;

    #menu li a {
    font: bold 16px/16px “Arial”;

    #menu li a:visited {
    color: #FF00FF;

    #menu li a:hover {
    color: #F88017;
    background: #FF00FF;

Step 7. Do a “Control” “F” to find this code in the template:

    b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’

Step 8. Change the following:

showaddelement=’no‘ to showaddelement=’yes
maxwidgets=’1‘ to maxwidgets=’5

showaddelement code change

Step 9. Save the template

save the template

Step 10. Page Elements

page elements

Step 11. In the “Header” section, add a “Page Element or Gadget”, choose “HTML”

create HTML page element

Step 12. Leave the title blank. Add the following code in the text field:

html text field code

Change the “Your URL” (shown in red) to the appropriate URL and change the words on the buttons (shown in blue) to the tab names you choose.
I could not paste the code in this posting so that it would remain “code” which is why I had to put it in an image

It will look like this:

text field

Then SAVE.

I purposely made the colors a bit crazy (rather YUCKY!) so that you could see what each portion of the code did to the navigation bar.

final bar

Step 13. Edit the color codes in Step 6 to the colors that you choose. Here is a great link for HTML Color Codes.

This is an explanation of some of the code that you pasted in the steps above…

#menu ul li {
list-style-type: none;
padding:0px; This will give you “buttons” so if you want a solid bar make it 10px
border:3px solid;
border-color:#00FFFF; Shown in the picture as a turquoise color
background:#FF00FF; Shown in the picture as hot pink

#menu li a {
font: bold 16px/16px “Arial”; If you bigger words, increase the 16px/16px
color:#FFFFFF; This is the color of the words shown as white in the picture

#menu li a:visited {
color: #FF00FF;

#menu li a:hover {
color: #F88017; This is the color of the letters when you hover the mouse over them
background: #FF00FF; This is the color of the background when you hover the mouse over

That’s it! I know it might seem like an impossible task, but if you just follow step by step you can do it and you will feel a great sense of accomplishment!

Add to Technorati Favorites

This post was written by...

Sherry Riter is also known as The Redhead Riter. Sherry is witty, intelligent and addictive as she writes about cooking, family, marriage, failures, blogging tips, art, humor, inspiration, travel, PTSD and aging. Her goal is to inspire, motivate, educate and to make her audience laugh. Sherry embraces being a redhead and helps others to see the redhead point of view…"In some eras redheads were worshipped while others thought us witches. Personally, I like the former and think every day is 'Love a redhead day!'" She can also be found on Facebook, Google+, Pinterest, StumbleUpon, Linkedin, tweeting as @TheRedheadRiter and you can subscribe to her free blog feed.

{ 6 comments… read them below or add one }

1 SBA July 16, 2009 at 9:41 pm

Very thorough step-by-step guide! Visuals are so helpful to newbies who are trying this for the first time. I always recommend a test blog (I save my template but would not want to have to restore it. lol). Once you get it correctly, it's easy to copy and paste into your precious 'real' blog! I like buttons that look 3-D and pop out some. So many Blogspot blogs need a menu to help visitors navigate.


2 Rajey Sha December 4, 2009 at 12:17 pm

Many Many thanks Dear! It is very easy, useful, and beautiful way to adding Menubar.
Thanks ! Regards! Best wishes!


3 Jana and Seth Burrow December 23, 2009 at 6:34 am

Help! I am trying really hard to make my blog into everything I want it to be. I followed your step by step instructions and now I have a navigation bar! I apparently don't have it together enough to have it go much further than that. When you click on each button it says there is no such page in my blog. Can you tell me how to create pages for those buttons too?


4 Nicole @ Create and Delegate June 17, 2010 at 2:55 pm

Million thanks! I get it now!


5 Queer English July 26, 2010 at 4:47 am

Thank you so much for this tutorial. But how can I add multiple links to one tab? Thanks.


6 Maggie November 4, 2010 at 7:05 pm

hoohoo thanks for doing this.


Leave a Comment

"How rare and wonderful is that flash of a moment
when we realize we have discovered a friend."

~William E. Rothschild~

Thank you for taking the time to share your thoughts.
I respond back to all comments.


Previous post:

Next post: