Create Custom Navigation Bar For Blogger

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.

SEE THE UPDATED POST BY CLICKING HERE

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;

Here you can see that the tabs have much spacing. More over in my bar there is google search of my site. But this widget doesn't have it so it may create problem for you. I got this solution to write as for a person in blogger help forum asked me to. So lets do this;

• 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 -->
<!-- Bloggersmasher.blogspot.com –>

• Now Replace,

1. The text highlighted by red colour with your respective links.
2. The text highlighted by yellow colour with the description of your respective links.
3. 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 */
/* Bloggersmasher.blogspot.com*/ 

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

1. In line 3 change the value of width & height to fit your taste.
2. In line 3 the value of background with the Html color code you like.
3. In line 4 change the value of margin-top: in pixels to determine the space outside the border.
4. 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.

• Finally,click on orange save button and you are done.

Now, your tabs are done. Wanna see a preview. It's below;

It's good isn't it. Why don't you try it once.

If you face any complication comment below;

Bye friends and happy blogging!

Author : Anonymous

Share this

Related Posts