Adding Navigation Tabs

In order to do that, the template must have an Add A Gadget link or widget container, an extra widget below the blog header.And  We create it.
- see layout.

Step 1. Adding an Add A Gadget

Adding a Add A Gadget is done in your template HTML.

1. Go to Dashboard > Template > Edit HTML.
2. Before you click EDIT HTML-  BACK UP YOUR TEMPLATE.

3. Look for the following lines (or something similar) in your HTML code:

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 -->

---------------------------------------------------

5. Click Save Template and NOW you have 2 'Add a gadget'

Step 2. Adding the links/navigation tabs.




1. Go to Layout > Click Add A Gadget
link below the header.

2. Scroll down the Add A Gadget window
and select HTML/Javascript.

3. Leave the title box empty.

4. Copy and paste the HTML code below
into the content box.



What i advice will be to copy the navigation code to a microsoft WORD / Notepad and do the EDITING first before following the above steps.

---------------------------------------------------------------



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 -->

--------------------------------------------------------------

REPLACE - 

* Your Link 1 will be your post/page URL

* ButtonText1 will be the Text shown at the navigation Tab.

( I always open a word page and Edit,
Add extra tabs ).



5. Click save.







Step 3. Styling the links/navigation tabs (turning
them into tabs).







5-1: Copy the following code below.

5-2: Change whatever necessary.

Red - width of tab

Blue - height of tab

Purple - background

Brown - mouse hover color

Green - total length of tab

--------------------------------------------------------




/* 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:1150px;
margin:0 auto;}

/* Navigation tabs end */






---------------------------------------------------------







** The above color ONLY can be change with color NAMES. 

    Scroll to bottom of color chart.

5-3: Go to Template

5-4: Click Customize > Advanced > Add CSS 

5-5: Paste the above code .

5-6: Click Preview to View your blog.

5-7: Click Apply to blog.  YOU ARE DONE....