Goyangan Mesra Ketika Kena Sentuhan

2 Des 2011 - - 10

Baca judul posting ini jangan sambil membayangkan yang tidak-tidak ya...? hehe...
Pada posting tutorial blog kali ini saya hanya akan berbagi tutorial pembuatan efek goyangan pada gambar ketika kena sentuhan mouse, dan akan ada efek zoom ketika ada klik pada gambar.
Langsung saja, silahkan anda coba dan praktikan tutorial berikut pada blog kesayangan anda:

1. Login kehalaman admin blog anda

2. Klik Rancangan dan klik Edit HTML

3. Cari kode ]]></b:skin> (tips pencarian cepat, silahkan anda tekan CTRL+F untuk memunculkan jendela Find (pencarian) pada browser anda, dan langsung anda tuliskan atau copy kode ]]></b:skin> didalam kotak Find), setelah ketemu, silahkan anda copy kode berikut tepat diatasnya:

.goyangan:hover {         /* jika gambar disentuh  */
-webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}
.goyangan:focus {  /* jika gambar diklik  */
outline: none;
-webkit-transform: rotate(-3deg) scale(1.5); -moz-transform: rotate(-3deg) scale(1.5);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}

Catatan: untuk merubah besarnya efek goyangan tinggal anda ganti angka pada  rotate, dan merubah scale  jika anda ingin mengganti besarnya zoom ketika gambar di klik, semakin besar angka yang anda masukan, semakin mantap juga goyanganya. hehe....

4. Simpan,
5. Kembali ke Rancangan kemudian tambahkan gadget HTML/JavaScript dan silahkan anda copy code berikut:

<a class="goyangan" href="link tujuan"><img src="link gambar" title="Judul Artikel" width="97" height="75" border="0"/></a>

Silahkan anda ganti sesuai kebutuhan:
link tujuan silahkan anda isi dengan link tujuan ketika gambar di klik.
link gambar silahkan anda isi dengan link lokasi penyimpanan gambar, cara mendapatkan hosting gratis penyimpanan gambar bisa anda baca tutorial disini.
width="97" height="75" silahkan anda ganti sesuai kebutuhan width (lebar gambar dalam pixel) height (tinggi gambar dalam pixel).

Apabila berhasil, maka ketika gambar yang anda tampilkan disentuh mouse, maka akan ada goyangan mesra pada gambar dan apabila gambar diklik maka akan ada efek zoom pada gambar tersebut.
contoh bisa anda lihat dibawah ini:



Selamat mencoba, semoga berhasil.