Cara Membuat Slik Tab Widget

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. Ketika kita 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. Slick tab sangat bermanfaat untuk mengirit tempat pada blog kita agar terlihat rapi dan profesional. Memang ada salah seorang master blogger Indonesia yang sangat ahli dalam hal ini, sehingga script slick tab yang beliau buat menjadi sangat mudah untuk diterapkan pada blogger. Efeknya kita sebagai blogger menjadi tidak tahu bagaimana efek jQuery slick tab tersebut disusun/ditulis untuk menghasilkan tampilan yang sangat bagus.

Cara memuatnya sebagai berikut:



Langkah pertama:
Seperti biasa kita harus login ke bloger dan masuk ke edit html

Langkah kedua:
Copy Paste kode css di bawah ini di atas kode ]]></b:skin>

>

#slick_area {
border:1px solid #585858;
background-color:#141414;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#FFF;
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:#000;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:1px solid #585858;
}
ul.slick li:hover {
color:#FFFF00;
}
ul.slick li.active {
background-color:#2F2F2F;
border:1px solid #585858;

}
.content-slick {
background-color:#2F2F2F;
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:#141414;
}
.content-slick ul li a {
text-decoration:none;
color:#FFF;
display:block;
}

Langkah Ketiga:
Copas kode dibawah ini di atas kode </head>

<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&gt;

Langkah keempat:
Simpan template

Langkah kelima
tambahkan widget dan pastekan kode di bawah ini:

<ul class="slick">
<li title="terbaru" class="slick active">Terbaru</li>
<li title="komentar" class="slick">Komentar</li>
<li title="terkait" class="slick">Terkait</li>
</ul>

<div id="terbaru" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="komentar" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="terkait" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

jangan lupa ganti url di atas dengan url yang diinginkan dan selamat mencoba