Cara Membuat Sidebar Multi Tab Menu Blogger

Multi tab maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post,New Post, dan Label, sejajar dalam satu space.

Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah.

1. Pertama Cara Memasang:
1). Masuk Ke blogger kalian
2). Pilih Menu Tema lalu klik Edit Html
3). Cari ]]></b:skin> jika kesulitan menemukan kode itu. tekan Ctrl + F untuk membuka kotak pencarian dan tuliskan kode tadi lalu tekan Enter
jika sudah ketemu pastekan kode dibawah ini tepat diatas/dalam kode ]]></b:skin> tadi.

Tambahkan CSS

/* By https://ztncoding.blogspot.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:#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}

2. Kedua
Cari <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> lalu Letakan Kode dibawah ini tepat dibawah kode tadi.

Tambahkan HTML

<!-- By https://ztncoding.blogspot.com -->
<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'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</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>

Klik Simpan

akan muncul tiga widget di Tata Letak Bertuliskan tab1, tab2 dan tab3, silahkan isi disetiap widget itu.