Smooth Horizontal Slider jQuery Multi Tools Tabs Plugin or Widget For Blogger

(Improved)

These are popular jQuery New Horizontal Tabs.Tabs play an important role if we want to use a hot place to display many widgets.These jQuery Tabs are very beautiful and also have many special features.

You can see live Demo HERE

Special features:

1* It loads very Fast.Don't affect page load time

2* No need to upload any Java script or any image etc...

3* You can change the color of these tabs very easily......

4* You can add any number of tabs Or buttons...

5* These have auto fixing or Auto resizing capability.If you paste them in side bar they will automatically reduce their size.No need to Set height and width the most cumbersome job.


Lets begin the installation..



Step 1:

Login your Blogger Account. >>> Click Layout >>> Then Click EDIT HTML >>> DON'T Check Expand Widget Templates

Step 2:

Search for a Code ]]></b:skin> in your blogger template

Step 3:

Now Replace ]]></b:skin> with Below Code

]]></b:skin>

<!--[if IE]>
<style type="text/css">

#menu li {
 position:static;
}

</style>
<![endif]-->


<!--Internet Explorer Trancparency fix-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->


<style>

ul.tabnav{

 padding:0px 0px 0px 0px;
 height:27px;
 margin:0px 0px;
}


.tabnav li {
 display: inline;
 list-style: none;
 float:left;
 text-align:center;
 margin-right:4px;

 }


.tabnav li a {
 text-decoration: none;
 text-transform: uppercase;
 font-weight: normal;
 padding: 5px 8px;
 width:90px;
 line-height:18px;
 font-weight:bold;
 font-family:Century gothic, Arial, sans-serif;
 color: #262B2F;
 text-decoration: none;
 display:block;

 }
 
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
 text-decoration:none;
 background: url(none/catm.pg) repeat-x;
 color: #0283C7;

 }


.tabdiv {
 margin-top:2px;
 padding: 5px 5px 5px 5px;
 font-family:  Tahoma,Georgia,Century gothic, Arial, sans-serif;
 background:#ffffff
 }
.tabdiv a:link,.tabdiv  a:visited {

     color:#333;

 }
.tabdiv a:hover{

 color: #2676A1;
 }
.tabdiv ul{
 list-style-type:none;
 margin:0px 0px;
 padding:0px 0px;
     }
 
.tabdiv ul li{
 height:100%;
 line-height:28px;
 padding: 0px 0px 0px 0px;
 color:#333;
 border-bottom:1px dotted #61696F;
}
.tabdiv li a:link,.tabdiv li a:visited{
 margin-left:5px;
 overflow:hidden;
 height:18px;
 line-height:24px;
 padding:0px 0 0px 0px;
 margin:3px 0px;
 color:#99A6AF;
 font-size:13px;

     }

.tabdiv li a:hover {
 background:url(none/la.jpg) no-repeat;
 color: #fff;
 text-decoration:none;
     }
.ui-tabs-hide {
 display: none;
     }

</style>


<script src='http://bplugnplay.bravehost.com/jquery-1.2.6.js' type='text/javascript'/>

Step 4:
now we will work in body section of template.

Now find code similar any of below

<div id='sidebar-wrapper'>

OR

<b:section class='sidebar' id='sidebar' preferred='yes'/>

After finding paste Below Code After Or Below Above Code [ what ever you found from above two ]

<div id='tabzine'>
<ul class='tabnav'>
         <li class='pop'><a href='#popular'> RECENT</a></li>
         <li class='fea'><a href='#tags'> Help Box </a></li>
<li class='rec'><a href=' #recent'> REVIEW </a></li>
     </ul>

<div class='tabdiv' id='popular'>
<b:section class='cahaya13' id='cahaya19' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Receive Widgets in Email' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabdiv' id='tags'>
<b:section class='cahaya99' id='cahaya4' showaddelement='yes'>
<b:widget id='HTML11' locked='false' title='Help Box.' type='HTML'/>
</b:section>
</div>

<div class='tabdiv' id='recent'>
<b:section class='cahaya33' id='cahaya14' showaddelement='yes'>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

Now Save Your Template

Its Done !

Now Open Page Elements Page there you will see the section Like below image where you can "ADD A NEW GADGET" to each tab for any number.

Please Comment if You like these tab
If you have any problem in its installation then we can discuss it via comments :)