Cara Membuat Efek Zoom atau Membesar Pada Gambar Blog

          Semangat pagi sob, selamat hari senin :)

          Postingan kali ini belajarcorner akan share bagaimana cara membuat efek zoom atau membesar pada blog. Biasanya cara ini digunakan untuk toko online supaya gambar dagangannya dapat terlihat lebih jelas yang akan memudahkan pengunjung untuk melihatnya, namun bagi sobat semua yang ingin postingannya juga bisa diberikan efek zoom atau membesar pada gambar blog. Berikut adalah cara membuat efek zoom atau membesar pada gambar blog.

1. Log In ke Blogger
2. Setelah masuk kemudian pilih Template
3. Pilih Edit HTML
4. Cari kode ]]></b:skin> (Gunakan CTRL+ F supaya lebih cepat
5. Copy kode dibawah ini, kemudian paste diatas kode ]]></b:skin>
   
   .post img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

      6. Pilih Simpan Template, silahkan sobat cek sendiri hasilnya.



NOTE :

• Kode diatas sudah valid CSS3
• Kode -webkit-,-moz-, dan -o- bisa menyebabkan warning saat validasi CSS3, namun masih tetap valid CSS3

Semoga bermanfaat sob