Cara Menciptakan Efek Zoom In Dan Out Gambar Di Blogger 2018

MamankDzgn - Hai Sobat, pada tutorial kali ini kami akan membahas ihwal cara menciptakan efek zoom in dan out gambar di Blogger. Apakah kau 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 menciptakan 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, eksklusif saja kita simak cara untuk menciptakan efek zoom in dan out gambar di blog.

1. Masuk ke sajian Blogger.

2. Pilih "Theme".

3. Kemudian piih "Edit HTML".

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

5. Kemudian copy+paste instruksi berikut sempurna 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 referensi memakai 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, lalu 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 kau akan semakin banyak ya. Semoga bermanfaat.