Tuesday's Tips -Menu Bar

This is for a simple but very professional looking menu/navigation bar. (For an example of one, go to my photography blog [here]. )

Adding the Code

1) Go to your Dashboard > Design > Edit HTML

2) Search for this code:

/* Header

3)At the end of all the header codes paste this code:
(ie. right before the next '/*' section)

/* Navigation Bar
-----------------------------------------------
*/
#nav {
width:1100px;
background-color:#fffff;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
padding-top: 3px;
padding-bottom: 9px;
margin-top: 4px;
margin-right:0px;
margin-left: 75px;
text-align:left;
font-color:#000000;
font-family:century gothic;
font-size:14px;
font-weight:normal;
letter-spacing:2px;
}
#nav a {
background-color:#ffffff;
padding: 8px;
margin: 10px;
text-align:center;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}
#nav a:visited {
background-color:#ffffff;
padding: 8px;
margin: 10px;
text-align:center;
font-style: bold;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}
#nav a:hover {
background-color:#e6e6e6;
padding: 8px;
margin: 10px;
text-align:center;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}

Customizing the Code

#nav { }

This part controls what the menu as a whole looks like.

#nav a { }

This controls what each of the links look like when you first load the page.

#nav a:visited { }

This controls what each of the links look like after you have visited them.

#nav a:hover { }

This controls what each of the links look like when you hover your mouse over them.

For example, mine looks like this:

/* Navigation Bar
-----------------------------------------------
*/
#nav {
font-family:century gothic;
font-size:14px;
font-weight:normal;
letter-spacing:2px;
background-color:#fffff;
border-top:4px solid #000000;
border-bottom:4px solid #000000;
width:1100px;
padding-top: 3px;
padding-bottom: 9px;
margin-top: 4px;
margin-right:0px;
margin-left: 75px;
text-align:left;
font-color:#BAB9B3;
}
#nav a {
font-size:14px;
font-weight:normal;
letter-spacing:2px;
color:#000000;
background-color:#fff;
text-align:center;
padding: 8px;
margin:0px;
margin-left: 40px;
font-family:century gothic;
font-color:#BAB9B3;
}
#nav a:visited {
font-size:14px;
font-weight:normal;
letter-spacing:2px;
color:#000000;
background-color:#fff;
text-align:center;
padding: 8px;
margin-left: 40px;
margin-top:0px;
font-family:century gothic;
font-color:#BAB9B3;
}
#nav a:hover {
font-weight:normal;
font-size:14px;
letter-spacing:2px;
color:#fffff;
background-color:#e6e6e6;
text-align:center;
padding: 8px;
margin:0px;
margin-left: 40px;
font-family:century gothic;
font-size:14px;
font-color:#BAB9B3;
}

Adding the Menu

1) Go to 'Page Elements'
2) Add a new HTML/Javascript widget underneath your header
3) Copy/paste this code:

<div id="nav"><a href="YOUR LINK HERE">YOUR TEXT HERE</a></div>

For example, mine looks like this:

<div id="nav"><a href="http://photographybyemilygrace.blogspot.com">Home</a> <a href="http://photographybyemilygrace.blogspot.com/p/about.html">About</a>
<a href="http://photographybyemilygrace.blogspot.com/p/contact.html">Contact</a> <a href="http://www.flickr.com/photos/photographybyemilygrace/" target="_blank">Flickr</a>

Ta-da! You now have a stylish new menu bar. If you used this tutorial, I'd love to see what you came up with--let me know by leaving a link in a comment. =D