Cara Mudah Membuat Sidebar MultiTab [WORKS!]

hai sobat semua, kali ini saya akan mencoba menshare ilmu yang baru saya dapatkan yaitu Cara Mudah Membuat MultiTab Sidebar [WORKS!]. Setelah melakukan petualangan, pengembaraan dan pendalaman yang ditemani oleh mbah Google bertahun-tahun [Lebay], akhirnya saya mendapatkan Cara Mudah Membuat MultiTab Sidebar [WORKS!], karena dari beberapa sumber yang saya dalami, tidak semua tutorial yang disampaikan bisa saya terapkan diblog saya ini, dan akhirnya saya menemukan Cara Mudah Membuat MultiTab Sidebar [WORKS!].

Sebelum masuk ke tutorialnya, bagi sobat-sobat semua yang termasuk blogger pemula seperti saya, pasti pernah merasakan kebingungan dalam mengatur widget blog sobat, "ga ditampilin kok butuh widget itu", "ditampilin kok jadi menuhin layar monitor". mulai sekarang sobat tidak usah bingung, dengan menggunakan sidebar model multitab ini, sobat bisa mengumpulkan 2 atau 3 widget dalam satu tempat tertentu sehingga lebih menghemat tempat pada tampilan blog sobat, memang ini hanya cara alternatif karena masih banyak cara yang lain yang bisa digunakan untuk mengatur widget blog sobat akan semakin efisien dan "KEKINIAN" yang akan saya share dilain waktu.

BACA JUGA: Cara Mudah Membuat Recent Post Berbentuk Slider

Bentuk sidebar multitab yang saya share kali ini berbasis JQuery, dimana cara pemasangan scriptnya terletak didalam kode HTML template blog sobat, dengan kata lain disini saya akan membuat sidebar baru diluar sidebar standar, yang saya buat khusus dalam bentuk MultiTab. gimana?? semakin membuat sobat penasaran?? mari kita mulai tutorialnya (Jangan Lupa Sambil Seruput Kopi :D).

1. login dahulu ke akun Blogger sobat.

2. masuk kemenu Template >> edit HTML

3. cari kode ]]></b:skin> , pastekan script dibawah ini dibawah 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>

4. kemudian, Pastekan Script dibawah ini dibawah kode <aside id='sidebar-wrapper'> atau <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'>Arsip</a></li>
<li class='tab2'><a href='#tab2'>Label</a></li>
<li class='tab3'><a href='#tab3'>Profil</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>

5. kemudian sesuaikan teks yang berwana biru (Arsip, Label, Profil) sesuai dengan widget yang sobat gunakan.

6. simpan template, kalau sukses akan ada tampilan sidebar baru diatas sidebar standar blog sobat.

selamat mencoba, cara ini sudah SUKSES diterapkan diblog saya, sekian dulu tutorialnya sampai ketemu lagi ditutorial saya selanjutnya... caaooo

SUMBER INFO