Create Navigation Bar For Blogger

Every blog users might have tons of posts in his blog. But it is also sure that he will also have at least a page or two. In these pages he might have kept some important information about his blog which he wants the visitors must see. Almost all the visitors see the blog and see some unique posts and other contents in it.

Sometimes it also happens that the content they are searching in the blog can be in the page of the same blog. So the visitors will not visit the blog and that blog status might fall down. The only solution for this is to add a list of standalone pages of the blog. But the gadget which the blog offers is quite simple and some sort of boring and hazy too. This makes the reader minds narrower. Being a good blogger we should make it more attractive and criticize the blogger widgets. So in this tutorial I will teach you the way to add navitabs in your blog like as mine.

This is a simple blogger trick. It will create buttons with decoration and also with an impressive look and design. Behind all the buttons there would be hyperlink with your page URL of your wish. So are you ready for this. You only have to implement some steps given below. But before doing this please Backup Your Template.

 Step I. Adding An ADD A Gadget

1. Sign in to your blogger account.

2. Be forwarded to design>Edit Html.

3. Look for this code or similar to this in your site.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YourBlog Title(Header)' type='Header'/>
</b:section>
</div>

4. Right under it paste this code:

<!--Navigation page element starts -->
<div id='navibar-wrapper'> 
<b:section class='navibar_section' id='navibar_section' showaddelement='yes'/> 
</div> 
<div style='clear: both;'/>
<!--Navigation page element ends -->

Step II. Adding In The Tabs.

1. Go to design>page elements/layout.

2. Below the header click on 'Add a Gadget'.

3. Scroll down and select Html/JavaScript.

4. Don't write anything in title and paste the below code in the content box.

<!-- Navigation tabs start -->
<div id='navibar'>
<a href="YourLink1" class="navitabs" title="TooltipText1">ButtonText1</a>
<a href="YourLink2" class="navitabs" title="TooltipText2">ButtonText2</a>
<a href="YourLink3" class="navitabs" title="TooltipText3">ButtonText3</a>
<a href="YourLink4" class="navitabs" title="TooltipText4">ButtonText4</a>
<a href="YourLink5" class="navitabs" title="TooltipText5">ButtonText5</a>
<div>
<!-- Navigation tabs end -->

5. Now replace:

YourLink with the URL of your destination page or site.
a) You can get the URL of a page by copying the content of your browser’s address/URL bar while you are on that page.
b) To show all posts under a label (category), you need to link to the label’s page. You can construct the URL to the page (i.e. label URL) by following the format below:
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL
c) For a multiple word label such as "YOUR LABEL", you need to replace the space between words with %20, like so: YOUR%20LABEL.
d) And one more thing, labels are case sensitive.

TooltipText with the text you want to appear when you hover the button.

ButtonText with the text you want show on each button.

6. Click on save button.

Step III.Styling The Tabs.

1. Again go to design>Edit Html.

2. Find this code in your template.

]]></b:skin>

3. After you have found it copy the below code and paste it ultimately before that line.

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */

4. Save your template and view it.

Step IV.Customizing

Change the colors, height etc. to suit your taste.

You can add or reduce the number of tabs. Do it in Step 2, each line of code (line 3 to 7) corresponds to a tab.

To change tab width, change the value in Step 3 line 1.

Changing the number of tabs and/or tab width will make the bar off-centered. To keep it at the center, you will have to change the container width in Step 3 line 4. The width should be equal to the sum of all tab widths (including left and right margins).

You can move the bar to the top of the header if you want,

1. In Step 1 no. 3, inside the header widget, change locked='true' to locked='false'
2. Drag & drop the corresponding gadget in Page Elements page

Finally your navigation bar should look like the one below:

Now I think your pages are well viewed by the visitors. Let me tell you a secret of mine. This gadget has helped to gain 50% of my total traffic. So it’s a kind of good gadget. It also helps to build your traffic. Enjoy your brand new gadget. After the completion of this tutorial correctly your blog should look like the one in the picture. Cheers!!!!