Membuat Gambar Membesar Saat disentuh Cursor
Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.
Cara Membuat Gambar Membesar Saat disentuh Cursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
- Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
- Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Related Posts
Anda sedang membaca artikel tentang Membuat Gambar Membesar Saat disentuh Cursor dan anda bisa menemukan artikel Membuat Gambar Membesar Saat disentuh Cursor ini dengan url http://blackyz-art.blogspot.com/2013/06/membuat-gambar-membesar-saat-disentuh.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Gambar Membesar Saat disentuh Cursor ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
Informasi yang menarik.. :)
ReplyDeleteBy sikribo :)
thanks
Deletenah, ini baru tutorial yang aseli - langsung tkp deh... salam blogger serta ditunggu kunjungan balasan
ReplyDeletesipp
DeleteCara yang lebih simple:
ReplyDelete<style type="text/css">
img.scale { -webkit-transition: all .2s ease-in-out; }
img.scale:hover { -webkit-transform: scale(1.1); }
terima kasih atas saran anda :D
Deleteijin nyimak aja gan
ReplyDeletewokeh
DeletePengen sie make yang beginian.
ReplyDeleteTapi, bikin berat loading blog ga ya?
biasa bro.. gak lemot" jga
Deletesipp keren tutorialnya sob,,kalau gambarnya mengecil gmn sob..??
ReplyDeleteditunggu folback nya sob..
jika kepengen normal itu tinggal delete kode diatas..
Deletetapi kalau mengecil saya blum tau hehe :D
siipphh...
ReplyDeleteoke"
Delete