Cara memberi efek zome di setiap gambar pada blog

Cara memberi efek zome di setiap gambar pada blog - Dalam sebuah artikel kita banyak membahas tentang tutorial blog, tips, trik, dan lain-lain, dan biasanya di dalam artikel kita memberi penjelasan dengan lengkap dan jelas agar si pengunjung blog bisa dengan mudah memahami artikel yang kita bagikan, akan tetapi agar lebih jelas lagi biasanya kita menambahkan gambar screenshot di dalam artikel kita. Namun mungkin saja sobat Blogger lain kadang-kadang mendapat kendala dari gambar yang disertakan dalam posting. Seperti gambar dalam posting terlihat kurang jelas karena disebabkan oleh berbagai hal. 

Sebenarnya kendala ini tidak terlalu serius karena jika kita memberikan link pada gambar yang mengarah pada URL gambar itu sendiri, maka pengunjung dapat melakukan klik pada gambar dan melihat gambar tersebut dalam ukuran original yang tentunya akan terlihat jelas.

Tapi ada cara lain yang akan saya bagikan yang mungkin saja sobat akan menyukainya. Kita bisa Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting. Selain dapat mempercantik tampilan Blog, pengunjung juga tidak perlu melakukan klik pada gambar jika ingin melihat gambar dengan jelas karena gambar akan membesar ketika disentuh kursor. Berikut contohnya, silakan sentuhkan kursor pada gambar di bawah ini.

Contoh efek zome pada gambar

UNTUK DEMO | SENTUHKAN KURSOR PADA GAMBAR DI ATAS

Untuk Memberikan Efek Zoom Pada Seluruh Gambar Dalam Posting Blog seperti itu sendiri caranya sangat mudah sekali. Lakukanlah langkah-langkah berikut.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template >> Edit HTML.
3. Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,dan letakan kode berikut di atas kode ]]></b:skin>

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

4. Jika sudah, klik Simpan Template.