Keuntungan yang anda dapat dengan memasang Zoom Effect ini adalah membuat blog anda terlihat lebih cantik dan Pro. 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 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.
Demo
Persiapan :
Salin semua kode yang ada dibawah ini
.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