Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog
Sempat tidak melakukan update terhadap blog ini selama dua minggu alasannya yakni sibuk dengan acara di kampus kesudahannya kali ini saya memiliki waktu luang untuk memperbaharuinya. Dalam tutorial kali ini saya akan menyampaikan bagaimana cara membuat Zoom Effect atau dalam Bahasa Indonesianya ialah efek memperbesar pada setiap gambar maupun foto yang ada di dalam postingan blog anda.
Keuntungan yang anda mampu dengan memasang Zoom Effect ini ialah membuat blog anda terlihat lebih elok dan Pro. Dan jikalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti ihwal 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 saat cursor dari pengunjung melakukan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog alasannya yakni Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja saat pengunjung blog melakukan hover pada gambar anda tersebut, efek ini akan mengambil sedikit akselerasi tambahan dari CPU komputer maupun laptop dari pengunjung blog.
Persiapan :
Salin semua kode 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 kode ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua kode yang sudah anda salin tadi tepat di atasnya
4) Klik Simpan Template
Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, efek ini akan tetap berjalan dan tidak berpengaruh terhadap satu sama lainnya. Dan sekarang coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah memiliki Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!
Sumber https://8tutorialandroid.blogspot.com/
Keuntungan yang anda mampu dengan memasang Zoom Effect ini ialah membuat blog anda terlihat lebih elok dan Pro. Dan jikalau merujuk pada trends dikala ini khususnya di dunia web design yang terus membicarakan dan meneliti ihwal 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 saat cursor dari pengunjung melakukan hover terhadap gambar-gambar di blog anda. Dan yang lebih penting lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog alasannya yakni Zoom Effect ini akan bekerja secara otomatis terhadap semua gambar dan foto yang ada dipostingan blog hanya saja saat pengunjung blog melakukan hover pada gambar anda tersebut, efek ini akan mengambil sedikit akselerasi tambahan dari CPU komputer maupun laptop dari pengunjung blog.
Demo
Persiapan :
Salin semua kode 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 kode ]]></b:skin> (gunakan Ctrl + F) kemudian paste semua kode yang sudah anda salin tadi tepat di atasnya
4) Klik Simpan Template
Jika dikala ini anda mengaktifkan fitur lightbox resmi dari Blogger, efek ini akan tetap berjalan dan tidak berpengaruh terhadap satu sama lainnya. Dan sekarang coba anda lihat konten dari gambar dan foto yang ada di postingan blog anda sudah memiliki Zoom Effect dan membuatnya terlihat lebih menawan. Enjoy & Happy Coding!
0 Response to "Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog"
Post a Comment