Header Ads

Cara Membuat Efek Zoom pada Gambar di Blog

Cara Membuat Efek Zoom Otomatis pada Gambar di Blog
Membuat Efek Zoom pada Gambar di Blog atau memberikan efek Auto Zooming Dalam Gambar Blog biasanya dilakukan pemilik blog untuk memepermudah pengunjung blog ketika melihat gambar yang ada dipostingannya dan tentunya lebih menarik.

Pada tahun 2013 lalu cara ini sangat berguna untuk blog yang masih menggunkan tempalate non Responsive, karena ketika blog di akses dari perangkat dengan dimensi kecil gambar blog akan mudah dilihat dengan cara di sorot kursor.

tidak hanya membuat gambar menjadi Besar (Zoom Out) ketika disorot mouse tapi bisa juga membuat gambar Mengecil (Zoom In) ketika disorot Mouse.

Untuk caranya silahkan ikuti langkah-langkah di bawah ini :




Cara Membuat Efek Zoom pada Gambar di Blog

Pertama silahkan anda Copy kode CSS di bawah ini terlebih dahulu.

/* CSS image zoom effect by http://www.tutorialblog.xyz */
.post img { -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease }
.post img:hover {
width: 93%;
height: 93%;
}
/*CSS image zoom effect http://www.tutorialblog.xyz */ 

Kemudian Masuk ke dashboard blog anda, lalu pilih menu Template (Tema) dan klik tmbol Edit HTML, selanjutnya cari kode ]]></b:skin> setelah ketemu pastekan kode css yang anda copy tadi diatas kode ]]></b:skin> terus simpan template.

Lihat Juga: Cara Memasang Slider Otomatis Artikel Terbaru di Sidebar Blog


Cara Membuat Efek Zoom pada Gambar di Blog

untuk membuat efek zoom out caranya tidak jauh beda dengan cara membuat efek zoom ini, silahkan anda Copy kode CSS di bawah ini terlebih dahulu.

<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style> 

kemudian Masuk ke dashboard blog anda, lalu pilih menu Template (Tema) dan klik tmbol Edit HTML, selanjutnya cari kode </head> setelah ketemu pastekan kode css yang anda copy tadi diatas kode </head> terus simpan template. 

Untuk mengetahui berhasil atau tidaknya, silahkan buka blog anda lalu sorot gambar dengan Mouse. Jika mengecil berarti berhasil.

Catatan: Anda bisa merubah nilai pembesaran atau pengecilan gambar ketika di sorot mouse, caranya silahkan anda ganti angka 1s untuk Css zoom In dan 1.2s untuk Css Zoom out Sesuaikan ukuran dengan kebutuhan blog anda.

No comments

Powered by Blogger.