Membuat Efek Gambar Membesar Saat Disentuh Kursor

Posted by Andi Aryatno Saturday, March 22, 2014 , ,

Membuat efek gambar
Sudah banyak blogger yang menggunakan Efek Gambar Membesar Saat Disentuh Kursor di dalam blognya. Anda juga pasti sudah pernah melihat blog yang memiliki efek seperti ini. Memang cukup menarik bila kita menerapkan efek ini pada blog kita. Dalam bahasa jawa kuno biasanya disebut dengan nama Image Zoom Effects atau jika diartikan kedalam bahasa inggris artinya Efek Gambar Membesar.

Nah, pada artikel lain saya juga sudah menuliskan mengenai Membuat Link Membesar Saat Disentuh Kursor, Membuat Link Berwarna-warni, dan Membuat Link Berkedip Saat Disentuh Mouse. Jika Anda tertarik silakan gunakan efek-efek tersebut untuk
mempercantik blog Anda.

Berikut cara membuat efek gambar membesar saat disentuh kursor :
1. Masuk akun blogger Anda
2. Pilih Template, dan klik Edit Template.
3. Cari kode ]]></b:skin> dengan cara klik ctrl+shift+f atau silakan lihat Cara Edit Template Blog Pada Tampilan Baru Blogspot.
4. Letakkan kode berikut tepat diatas 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); }

5. Setelah selesai klik Preview untuk melihat hasilnya, ini bukan hanya untuk melihat hasil dari editan Anda, tapi juga dengan mengklik preview Anda bisa mengantisipasi bila terjadi kesalahan/kekurangan dalam memasukkan kode kedalam template. Jadi setelah mengetahui ada kesalahan Anda tinggal membatalkan editan. Jika Anda langsung mengklik Save dikhawatirkan kalau ada kesalahan/kekurangan dalam memasukkan kode Anda akan tahu setelah membuka blog Anda yang rusak. Setelah di preview muncul tampilan blog Anda, silakan klik Save.

Itulah tutorial untuk mempercantik blog tentang Cara Membuat Efek Gambar Membesar Ketika Disentuh Kursor. Semoga membantu dan benar-benar bisa membuat blog Anda menjadi semakin cantik dan semakin disenangi oleh pengunjung.

Silakan tinggalkan komentar kalau ada yang belum jelas atau yang mau ditanyakan. Follow juga @andiaryatno bila ingin mengobrol dengan saya di twitter.

Share on :


Artikel Terkait:

1 Responses to Membuat Efek Gambar Membesar Saat Disentuh Kursor

  1. Obat Diare Says:
  2. terimakasih banyak bos, tapi ini bacanya harus di block dulu soalnya tulisannya nyatu sama background jadi gak keliatan..

     

Post a Comment

Powered by Blogger.

Followers