Goyangan Mesra Saat Kena Sentuhan
Baca judul posting ini jangan sambil membayangkan yang tidak-tidak ya...? hehe...
Pada posting tutorial blog kali ini aku hanya akan menyebarkan tutorial pembuatan pengaruh goyangan pada gambar saat kena sentuhan mouse, dan akan ada pengaruh zoom saat 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 isyarat ]]></b:skin> (tips pencarian cepat, silahkan anda tekan CTRL+F untuk memunculkan jendela Find (pencarian) pada browser anda, dan eksklusif anda tuliskan atau copy isyarat ]]></b:skin> didalam kotak Find), sehabis ketemu, silahkan anda copy isyarat berikut sempurna diatasnya:
4. Simpan,
5. Kembali ke Rancangan lalu tambahkan gadget HTML/JavaScript dan silahkan anda copy code berikut:
Silahkan anda ganti sesuai kebutuhan:
link tujuan silahkan anda isi dengan link tujuan saat gambar di klik.
link gambar silahkan anda isi dengan link lokasi penyimpanan gambar, cara mendapat hosting gratis penyimpanan gambar dapat 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 saat gambar yang anda tampilkan disentuh mouse, maka akan ada goyangan mesra pada gambar dan apabila gambar diklik maka akan ada pengaruh zoom pada gambar tersebut.
teladan dapat anda lihat dibawah ini:
Selamat mencoba, supaya berhasil.
Pada posting tutorial blog kali ini aku hanya akan menyebarkan tutorial pembuatan pengaruh goyangan pada gambar saat kena sentuhan mouse, dan akan ada pengaruh zoom saat 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 isyarat ]]></b:skin> (tips pencarian cepat, silahkan anda tekan CTRL+F untuk memunculkan jendela Find (pencarian) pada browser anda, dan eksklusif anda tuliskan atau copy isyarat ]]></b:skin> didalam kotak Find), sehabis ketemu, silahkan anda copy isyarat berikut sempurna diatasnya:
.goyangan:hover { /* kalau gambar disentuh */Catatan: untuk merubah besarnya pengaruh goyangan tinggal anda ganti angka pada rotate, dan merubah scale jika anda ingin mengganti besarnya zoom saat gambar di klik, semakin besar angka yang anda masukan, semakin mantap juga goyanganya. hehe....
-webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}
.goyangan:focus { /* kalau 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;
}
4. Simpan,
5. Kembali ke Rancangan lalu tambahkan gadget HTML/JavaScript dan silahkan anda copy code berikut:
<a class="goyangan" href="link tujuan"><img src="link gambar" title="Goyangan Mesra Ketika Kena Sentuhan" width="97" height="75" border="0"/></a>
Silahkan anda ganti sesuai kebutuhan:
link tujuan silahkan anda isi dengan link tujuan saat gambar di klik.
link gambar silahkan anda isi dengan link lokasi penyimpanan gambar, cara mendapat hosting gratis penyimpanan gambar dapat 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 saat gambar yang anda tampilkan disentuh mouse, maka akan ada goyangan mesra pada gambar dan apabila gambar diklik maka akan ada pengaruh zoom pada gambar tersebut.
teladan dapat anda lihat dibawah ini:
Selamat mencoba, supaya berhasil.
Belum ada Komentar untuk "Goyangan Mesra Saat Kena Sentuhan"
Posting Komentar