search-button

Nov 10, 2013

Membuat Efek Zoom Otomatis Pada Semua Gambar Di Posting Blog

   
Advertisements
Advertisements
Sempat tidak melakukan update terhadap blog ini selama dua minggu karena sibuk dengan kegiatan di kampus akhirnya kali ini saya mempunyai waktu luang untuk memperbaharuinya. Dalam tutorial kali ini saya akan menunjukkan bagaimana cara membuat Zoom Effect atau dalam Bahasa Indonesianya adalah efek memperbesar pada setiap gambar maupun foto yang ada di dalam postingan blog anda.

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
Zoom effect


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. Enjoy & Happy Coding!