Creating tabs in sidebar for blogger-style 1

 100 % working - can't afford demo

people have recently found the way to use tabs in sidebars for blogger . These tabs are very useful  for blogs with more number of sidebars widgets occupying more space in your blogger in length wise. In order to stop this problem the Tabs help us. Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

step 2:  Dashboard>> design >> edithtml >> and search for this code
]]></b:Skin>

and paste this code above ,

.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

step 3: then paste this code below]]></b:skin> or above </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/tabbloggerforbeinsight-min.js"></script>

Lets see how it works:

in the above image you can see each gadget has a number from 0 to 6 it can be 0 to 200.
but you should have 200 widgets..

in the above example i wanted search , labels ,feedjit, followers,recent posts and subcategories in the tab, so i changed the above code given in red like

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

to

var starttab=0;
var endtab=6;
var sidebarname="sidebar";

if you want feedjit , followers, recent posts and subcategories in tab edit the code acording to the gadget number like this

var starttab=3;
var endtab=6;
var sidebarname="sidebar";

simply, start tab denotes the beginning of the tab and endtab denotes the end..

Thats It.

for more styles.
style 2: [click here]
style 3: [click here]
style 4: [click here]
style 5: [click here]