Membuat Tab Vanilla Slick jQuery

Setelah berkutat dalam beberapa artikel tentang pembuatan menu dan beberapa efek jQuery, sekarang kita sedikit bergeser ke pembuatan slick tab atau ada juga yang menyebutnya organic tab tetapi masih tetap menggunakan framework jQuery sebagai sumber kendalinya. Kita sepakat saja dulu dengan penamaan slick tab agar mudah dalam memahaminya. Slick tab berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya kita cukup klik salah satu judul konten tersebut.

ref

Gambar: http://agoezimoetz.blogspot.com

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.

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 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 tandamerah,adalah kode yang dapat dirubah oleh sobat, baik itu judul konten maupun dalam penempatan URL link.


Langkah 6
Save template sobat.. dan lihat hasilnya.

Selesai..
Selamat mencoba dan semoga bermanfaat.

Referensi Artikel :

• http://modification-blog.blogspot.com/2010/06/memahami-dan-membuat-jquery-slick-tab.html
• http://agoezimoetz.blogspot.com/2010/07/tab-vanilla-slick.html
• http://imdad-gresik.blogspot.com.

Membuat Tab Vanilla Slick jQuery 9 out of 10 based on 10 ratings. 9 user reviews.

Tutorial Blog

• Cara mengganti background Kotak Komentar Blog 1
• Cara Mudah Membuat Random Background Color
• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• Cara Simple Membuat Script Link Banner Pada Blog Plus Wadah Text Area
• Membuat Slide Gambar Efek Terjatuh Dengan jQuery
• Cara Mudah Auto Hide Dan Menghilangkan Navbar Blogger
• Cara Membuat Slide Gambar Berjalan Pada BLOG
• Cara Mudah Mendeteksi Blog Yang NoFollow atau DoFollow dengan AddOns Mozilla Firefox
• Cara Mencari Blogger Satu Kota atau Satu Daerah
• Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger
• MEnambah Dan Memasang Gadget HTML Code Javascript Pada Sidebar
• Cara Cek Link Yang Rusak Di Blog
• Cara Membuat Kotak Wadah Kode HTML Dengan Warna Pada Postingan
• Cara simpel Membuat Spoiler (Tombol Hide Show Kotak Kode HTML Pada Posting)
• New !! Cara Membuat Related Post Keren Dengan Tampilan Image

JQuery BlOg

• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• New !! Membuat Kotak dengan Background (Blogroll)
• Page Peel Efek menggunakan jQuery & CSS
• Cara Membuat Back to Top Dengan jQuery
• Menampilkan Recent Post with Thumbnail Dengan JQuery
• Daftar Isi Memakai Efek jQuery Accordion