Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

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.

10 komentar

  1. waaah makin kereeen aja nih blog kang mung.. tar kalo ada waktu luang saya praktekin deh,, makasih kang tutorialnya .

    BalasHapus
  2. @junianto Bara: nggih sami-sami.... :)

    BalasHapus
  3. lg ra semangat ngeblog...anu no 33 si hehehe.........

    BalasHapus
  4. @rupakampung: goyang mang....
    @sutarso: hehe.... kasuss.... ayoo semangat!

    BalasHapus
  5. wah memang blog kg mung ini banyak ilmu yang bisa di ambil nih. terima kasih kg mung.

    BalasHapus
  6. yang di goyang di goyang yang...tarik jabrig...hehehe

    BalasHapus
  7. semoga infonya bisa bermanfaat buat banyak orang gan.

    BalasHapus

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog