Cara Membuat Efek Zoom pada Gambar Postingan Blog

Cara Membuat Efek Zoom pada Seluruh Gambar Postingan Blog | Tutorial Blogger - Menyertakan sebuah gambar di dalam postingan merupakan cara yang cukup bermanfaat untuk menjelaskan maksud dari tulisan kalimat pada postingan blog, terutama blog yang memiliki konten tentang tutorial. Dengan adanya gambar, seorang pembaca tidak perlu berkhayal cukup lama untuk membayangkan maksud dari tulisan yang sedang mereka baca di dalam sebuah artikel blog.

Terkadang gambar yang di tampilkan masih kurang terlihat jelas oleh pembaca yang disebabkan oleh berbagai hal seperti pemilik blog sengaja menampilkan gambar yang ukuran aslinya besar dengan tampilan kecil. Sebenarnya masalah ini tidak terlalu serius, karena jika pengunjung atau pembaca blog ingin melihat gambar tersebut sesuai dengan ukuran aslinya supaya terlihat jelas, pembaca tinggal klik kanan pada gambar tersebut dan memilih open image in new tab.

Namun ada cara lain yang akan saya bagikan yang lebih efektif, yakni dengan memberikan efek zoom pada seluruh gambar pada postingan blog. Keuntungan yang anda dapat dengan memasang Zoom Effect ini adalah membuat blog anda terlihat lebih unik dan Profesional. Dan jika merujuk pada trends saat ini khususnya di dunia web design yang terus membicarakan dan meneliti tentang kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan kode CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni menggunakan CSS tanpa ada tambahan JavaScript atau jQuery, sehingga tidak akan terlalu berpengaruh terhadap Page Loading pada blog anda.

Efek memperbesar gambar ini akan muncul atau bekerja ketika cursor dari pengunjung menyentuh atau melakukan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog karena Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja ketika pengunjung blog melakukan hover pada gambar anda tersebut, efek ini akan mengambil sedikit akselerasi tambahan dari CPU komputer maupun laptop dari pengunjung blog.

Berikut contoh gambar yang sudah diberikan efek zoom, soba dekatkan cursor anda ke gambar.

Memberikan Efek Zoom Pada Seluruh Gambar Dalam Postingan Blog

1. Login ke akun blogger anda.

2. Pilih menu Template >> Edit HTML.

3. Temukan kode ]]></b:skin>, Gunakan Ctrl+F untuk mempermudah pencarian.

4. Jika sudah ketemu, letakkan kode di bawah ini tepat diatas 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); }

Catatan : jika pada template anda sudah ada kode  .post img:hover alangkah baiknya jika anda hapus terlebih dahulu kode tersebut sebelum anda menaruh kode diatas.

5. Klik Simpan Tema atau Save Template.

Setelah anda berhasil meletakkan kode CSS diatas dengan benar, maka secara otomatis semua gambar yang terdapat dalam postingan blog kini telah memiliki efek zoom.

Baca juga : Membuat Gambar Berjalan di Blog

Membuat atau memberikan efek zoom pada seluruh gambar postingan blog, maka akan membuat tampilan halaman artikel atau postingan blog anda menjadi terlihat atau terasa unik untuk dinikmati oleh mata. Selain itu juga akan menjadikan blog tampil lebih profesional di mata para pengunjung atau pembaca.
Demikian tutorial sederhana mengenai bagaimana cara memberikan efek zoom pada seluruh gambar postingan blog. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG