Cara Membuat Tab View dari Jquery dengan Efek Animasi Gulung layar

Tab view adalah kotak atau box yang memungkinkan pengguna blogger untuk  menghemat spasi sidebar dan salah satu trik agar tampilan blog kelihatan rapi, cantik dan profesional. Untuk tab view ini saya memberikan triknya menggunakan JQuery. Untuk pengertian JQuery saya sudah bahas pada artikel
sebelumnya. Nah, kenapa kita menggunakan jQuery, yang jelas untuk loading loadnya jelas lebih baik. Untuk contoh tab view anda bisa lihat sidebar kanan atas, atau lihat gambar berikut :

Contoh Tab view

Baik, langsung saja. Silahkan ikuti langkah-langkah dibawah ini :

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin>,setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

#slick_area {
border:0px solid #585858;
background-color:#ffffff;
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:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;
}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

6. Setelah itu,carilah kode </head> setelah ketemu letakkan kode javascript dan jQuery berikut tepat diatasnya :

<script language='javascript' src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

7. Simpan tempalate, dan masih lanjut neh sob... masuk ke Tata Letak/Rancangan, klik Add New Widget / Tambah Widget, lalu pilih HTML/Javascript. Kemudian letakan kode dibawah ini :

<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu</li>
<li title="tabdua" class="slick active">Tab Dua</li>
<li title="tabtiga" class="slick">Tab Tiga</li>
</ul>
<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript untuk Tab Satu</div>
<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript untuk Tab Dua</div>
<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript untuk Tab Tiga</div>

Keterangan :
Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan.

8. Setelah selesai silahkan SIMPAN, dan lihat hasilnya.. Selamat Mencoba.

Artikel Terkait