Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, back to tutorial blog, jadi pada kesempatan kali ini kita  akan membahas tentang cara membuat menu tab view,  pastinya akan lebih bagus, menarik dan keren tentunya, karena ditambah dengan sentuhan JQuery didalamnya. Sebagai contoh anda bisa melihatnya di dibawah ini. 

Dan bila belum jelas juga anda bia melihatnya pada screenshot dibawah ini:

Demo/Sceenshot

Gimana masbro, keren kan tab view widgetnya?? selain itu tabview ini juga bisa membuat blog kita terkesan rapih. Yowes, ayo mulai saja cara membuatnya. 

1. Login ke akun blogger sobat

2. Masuk ke rancangan/design

3. Pilih Tata Letak

4. Edit HTML

5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}

    

6. Setelah itu,carilah kode </head> setelah ketemu letakkan kode javascript dan jQuery berikut tepat diatasnya:

<script language='javascript' src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#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>   

     
8. Simpan tempalate, dan masih lanjut neh sob... masuk ke Tata Letak/Rancangan, klik Add New Widget/ Tambah Widget, lalu pilih HTML/Javascrip. Kemudian letakan kode dibawah ini:

<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>
<div id="tabsatu" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Satu

</div>
<div id="tabdua" class="content-slick">


Taruhlah kode HTML/Javascript anda di Tab Dua

</div>
<div id="tabtiga" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Tiga

</div>

   

9. Sampai disini anda sudah bisa membuat jquery tab view scroll show hide widget. dan jangan lupa simpan.

Keterangan:

Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan. Dan untuk kode CSS, silahkan diedit sesuaikan dengan template sobat.  Dan lagi, bila ditemplate anda sudah ada jquery-1.3.2.min.js?? berarti untuk file.js'nya tidak perlu ditambahkan lagi.

Begitulah kiranya Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, selamat mencoba, semoga bermanfaat.