How To create custom Navigation bar for Blogger

11:26 AM 0

Hello guys! You might have seen various tabs such as home,contact,about & guest post below the header of our blog.

Let me explain you all about these things. Those tabs are just button besides which lies some links. They can be main category of a blog or some important sectors. For an instance if you click on contact button you will be redirected to contact form of blogger smasher. So do you like them.

Yes there are some gadgets which surely can fulfill the navitabs requirement. But they are not fully customizable. We cannot added other things in it as only buttons are allowed. You can compare the difference yourself. See a preview of page list widget below;

Go to dashboard>Layout.
There click on Add A Gadget just below your header.
Choose Html/Javascript as widget type and paste the below code in the content box;

<!-- Navigation tabs start -->
<div id='smasherlist'>
<a href="1st Linkhere" class="smashertab" title="description of Link 1">Link name to appear</a>
<a href="2nd Linkhere" class="smashertab" title="description of Link 2">Link name to appear</a>
<a href="3rd Linkhere" class="smashertab" title="description of Link 3">Link name to appear</a>
<a href="4th Linkhere" class="smashertab" title="description of Link 4">Link name to appear</a>
<a href="5th Linkhere" class="smashertab" title="description of Link 5">Link name to appear</a>
</div>
<!-- Navigation tabs end -->
<!-- pc10s.blogspot.com –>

Now Replace,

The text highlighted by red colour with your respective links.
The text highlighted by yellow colour with the description of your respective links.
The text highlighted by pink with the text that would appear as button.

As for the title you can leave it empty. Now, click on save.

Now, you have added the links. But they are simple and ordinary texts. So, It's time to style them. Styling is a major part. So pay attention;

Styling The Tabs;

To style your tabs follow below;

Go to dashboard>Template>Edit Html.
Then, search for ]]></b:skin> . After you found it just paste the below code above ]]></b:skin>;

/* Navigation tabs start */
a.smashertab, a.smashertab:link,a.smashertabs: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 */
/* pc10s.blogspot.com*/

Here in the above code you can do the below editings to suite your taste;

In line 3 change the value of width & height to fit your taste.
In line 3 the value of background with the Html color code you like.
In line 4 change the value of margin-top: in pixels to determine the space outside the border.
In line 6 change the value of color: with the Html code you would like for the appearance of the color of the text inside the buttons.