Cara Menciptakan Dampak 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 goresan pena kalimat pada postingan blog, terutama blog yang mempunyai konten wacana tutorial. Dengan adanya gambar, seorang pembaca tidak perlu berkhayal cukup usang untuk membayangkan maksud dari goresan pena yang sedang mereka baca di dalam sebuah artikel blog.
Terkadang gambar yang di tampilkan masih kurang terlihat terang oleh pembaca yang disebabkan oleh banyak sekali hal ibarat pemilik blog sengaja menampilkan gambar yang ukuran aslinya besar dengan tampilan kecil. Sebenarnya dilema ini tidak terlalu serius, lantaran bila pengunjung atau pembaca blog ingin melihat gambar tersebut sesuai dengan ukuran aslinya biar terlihat jelas, pembaca tinggal klik kanan pada gambar tersebut dan menentukan open image in new tab.
Namun ada cara lain yang akan saya bagikan yang lebih efektif, yakni dengan memperlihatkan imbas zoom pada seluruh gambar pada postingan blog. Keuntungan yang anda sanggup dengan memasang Zoom Effect ini ialah menciptakan blog anda terlihat lebih unik dan Profesional. Dan bila merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti wacana kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan arahan CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni memakai CSS tanpa ada pemanis JavaScript atau jQuery, sehingga tidak akan terlalu besar lengan berkuasa terhadap Page Loading pada blog anda.
Efek memperbesar gambar ini akan muncul atau bekerja ketika cursor dari pengunjung menyentuh atau melaksanakan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu menciptakan markup pemanis apapun didalam postingan blog lantaran Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja ketika pengunjung blog melaksanakan hover pada gambar anda tersebut, imbas ini akan mengambil sedikit akselerasi pemanis dari CPU komputer maupun laptop dari pengunjung blog.
Berikut teladan gambar yang sudah diberikan imbas zoom, soba dekatkan cursor anda ke gambar.
Memberikan Efek Zoom Pada Seluruh Gambar Dalam Postingan Blog
1. Login ke akun blogger anda.
2. Pilih hidangan Template >> Edit HTML.
3. Temukan kode ]]></b:skin>, Gunakan Ctrl+F untuk mempermudah pencarian.
4. Jika sudah ketemu, letakkan arahan di bawah ini sempurna 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 : bila pada template anda sudah ada kode .post img:hover alangkah baiknya bila anda hapus terlebih dahulu arahan tersebut sebelum anda menaruh arahan diatas.
5. Klik Simpan Tema atau Save Template.
Setelah anda berhasil meletakkan arahan CSS diatas dengan benar, maka secara otomatis semua gambar yang terdapat dalam postingan blog sekarang telah mempunyai imbas zoom.
Baca juga : Membuat Gambar Berjalan di Blog
Baca juga : Membuat Gambar Berjalan di Blog
Membuat atau memperlihatkan imbas zoom pada seluruh gambar postingan blog, maka akan menciptakan tampilan halaman artikel atau postingan blog anda menjadi terlihat atau terasa unik untuk dinikmati oleh mata. Selain itu juga akan mengakibatkan blog tampil lebih profesional di mata para pengunjung atau pembaca.
Demikian tutorial sederhana mengenai bagaimana cara memperlihatkan imbas zoom pada seluruh gambar postingan blog. Semoga bermanfaat and " Happy Blogging "