Membuat Widget Slick Tab Show-Hide Dengan JQuery

Hai sobat blogger, kita berjumpa kembali.  Nich saya ada satu lagi tips membuat widget slick tab show-hide menggunakan jquery. Widget ini sangat menarik, karena saat kita mengklik salah satu judul tab maka akan tampil isi konten dari judul tab yang kita klik, plus efek slide down dan slide up serta dapat berguna untuk menghemat ruangan dalam blog kita. Dari pada linglung dan bingung silahkan anda lihat screenshotnya pada gambar di bawah ini. Untuk demo-nya, silahkan anda klik disini.

Bila anda tertarik berikut cara membuatnya

1. Login ke akun blog anda
2. Klik Rancangan > Elemen Laman > Edit HTML
3. Download Templete Lengkap anda.
4. Kemudian cari kode </head> (tekan Ctrl+F untuk mempercepat pencarian) dan copy-paste kode javascript dan jquery berikut di atas kode </head>

<script src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#komentar, #terkait').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>

Tambahan :
Apabila dalam templete anda sudah menggunakan  jquery-1.3.2.js, maka kode tersebut tidak perlu ditambahkan.

5. Lanjut ke langkah berikutnya, cari kode ]]></b:skin> dan copy-paste kode CSS berikut sebelum kode ]]></b:skin>

#slick_area {
    border:1px solid #585858;
    background-color:#141414;
    padding:8px;   
    margin:10px 0;
    line-height:18px;
}
#slick_area a{
    color:#ffffff;
    text-decoration:none;
}
.slick_area a:hover{
    color:#FF0000;
}
ul.slick {
    margin:2px 5px 8px 0;
    padding:0px;
}
ul.slick li {
    list-style:none;
    display:inline;
    background-color:#000000;
    padding:5px 14px;
    text-decoration:none;
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid #ffffff;
}
ul.slick li:hover {
    color:#00ff00;
}
ul.slick li.active {
    background-color:#2F2F2F;
    border:1px solid #ffffff;

}
.content-slick {
    background-color:#2F2F2F;
    border:1px solid #ffffff;
    color:#ffffff;
    min-height:40px;
    padding:7px 13px 5px;
    text-align:justify;
    font-size:12px;
    font-weight:normal;
}   
.content-slick ul {
    margin:2px;
    padding:0;
}
.content-slick ul li {
    list-style:none;
    border-bottom:1px solid #ffffff;
    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:#141414;
}
.content-slick ul li a {
    text-decoration:none;
    color:#ffffff;
    display:block;
}

#Tab2, #Tab3 { display:none; }

6. Jangan lupa klik Simpan Template
7. Langkah berikutnya masuk ke menu Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript
8. Copy-paste kode html dibawah ini

<ul class="slick">
 <li title="tittle tab 1" class="slick active">Judul Tab 1</li>
 <li title="tittle tab 2" class="slick">Judul Tab 2</li>
 <li title="tittle tab 3" class="slick">Judul Tab 3</li>
</ul>

<div id="Tab1" class="content-slick">
 Masukkan kode HTML/Javascript anda disini
</div>

<div id="Tab2" class="content-slick">
 Masukkan kode HTML/Javascript anda disini
</div>

<div id="Tab3" class="content-slick">
Masukkan kode HTML/Javascript anda disini
</div>

Keterangan

• Untuk kode yang berwarna hijau gantilah dengan tittle dan judul tab yang anda inginkan
• Untuk kode CSS nya bisa anda setting sesuai keinginan anda

9. Klik Simpan dan lihat hasilnya.

Apabila anda ada seputar pertanyaan maupun saran mengenai widget diatas silahkan berkomentar.
Selamat mencoba dan semoga bermanfaat.

Related Post