Sidebar Multi Tab in blogspot layout.

Sidebar Multi Tab

Hi, this is a customizable sidebar Tab. You can change everything, if you have coding knowledge. This is the best sidebar Tab for me. If you want this , you have to follow some steps.

1st Step:

Click on the Template>> Edit HTML>> Proceed.

Now find [by pressing Ctrl + F] this code in the template.

Search for </b:skin> and add this code above it.

/* Best Tab widget by Obhooy.com
----------------------------------------------- */
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#404040;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#64A071}
#sidebar-main .widget1{background-color:#ffffff;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}

2nd Step:

Copy and paste this code where you want ....


/* --------------obhooy.com [Start] [Best Sidebartab]-------------- */

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
<li class='tab4'><a href='#tab4'>one</a></li>
<li class='tab5'><a href='#tab5'>two</a></li>
<li class='tab6'><a href='#tab6'>three</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-archive-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab4'>
<b:section class='sidebar' id='tab4-one-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab5'>
<b:section class='sidebar' id='tab5-two-posts' showaddelement='yes'/>
</div>
<div class='widget1' id='tab6'>
<b:section class='sidebar' id='tab6-three-posts' showaddelement='yes'/>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
/* --------------obhooy.com [End] [Best Sidebartab]-------------- */

Now Save it and see your Sidebar Multi Tab in layout.

You can customize it but no need. 6 tabs is default you can use 3 tabs as your wish.


Thanks to visit my site.