Membuat Slick Tab Jquerry dengan scroll bar

Tab view / slick tab jquerry digunakan untuk menyembunyikan widget 1 dengan yang agar terlihat rapi dan menghemat ruangan di halaman blog.

Dibawah ini merupakan contoh dari tab jquerry cara membuatnya ikuti langkah dibawah ini :

Jika takut gagal membuatnya save template agan dulu dengan mengklik download template lengkap, agar dapat di upload sewaktu - waktu.

Membuat Slick Tab Jquerry  dengan scroll bar : 

1. Login ke blogger pilih  Rancangan > Edit Html > Expand template widget

2. Cari kode ]]></b:skin> dan tempatkan kode dibawah ini 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;
}

3. Lalu carilah kode </head> setelah ketemu letakkan kode dibawah ini tepat diatas kode </head>

<script language='javascript' src='https://sites.google.com/site/areacyberblog/areacyber/query.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>

4. Save template

5. Kemudian masuk ke Rancangan > Edit Laman > Tambah Gadget > pilih Javascript/Html lalu masukkan 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 agan di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript agan di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript agan di Tab Tiga
</div>

Selamat mencoba !!

You're reading an article about Membuat Slick Tab Jquerry dengan scroll bar and you can find this articles Membuat Slick Tab Jquerry dengan scroll bar with url http://areacyber.blogspot.com/2011/09/membuat-slick-tab-jquerry-dengan-scroll.html,you can redistribute it or copy and paste it if the article Membuat Slick Tab Jquerry dengan scroll bar very beneficial to your friends, but do not forget to put Membuat Slick Tab Jquerry dengan scroll bar a source link.