Membuat Effect pada Blogger menggunakan JQuery

JQuery memiliki banyak sekali fitur yang dapat dimanfaatkan dalam membangun suatu website, selain itu juga akan mempermudah programmer dalam penggunaan Ajax, Javascript ataupun Coding Semantik, yang bisa menjadikan website lebih profesional. Fitur yang akan saya bahas kali ini, yaitu membuat efek pada website menggunakan JQuery.

Efek yang akan dibuat ini sangatlah sederhana, yaitu menampilkan gambar ketika sipengunjung melakukan klik pada tombol yang telah dibuat. biasanya digunakan oleh para programmer untuk mempercantik websitenya ataupun untuk memasang iklan, agar tidak memenuhi website kita.

Ketikklah coding program seperti ini:

<!-- Programming : Hadi Kurniawan -->
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#klik1").click(function(){
  $("p").show(500,pesan);
});
});
function pesan(){
alert("Gambar orang keren :p");
}
</script>
</head>
<body bgcolor="black">
<style type="text/css">body { 
background-image:  
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>
<center>
<h1><font color="green">------ </font><font color="white">( ? )</font>
<font color="green">------</font></h1>
<p style="display:none">
<img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p>
<button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button>
</body>
</html>

Keterangan:

<script type="text/javascript" src="jquery/jquery.js"></script>

Memanggil library jquery

$(document).ready(function(){

awal penulisan jquery

$("#klik1").click(function(){
  $("p").show(500,pesan);

memilih elemen "p" , 500 = kecepatan efek untuk menampilkan

alert("Gambar orang keren :p");

memunculkan kotak pesan saat tombol dklik

<body bgcolor="black">
<style type="text/css">body { 
background-image:  
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>
<center>
<h1><font color="green">------ </font><font color="white">( ? )</font>
<font color="green">------</font></h1>
<p style="display:none">
<img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p>
<button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button>
</body>
</html>