Keuntungan yang anda dapat dengan memasang Zoom Effect ini adalah membuat blog anda terlihat lebih cantik dan Pro. Semua kodenya sendiri murni menggunakan CSS tanpa ada tambahan JavaScript atau jQuery, sehingga tidak akan terlalu berpengaruh terhadap Page Loading blog anda.
Efek memperbesar gambar ini akan muncul atau bekerja ketika 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 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.
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 lalu klik Template
2) Lakukan Back up lalu klik Edit HTML
3) Cari kode ]]></b:skin> (gunakan Ctrl + F) lalu paste semua kode yang sudah anda salin tadi tepat di atasnya
4) Klik Simpan Template
Jika saat 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
Tidak ada komentar:
Posting Komentar