Goyangan Mesra Ketika Kena Sentuhan

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.

Junianto Bara at 2 Desember 2011 19.17

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

Mr.Mung at 2 Desember 2011 21.02

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

rupakampung at 6 Desember 2011 16.48

mantep, ayo goyang maning...

Sutarso oce at 7 Desember 2011 04.27

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

Mr.Mung at 7 Desember 2011 05.23

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

link tujuan gambar tu apa ya?

jus manggis at 4 Januari 2012 16.14

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

infonya sangat ok nih kg...

yang di goyang di goyang yang...tarik jabrig...hehehe

semoga infonya bisa bermanfaat buat banyak orang gan.

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

.:: Iklan ::.

Koleksi Tutorial Blog

Pengertian Blog dan Cara Membuat Blog Terbaru

Cara Melakukan Posting Artikel

Cara Membuat Readmore di blog dengan Mudah

Cara Mendapat Hosting Gambar Gratis

Cara Menghilangkan Tulisan Subscribe To Post (Atom)

Cara Setting Blog Yang Baru di Buat

Cara memasang Jam Animasi di Blog

Cara memasang banner affiliate di blog

Cara menampilkan dokumen office (word, excell, power point) di blog

Changing the Read More in blogger - New Feature

Creating 'After the jump' summaries

Encode dan Decode

Gadget Posting Terpopuler dengan Thumbnile dan Statistik Blog

How to create a blog with Blogger - Video YouTobe

Membuat Banner atau Gambar Berjalan

Membuat Navigasi Halaman / Page Navigation Blogger

Membuat Site Map, Daftar Isi Otomatis Versi 2

Membuat Slide Gambar di Blog Dengan JQuery

Membuat Teks Berkedip Seperti Gadis Cantik yang Centil

Membuat Tombol Share Facebook Dengan Counter

Membuat Tombol Show Hide Gambar - Text di Blog (spoiler)

Menciptakan blog yang keren dan elegant

Mengganti Avatar Komentator dengan Avatar MyblogLog

Mengganti Template Blogger Standard

Navbar Blogger, Amankan Blog dari DELETE

Perancangan Template Blog Baru

Posting Gambar di Blog

Script Buku Tamu Model Show Hide

Script Membuat Buku Tamu Cepat dan Praktis

Script Membuat Random Posting di Blogspot

Script Membuat Slide Photo Panorama

Tips dan Trik Blog: Agar Title Blog Kita SEO Friendly

Tips dan Trik: Menghapus Link Subsribe Post

Video Tutorial Membuat Blog di Blogspot 1

Video Tutorial Membuat Email di Ymail

Website Penyedia Layanan Shout Box

Posting Blog Terbaru Otomatis Update di Status Facebook

Gambar bergoyang ketika di sentuh

Membuat Page(Laman Terpisah) di Blogger.com

Cara Membuka Website Yang Benar (Untuk Pemula)

Cara Mudah Custom Domain di Blogspot

Cara Custom Domain blogspot dengan Domain web.id

Cara Membuat Scroll Widget Blog

Cara Edit Menu dan Sub Menu Melalui EDIT HTML Template

Cara Mengedit Gambar Slide
Cara Setting Sub Domain dan Redirect Domain
Cara Menyimpan Javascript di Google Drive

Arsip Blog