Membuat Sidebar Multi Tab Dengan Effect jQuery pada Blog

Dengan Edit HTML, widget bawaan blogger seperti popular post, label, archive, follower dll yang asli punya blogger bisa dimasukan kedalam sidebar multi tab ini, karena memanfaatkan fungsi asli penambahan widget yaitu pada layout » tambah gadget.

1. Dengan Tanpa Edit HTML, widget bawaan dari blogger seperti yang Miev sebutkan diatas tidak bisa dimasukan kedalam sidebar multi tab ini, karena hanya bisa menambahkan widget dari luar blogger seperti Fb-like box, twitter-box dll, sehingga membuat loading agak lama.
2. 

1. Masuk blogger
2. kemudian pilih ke template
3. edit HTML
4. masukan script ini tepat di BAWAH kode ]]></b:skin>


<style>
#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:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>


<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>
</ul></div> 
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section></div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</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>