Tab Slick dengan Java Script jQuery

Setelah kemarin membuat artikel tentang bagaimana membuat tab view, kali ini saya akan membuat tab view dengan manggunakan java script JQuery yang biasa di sebut dengan 'Tab Slick' dengan menggunakan Tab slick blogger sobat akan menjadi lebih indah dan dapat mengundang pengunjung blog semakin betah berlama-lama menatap blog anda.

Tanpa banyak basa-basi saya akan memberikan langkah-langkahnya sebagai berikut :

1. Pertama kali tentu saja sobat harus login ke Blogger
2. Setelah masuk ke Blogger, sobat langsung saja menuju ke Tab Rancangan -> Edit HTML
3. Jangan lupa centang di bagian Expand Template Widget
4. Silahkan sobat kopi kode dibawah ini dan letakkan diatas kode ini ]]></b:skin>
   

   /* -------------- * SLICK TAB * ------------------- */
   #slick_area {border:0px solid #cccccc;background-color:#f4f4f4;padding:0px;margin:10px 0;line-height:14px;width:337px;}
   
   #slick_area a{color:#0aaaf5;text-decoration:none;}
   .slick_area a:hover{color:#0aaaf5;}
   ul.slick {margin:5px 5px 8px 0;padding:0px;}
   ul.slick li {list-style:none;display:inline;background-color:#cccccc;padding:6px 14px;text-decoration:none;font-size:10px;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #cccccc;}
   ul.slick li:hover {color:#0aaaf5;}
   ul.slick li.active {background-color:#f4f4f4;border:1px solid #cccccc;}
   .content-slick {background-color:#f4f4f4;border:1px solid #cccccc;color:#121212;min-height:40px;padding:5px 5px 5px;text-align:justify;}
   .content-slick ul {margin:2px;padding:0;}
   .content-slick ul li {list-style:none;border-bottom:0px solid #585858;padding:4px;}
   .content-slick ul li:last-child {border-bottom:none;}
   .content-slick ul li:hover, .content-slick ul li a:hover {display:block;background-color:#cccccc;}
   .content-slick ul li a {text-decoration:none;color:#FFF;display:block;}
   
   #komentar, #terkait { display:none; }
   

5. Setelah langkah diatas sudah dilakukan, kopi kode di bawah ini dan letakkan diatas </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   $(document).ready(function(){
   $(&#39;#tab2, #tab3, #tab4&#39;).hide();
   $(&quot;ul.slick li&quot;).click(function () {
   $(&quot;.active&quot;).removeClass(&quot;active&quot;);
   $(this).addClass(&quot;active&quot;);
   $(&quot;.content-slick&quot;).slideUp();
   var content_show = $(this).attr(&quot;title&quot;);
   $(&quot;#&quot;+content_show).slideDown();
   });
   });
   </script>
   

   Jangan lupa Save pekerjaan sobat
6. Berikutnya sobat buka tab Edit laman yang masih di bagian Pengaturan, terus sobat klik Tambah Gadget pilih HTML/JavaScript, dan Letakkan kode dibawah ini kedalam kotak Gadget
   

   <div id="slick_area">
   
   <ul class="slick">
   <li title="tab1" class="slick active">Tab1</li>
   <li title="tab2" class="slick">Tab2</li>
   <li title="tab3" class="slick">Tab3</li>
   <li title="tab4" class="slick">Tab4</li>
   </ul>
   
   <div id="tab1" class="content-slick">
   Isi tulisan di Tab1
   </div>
   
   <div id="tab2" class="content-slick">
   Isi tulisan di Tab2
   </div>
   
   <div id="tab3" class="content-slick">
   Isi tulisan di Tab3
   </div>
   
   <div id="tab4" class="content-slick">
   Isi tulisan di Tab4
   </div>
   
   </div>
   

7. Dan Lihaat hasilnya

Semoga tutorial ini dapat membantu sobat supaya blognya tambah keren, jika masih mengalami kesulitan dalam penerapannya silahkan tinggalkan komentar, saya siap membantu