Cara Membuat Tab View Via Jquery
Berbeda dengan tab view yang pernah kita ketahui sebelumnya, Tab View ini menggunakan efek Jquery dan menggulung pada saat kita mengkliknya. Membuat Tab View ini susah-susah gampang, tergantung bagaimana keuletan dan ketelitian dalam pengerjaanya, karena menurut saya memasang jquery ini sangatlah gampang.
Tetapi jangan khawatir Koisine Blog akan semaksimal mungkin membuat tutorial yang baik dan benar agar bisa dipraktekan kalian semua dan bekrja tanpa eror.
Bagaimana cara membuatnya ?
Ikutilah langkah-langkah berikut ini dengan teliti !!
- Tidak lupa untuk masuk ke Blogger kalian,
- Pada dasbor blog, Pilih "Rancangan",
- Silahkan sobat pilih "Edit HTML",
- Gunakan ctrl F untuk mencari ]]></b:skin>
- Apabila sobat sudah menemukan kode tersebut, selanjutnya letakan kode di bawah ini sebelum kode di atas.
#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;
}
- Langkah selanjutnya.
- Silahkan cari kode </body>
- Kemudian letakan kode di bawah ini sebelum kode di atas.
<script language='javascript' src='http://cayunkatel.googlecode.com/files/jquery-1.3.2.min.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>
- Simpan Template.
Tunggu dulu masih ada lanjutannya.
Sekarang langkah untuk memasang Tab View Jquerynya.
- Pilih "Rancanganz",
- Kemudian "Tata Letak",
- Pilih 'Tambah Gadget" dan cari "Javascript/HTML",
- setelah itu copy dan paste script di bawah ini pada blog kalian,
<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 di Tab Satu
</div>
<div id="tabdua" class="content-slick">
kode HTML/Javascript di Tab Dua
</div>
<div id="tabtiga" class="content-slick">
kode HTML/Javascript di Tab Tiga
</div>
- Note : Masukan kode HTML/Javascript pada letak yang sudah tersedia.
- Atau lihat Contoh berikut.
Contohnya !
<ul class="slick">
<li title="tabsatu" class="slick active">Buku Tamu 1 </li>
<li title="tabdua" class="slick active">Buku Tamu 2 </li>
<li title="tabtiga" class="slick">Buku Tamu 3 </li>
</ul>
<div id="tabsatu" class="content-slick">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="koisine" src="http://www5.shoutmix.com/?koisine" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?koisine">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
<div id="tabdua" class="content-slick">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="koisine" src="http://www5.shoutmix.com/?koisine" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?koisine">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
<div id="tabtiga" class="content-slick">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="koisine" src="http://www5.shoutmix.com/?koisine" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?koisine">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
- Sesuaikan dengan blog anda.
Sekian tutorial dari saya semoga artikel ini bisa bermanfaat bagi kalian semua terutama untuk blogger pemula.
Terima Kasih.
Sumber : Koisine Blog
Categories:
jQuery,
panduan blogger
0 komentar:
Posting Komentar