Tutorial Cara Membuat Efek Zoom Otomatis Pada Gambar DI Blog

Membuat Efek Zoom – Mempunyai tampilan blog yang tertata rapi dan menarik merupakan cara yang tepat untuk meningkatkan kenyamanan pengunjung di blog Anda. Semakin lama pengunjung berada di laman artikel atau home page blog Anda, maka akan menurunkan Bounce rate blog anda, dan itu bagus untuk blog Anda.

Tampilan blog yang menarik tentu tidak lepas dari pemasangan image atau gambar yang tepat. Dari segi ukuran, informatif juga tentang berat atau tidaknya kecepatan loading blog dengan adanya gambar tersebut.

Terkadang pengunjung merasa sebal dengan beberapa kali harus klik gambar terlebih dahulu untuk melihat detail informasi yang di letakkan pada sebuah gambar. Biasanya karena ukuran gambar terlalu kecil atau gambar tidak begitu jelas.

Nah, kali ini MazzTutor akan memberikan tutorial cara membuat efek zoom pada gambar di artikel. Tujuannya agar lebih memudahkan pengunjung melihat informasi yang diletakkan pada sebuah gambar. Efek zoom ini maksudnya jika Anda meletakkan kursor pada gambar tanpa mengkliknya, gambar tersebut otomatis membesar beberapa kali lipat, dan akan segera mengecil kembali jika kursor dipindahkan dari gambar tersebut.

Baca juga Tutorial Cara Membuat Kotak Script Dalam Postingan Blogger Dengan Mudah

Selain gambar lebih jelas, tentu dengan variasi seperti itu akan terlihat sebagai penghias blog Anda lebih menarik. Berikut tutorial cara membuat Auto Zoom pada gambar di blog.

Cara Mudah Membuat Effect Auto Zoom Pada Gambar Di Blog

Langkah pertama tentu Anda harus login ke Dashboard. Masuk pada menu “Tamplate/Tema” dan pilih “Edit HTML”.

Selanjutnya Anda harus cari kode ]]></b:skin>. Caranya mudah, arahkan kursor pada laman template HTML tersebut, tekan ctrl+f untuk menampilkan fitur search, masukkan kata ]]></b:skin> pada kolom search dan enter.

Sebelumnya, Copy kode di bawah ini dan letakkan tepat diatas kode ]]></b:skin> tadi.

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
};

]]></b:skin>

Lihat gambar dibawah ini tentang peletakannya.

Kemudian pratinjau dan simpan settingan tersebut. Anda bisa lihat postingan lama dan mengarahkan kursor ke sebuah gambar. Jika gambar bisa zoom berarti Anda sudah berhasil menerapkan fitur Auto zoom tersebut pada blog Anda.

Baca juga Cara Membuat Page Sitemap Otomatis Update DiBlogger

Oke mungkin itu saja yang bisa MazzTutor berikan mengenai Tutorial Cara Membuat Efek Zoom Otomatis Pada Gambar DI Blog, semoga bisa bermanfaat bagi Anda dan jangan lupa untuk share atupun meninggalkan pesan di kolom komentar. Selamat mencoba. [MT]