Creating Navigation Tabs in Blogger.

You might have seen “Home,Tutorials,Contact” below the Header of Blogger Rounder.Those are called navigation or menu Tabs.If you click any one of them you will go in another pages.For example if you click on home page you will go to Home of Blogger Rounder.Similarly if you go to Contact page you will encounter contact form.So navigation tab is links.

 

We can add them easily at Blogger Default Template by adding link list or Page list gadget at Dashboard>Design or layout>Add a Gadget>Link list or page list.But if you use third party Template we will face difficulties.Finding alternatives we can add add navigation Tabs with Simple HTML and CSS code.Lets try it.

1. Go to Blogger Dashboard>Design or Layout
2. Click on “Add a New Gadget” which is below of Header
   
3. Select HTML/JavaScript.
4. In the code window add the following codes.

   <!-- Navigation tabs start -->
   <div id='rounderlist'>
   <a href="Linkhere" class="roundertab" title="Brief description of Link">Link name 1</a>
   <a href="Linkhere" class="roundertab" title="Brief description of Link">Link name 2</a>
   <a href="Linkhere" class="roundertab" title="Brief description of Link">Link name 3</a>
   <a href="Linkhere" class="roundertab" title="Brief description of Link">Link name4</a>
   <a href="Linkhere" class="roundertab" title="Brief description of Link">Link name 5</a>
   <div>
   <!-- Navigation tabs end -->
   <!-- BloggerRounder.blogspot.com –>

5. Where,
   • In Link here Replace that with the link where you want to send your visitor like http://Bloggerrounder.blogspot.com for sending at Homepage.
   • In Brief Description of Link Replace that with the text that help visitor to understand about that link.
   • In Link Name 1,2,3 replace with the text that will be shown in Navigation bar like Home,Contact etc..
6. Click on orange button save.

Styling the Navigation Bar,

If you don’t style the navigation bar it will look like this

You can see there is not styling.The background will be similar to Blog.

To style it follow below.

1. Go to Dashboard>Template or Design>Edit HTML
2. Find this ]]></b:skin>
3. Add the code just above it.

   /* Navigation tabs start */
   a.roundertab, a.roundertab:link,a.roundertabs:visited { width:130px; height:30px; background:#eee; border:1px solid #000000; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:11px; color:black; line-height:25px; overflow:hidden; float:left;}
   a.roundertab:hover {background:#ccc;}
   #rounderlist {width:960px; margin:0 auto;}
   /* Navigation tabs end */
   /* BloggerRounder.blogspot.com*/ 

4. Where,
   1. In line one.
      • At width select the width of Navigation tabs (only of one link).e.g if you have added “home” in navigation tab then width 130px will be its width.Not of whole navigation bar.
      • At height select the height that suits your taste.
      • In background:#eee select HTML color code.For HTML color code see below.
      • In margin-top:1px select the space outside border.
      • In color:black change black with HTML color code if you want.It deals with the color of text in navigation tabs.
   2. In Line 2 you can change from #ccc  to other background to make hover effect.You need to change with color code.For HTML color code see below.
   3. In line 3 change width:960px to change the width of navigation bar.
5. Here is the result of Test page
   

Some resources required for Making Navigation bar.

1. You may be searching for color code.You can get it from here .
2. If you want to measure the width of screen you can try this from here.

Bye pals.Stay updated with Blogger Rounder.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.