Ada yang pernah dengar shake ? Shake paling sering didengar saat kita membuat minuman yang dikocok seperti membuat Pop ice ( maybe ).
Kali ini kita akan belajar membuat efek gambar yang di shake, jadi gambar itu akan bergerak seperti saat membuat Pop ice. ayo kita pergi......
Follow this tutorial :
- 1. Masuk ke Blogger.com
- 2. Login di blogger
- 3. Rancangan > Edit HTML
- Di firefox tekan CTRL+F lalu cari " ]]></b:skin> ". Lalu ganti dengan kode ini :
.shakeimage{ position:relative }
]]></b:skin> - cari " </head> ". Lalu ganti dengan kode ini :
<script language="JavaScript1.2">
//<![CDATA[
//configure shake degree (where larger # equals greater shake) var rector=3
///////DONE EDITTING/////////// var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector+"px" } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector+"px" } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector+"px" } else{ shake.style.left=parseInt(shake.style.left)-rector+"px" } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 }
//]]>
</script>
</head> - 4. Simpan TEMPALTE
- 5. Menampilkan Gambar
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1dt480dd2mn4nXniOeVi8EMKVmo_VGX3e-oC-F0ZeoUQbCu3GcILvHylbIOn71L-EWlcQaAc_mFIhX4E3sBwWCAnS5j-Upn_lnbcfNgbkhc9KgW8z_2axvRJVi2Ca9dDsyrRKIKzU8BQ/s1600/Image3.gif%3C/font>" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>
Keterangan :
- Ganti kode warna merah dengan url gambar kamu
- Kode warna hijau adalah cara untuk membuat gambar memiliki efek shake