FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

12 July 2011

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

4 comments:

Janet

Oh, thank you so much! I've been looking forever for this tutorial! Thanks again :)

Brooke

Yay! Emily, this is great! I was wondering... how'd you get the "Emily Grace Photography" image in the middle of it?

Emily Grace

Janet - You're so very welcome!

Brooke - I simply placed the html code for the image where I wanted it to be.

Ashlyn

Just want to let you know, Emily, I use this HTML/CSS allllll the time. I do... really. :)

Post a Comment

Leave your thought...