Easy way to make navi bar

Aug 5, 2007

Here is a example for navi bar

1> Add these navigation codes to stylesheet.

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px 15px 5px;
margin:0px;
background-color:#71B8D5;
color:#fff;
width: 100%;
border-bottom: 1px solid #6F8C8F;
}
#nav a
{
color:#fff;
text-decoration:none;
}
#nav a:hover
{
text-decoration:underline;
}

Adjust padding, margin, font, background color, border, and link style for your blog.
2>Add a navigation div ID followed by links to the sections of your blog to which the navigation will point. If you want to put under the Head Banner, Find and put after red </div>,

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4'>
<b:widget id='Header1' locked='true' title='FOX (Header)' type='Header'>
</div>
<div id="nav">
<a href="http://www.yoursite.com/">about</a>|
<a href="http://www.yousite1.com/">archives</a>|
<a href="http://www.yoursite2.com/">contact</a>|
<a href="http://www.yoursite3.com/">rss</a>
</div>
Replace your links with http://www.yoursite.com/
Preview and save your template.

blog tips