Membuat gambar meledak

سْمِ اللهِ الرَّحْمنِ الرَّحِيمِ
Assalamualaikum Wr. Wb . . .

Hai Sobat kali ini saya mau share tentang Jquery Nih,  kali ini tentang efek ledakan yang dahsyat pada sebuah foto atau image hehehe seperti apa efeknya Cek it Dot DEMO

Kurang lebih seperti itu efeknya gan Gimana Apa ada yang tertarik ..........??
Ok Langsung Aja ke Tutornya :

1. Masuk di blog
2. klik rancangan
3. klik tambah gadget
4. klik html/javascript
5. masukan kode di bawah ini di dalamnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#hide").click(function(){
$(".meledak").hide("explode", {pieces:36}, 2000);});
$("#show").click(function(){
$(".meledak").show("bounce", {direction:"up", times:4}, 200);});
});
</script>
<style>
.meledak{
    margin-left:150px;
}
.meledak img{
    background:#333;
    border:5px solid #222;box-shadow:0 0 5px 2px #00f;
}
#show{
    text-align:center;
}
</style>
<button id="show">Kembalikan gambarnya!!!</button>
<div class="meledak">
<div id="hide">
<img src="http://infogres.com/wp-content/uploads/2011/10/ayu_ting_ting.jpg"/></div>
</div>

Perhatikan kode berwarna biru dengan merah

biru : itu adalah kode gambar saat di klik jika anda ingin gambarnya meledak tanpa di klik
( hanya di sorot cursor meledak ) ganti .click menjadi .hover DEMO
merah : itu adalah url gambar silahkan ganti dengan url gambar anda sendiri setelah itu klik SIMPAN, dan lihat hasilnya.

semoga bermanfaat