Cara Membuat Efek Zoom In dan Out Gambar di Blogger 2018

Madamvia - Hai Sobat, pada tutorial kali ini kami akan membahas tentang cara membuat efek zoom in dan out gambar di Blogger. Apakah kamu pernah melihat efek zoom gambar pada beberapa situs toko online? Tentunya efek zoom gambar ini sangat membantu para pembeli melihat detail produk ya. Mau tahu cara membuat efek zoom gambar di Blog? Yuk simak sama-sama.

Baca juga:

Cara Membuat dan Memasang Live Chat di Blog Terbaru 2018

Cara Menghilangkan Sidebar Blog di Halaman Tertentu

Cara Memperbaiki Postingan Yang Hilang di Homepage Blogger

Tutorial Membuat Efek Zoom In dan Out Gambar di Blog

Tutorial Membuat efek Zoom In dan Out Gambar di Blog

Baiklah, langsung saja kita simak cara untuk membuat efek zoom in dan out gambar di blog. 

1. Masuk ke menu Blogger.

2. Pilih "Theme".

3. Kemudian piih "Edit HTML".

4. Gunakan ctrl+f untuk mencari kode "]]></b:skin>"

5. Kemudian copy+paste kode berikut tepat di atas 

.zoomeffect 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 10px 5px 0;}
.zoomeffect img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity: 1;
}

6. Selanjutnya, silahkan coba buat postingan gambar yang akan dijadikan contoh menggunakan efek zoom in dan out.
7. Upload gambar yang akan dijadikan efek zoom in dan out.
8. Contohnya berikut ini:

Cara Membuat Efek Zoom In dan Out Gambar di Blog

9. Klik "HTML" pada postingan blog, kemudian ubah <div class="seperator" menjadi <div class="zoomeffect"
10. Kini lihat perubahan yang tejadi. Setiap kali mouse berada di atas gambar, maka gambar akan menjadi zoom in dan zoom out.
Demikianlah tutorial untuk membuat efek zoom in dan zoom out gambar di Blogger terbaru. Semoga dengan adanya efek zoom in dan zoom out ini para pengunjung blog kamu akan semakin banyak ya. Semoga bermanfaat.

Share to:

Google+ Facebook Twitter