<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>atau versi terbaru. Setelah memiliki script inti, kita bisa berkreasi dengan kode² plugins. Kode plug-ins untuk basis blogspot biasanya diletakkan dibawah persis dengan script inti atau diatas/sebelum tag </body> (selama pengalaman saya) :D Satu contoh efek gambar dari plugins yg diterapkan di Prodigy of Head
Examples jQuery Toggle with jQuery Script
<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#display").click(function () {
$("#hidden").slideToggle("500");
});
});
</script>
<style type='text/css'> /*** <b:skin> ***/
#hidden{display:none}
</style> /*** </b:skin> ***/
</head>
<body>
<a href="/" id='display'>Klik Here</a>
<div id='hidden'>Tulisan ini, tidak akan terlihat sebelum diklik!!!</div>
</body>
</html>
Keterangan:<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#display").click(function () {
$("#hidden").slideToggle("500");
});
});
</script>
<style type='text/css'> /*** <b:skin> ***/
#hidden{display:none}
</style> /*** </b:skin> ***/
</head>
<body>
<a href="/" id='display'>Klik Here</a>
<div id='hidden'>Tulisan ini, tidak akan terlihat sebelum diklik!!!</div>
</body>
</html>
- Script tulisan berwarna biru. Script inti dari jQuery.
- Script tulisan berwarna kuning tua. Script plug-ins dari script inti.
- Script tulisan berwarna merah tua. Kode CSS dari jQuery plugins jika memang menggunakan CSS.
- Script tulisan berwarna hijau muda. Penulisan dalam bentuk HTML, yg biasa penempatannya didalam tag <body> ataupun Add a Gadget ► HTML/Javascript
Tidak ada komentar:
Posting Komentar