Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog
Monday, September 28, 2020
Edit
Sempat tidak melaksanakan update terhadap blog ini selama dua ahad alasannya sibuk dengan aktivitas di kampus jadinya kali ini saya mempunyai waktu luang untuk memperbaharuinya. Dalam tutorial kali ini saya akan mengatakan bagaimana cara menciptakan Zoom Effect atau dalam Bahasa Indonesianya ialah imbas memperbesar pada setiap gambar maupun foto yang ada di dalam postingan blog anda.
Keuntungan yang anda sanggup dengan memasang Zoom Effect ini ialah menciptakan blog anda terlihat lebih manis dan Pro. Dan kalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti perihal kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan instruksi CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni memakai CSS tanpa ada embel-embel 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 melaksanakan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu menciptakan markup embel-embel apapun didalam postingan blog alasannya 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 embel-embel dari CPU komputer maupun laptop dari pengunjung blog.
Persiapan :
Salin semua instruksi yang ada dibawah ini
Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Lakukan Back up kemudian klik Edit HTML
3) Cari instruksi ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua instruksi yang sudah anda salin tadi sempurna di atasnya
4) Klik Simpan Template
Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, imbas ini akan tetap berjalan dan tidak besar lengan berkuasa terhadap satu sama lainnya. Dan kini coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah mempunyai Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!
Keuntungan yang anda sanggup dengan memasang Zoom Effect ini ialah menciptakan blog anda terlihat lebih manis dan Pro. Dan kalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti perihal kehebatan CSS3 maka tidak ada salahnya juga kita membalut design template blogger kita dengan sentuhan instruksi CSS didalam gambar-gambar postingan blog. Semua kodenya sendiri murni memakai CSS tanpa ada embel-embel 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 melaksanakan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu menciptakan markup embel-embel apapun didalam postingan blog alasannya 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 embel-embel dari CPU komputer maupun laptop dari pengunjung blog.
Demo
Persiapan :
Salin semua instruksi yang ada dibawah ini
Klik ganda untuk menyalin
.post 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 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; } Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Lakukan Back up kemudian klik Edit HTML
3) Cari instruksi ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua instruksi yang sudah anda salin tadi sempurna di atasnya
4) Klik Simpan Template
Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, imbas ini akan tetap berjalan dan tidak besar lengan berkuasa terhadap satu sama lainnya. Dan kini coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah mempunyai Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!