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>
3. Lalu carilah kode </head> setelah ketemu letakkan kode dibawah ini tepat diatas kode </head>#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;
}
<script language='javascript' src='https://sites.google.com/site/areacyberblog/areacyber/query.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').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>5. Kemudian masuk ke Rancangan > Edit Laman > Tambah Gadget > pilih Javascript/Html lalu masukkan kode dibawah ini
Selamat mencoba !!<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>
