Hampir sama dengan postingan ane terdahulu tentang Tab View Slider, dimana Tab view jQuery kali ini adalah salah satu  Tab view jQuery ter-simple.. dengan memakai fungsi click untuk membuka isi content, juga tetap menggunakan framework dalam kendali proses kerja nya.


Tab view jQuery kali ini kita sebut saja Tab Vanilla Slick, yang berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya, cukup klik salah satu judul konten tersebut.

Demo Tab Vanilla SlickKlik disini untuk melihat demo Tab Vanilla Slick

Ketika sobat klik salah satu judul konten maka konten yang dimaksud akan ditampilkan dan konten yang lainnya akan disembunyikan, selain itu ditambah efek slide down dan slide up agar perpindahan konten lebih menarik.

Cara membuat dan memasang  Tab Vanilla Slick :

Langka 1
Pasang framework dibawah ini pada template sobat, tepatnya diatas kode </head> pada rancangan-Edit HTML blog sobat.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Perhatikan framework jQuery diatas, jika sebelumnya sobat pernah memasang framework tersebut di template sobat, maka untuk Langkah 1 di lewat saja.

Langka 2
Tambahkan kode Java Script dibawah ini, tepat setelah kode pada Langkah 1 atau diatas kode </head> pada rancangan-Edit HTML blog sobat.

<script  type='text/javascript'>
$(document).ready(function(){
    $('#archive, #blog').hide();    
    $("ul.slick li").click(function () {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content-slick").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
 });
</script>

Langka 3
Tambahkan kode CSS dibawah ini, tepat diatas kode ]]></b:skin> pada rancangan-Edit HTML blog sobat.

#slick_area {
  border:1px solid #dedbd1;
  background-color:#f3f1eb;
  padding:8px;  
  margin:10px 0;
  line-height:18px;
  width:310px;
}
#slick_area  a{
  color:#222;
  text-decoration:none;
}
.slick_area a:hover{
  color:#009;
}
ul.slick {
  margin:2px 5px 8px 0;
  padding:0px;
}
ul.slick li {
  list-style:none;
  display:inline;
  background-color:#dedbd1;
  padding:5px 14px;
  text-decoration:none;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid #dedbd1;
}
ul.slick li:hover {
  color:#009;
}
ul.slick li.active {
  background-color:#fff;
  border:1px solid #585858;
}
.content-slick {
  background-color:#fff;
  border:1px solid #585858;
  color:#dedede;
  min-height:40px;
  padding:7px 13px 5px;
  text-align:justify;
}  
.content-slick ul {
  margin:2px;
  padding:0;
}
.content-slick ul li {
  list-style:none;
  border-bottom:1px 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:#dedbd1;
}
.content-slick  ul li a {
  text-decoration:none;
  color:#000;
  display:block;
}
#archive, #blog { display:none; }

Langka 4
Save template sobat.
Semua kode sudah terpasang, lantas bagaimana untuk menampilkan Tab Vanilla Slick tersebut ??

Langka 5
Tambahkan halaman widget sidebar sobat dngan cara memasukan kode dibawah ini pada halaman add gadget HTML/Java Script.
<div id="slick_area">
<ul class="slick">
<li title="label" class="slick  active">Label</li>
<li title="archive" class="slick">Archive</li>
<li title="blog" class="slick">Blog</li>
</ul>

<div id="label" class="content-slick">
<ul>
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
</ul>
</div>

<div id="archive" class="content-slick">
<ul>
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
</ul>
</div>

<div id="blog" class="content-slick">
<ul>
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
</ul>
</div>
</div>

Terdapat 4 bagian pada kode Langkah 5.
- Bagian pertama adalah merupakan judul konten dari masing-masing tab.
- Bagian ke 2 - 4 adalah merupakan isi konten.
- Kode yg diberi tanda merah, adalah kode yang dapat dirubah oleh sobat, baik itu judul konten maupun dalam penempatan URL link.

Source Code Tab Vanilla SlickKlik disini untuk mengambil source code Tab Vanilla Slick

Langka 6
Save template sobat.. dan lihat hasilnya.

Jika sobat ingin menambahkan jumlah tab-nya, silahkan memodifikasi kode java script dan HTML nya pada Langkah 2 dan Langkah 5.

Selesai..
Selamat mencoba dan semoga bermanfaat.