Cara Memasang dan Membuat Widget Multi Tab Menu di Sidebar Blog

Widget Multi Tab Menu di Sidebar Blog maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post, Tags, dan Archive, yang sejajar dalam satu space. Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah.

Langkah-Langkah :

1. Buka Dasbord blog anda, kemudian masuk kedalam menu Tema > Edit HTML.

2. Kemudia cari kode dengan cara menekan CTRL + f ]]></b:skin> atau </style>

3. Copy dan Paste kan kode berikut diatas ]]></b:skin> atau </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:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}

#sidebar-main{overflow:hidden}

4. Selanjutnya copy dan paste kan kode berikut di bawah <div id='sidebar-wrapper'>

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Tags</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-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' 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>

5. Setelah itu Save.

6. Kemudian masuk ke Tata Letak. Tambahkan Gadget yang akan dimasukkan kedalam Widget multi tab. Contoh : seperti gambar berikut.