Cool NAVIGATION BAR for blogger

Navigation bar is a set of links to other Web pages in a Web site. For example, navigation bars are usually located across the top or down the side of a page and contain direct links to the major sections within the Web site. Navigation bars can be automatically maintained and generated by using Web Site Designer.

Navigation bars really help the visitor to access different pages of the website while remaining on the same page. It makes the accessibility easier to the visitors. It often happens that some good Blogger templates don’t have navigation bar. It generates a reason to discard the template. Well, don’t worry I have a great way to design a Blogger Navigation Bar for your Blog. Just follow the steps and enjoy a COOL Navigation Bar.

steps:

1. Login to your blogger Account
2. Navigate: layout>Edit HTML
3. Mark Check Box “expand widget”
4. Find the code ]]></b:skin>
5. Just before this code place the following CSS code

#top_bar {height:32px; background:transparent ; width:auto;}
#top_bar p{border:0; margin:0; padding:0; margin:0 auto; width:960px;}
#top_bar a:link, #top_bar a:visited{display:block; float:left; border-right:solid 1px #7FABC4; padding:0 10px; color:#FFFFFF; font-size:11px; height:20px; line-height:20px; margin-top:6px;}

6. Now you are required to place the following code snippet where ever you want to place the Navigation bar ( generally it’s placed below the header section")

<div id='top_bar'><p>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href='#’>NAME</a>
</p></div>

Replace '”#” with the link you want and replace “NAME’ with the Web page name

NOTE: Before doing this make sure to take a backup of the template you are previously using.

Technorati Tags: blogger,CSS,Navigation bar,HTML