Cara Membuat Tab View Blogger dengan JQuery

Bismillahirahmanirrahim.  Setelah sebelumnya kita telah membuat Tab View Blogger kini kita akan membuat Tab View Blogger dengan di tambahkan JQuery.  Tab View ini 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. Tab View ini 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 Tab View Blogger yang beliau buat menjadi sangat mudah untuk diterapkan pada blogger. Efeknya kita sebagai blogger menjadi tidak tahu bagaimana efek jQuery Tab View Blogger tersebut disusun/ditulis untuk menghasilkan tampilan yang sangat bagus.

Download Demo

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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<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>

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

referensi:
http://modification-blog.blogspot.com/