How To How To Create A Horizontal Navigation Bar

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‘

Step 9. Save the template

Step 10. Page Elements

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

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

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:

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.

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 {
font-size:100%;
list-style-type: none;
display:inline;
padding:0px; This will give you “buttons” so if you want a solid bar make it 10px
margin: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!

blogging