Membuat Sidebar Multitab Efek jQuery

Dewa Teknik
Multitab Sidebar 
Assalamualaikum sobat, pada kesempatan yang baik ini, saya akan membuat artikel mengenai JQuery. Apakah sobat sudah tau jQuery? hehe, saya sendiri sebenarnya masih agak bingung tentang perngertian secara khusus. Jika sobat kesusahan dalam mencari pengertian JQuery, saya akan share sebuah link dari tetangga sebelah mengenai jQuery. Klik tautan berikut: Pengertian jQuery.
Saya akan mempersembahkan sebuah artikel ini kepada Orang yang sangat saya cintai dan menjadi Cinta Pertama dalam hidup saya. Tetapi semua itu telah kandas dan hanya menjadi kenangan saja. Saya akan menunggu dan akan tetap menunggu hingga dia siap dengan saya. Maaf sobat sedikit curahan hati dari saya, yaa mungkin malam ini menjadi malam yang sangat sakit bagi saya setelah melihat sebuah percakapan antara teman saya dengan dia yang mana dia sudah mendapatkan kebahagian bersama orang lain. Mungkin Allah SWT mempunyai rencana yang lebih baik dari apa yang kita harapkan. Amiin.
Oke sobat, kita kembali ke topik. Artikel kali ini, saya akan membahas sebuah Widget/Sidebar Multitab dengan efek jQuery. Artikel sebelumnya tentang Cara Membuat Widget Formulir Kontak memberikan sedikit pengetahuan bagaimana kerja Java Script dan JQuery. Ada 2 cara untuk membuat multitab sidebar ini:
  1. Tanpa edit HTML, mengaktifkan widget popular post, comments, label dan archive pada fitur blogger. Cara ini dipakai dengan cara sederhana yaitu menambahkan pada Layout --> Add Widget.
  2. Dengan edit HTML, widget bawaan blogger tidak bisa dimasukkan kedalam sidebar multitab. Cara diatas akan membuat loading blog menjadi lama.Yang kita pakai pada tutorial kali ini adalah dengan cara edit HTML. 
 Berikut ini cara pemasangan kode htmlnya:
  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page. 
  2. Letakkan kode berikut tepat 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>
  3. Kemudian letakkan kode berikut tepat dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>.
    4. <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>
  4. Setelah itu sobat bisa melakukan customisasi nama atau warna pada Widget Popular Post, Comments, Archive.
  5. Simpan template sobat.
Penting !!
Bagi sobat yang sudah menambahkan menu accordion pada widget/sidebar lain, lebih baik sobat menonaktifkannya. Karena hal tersebut bisa membuat salah satu dari sidebar tidak berfungsi. Atau sobat bisa menambahkan ID berbeda pada setiap Tag yang ada pada kode HTML sidebar accordion milik sobat.

Itulah sedikit sharing dari saya, dan semoga dapat bermanfaat bagi Indonesia kedepannya.
Dewa Teknik