Cara Membuat Zoom Foto DiBlog

"Cara Membuat Zoom Foto DiBlog"

   Pada artikel ini, saya akan share tentang cara membuat gambar zoom otomatis ketika ada cursor mouse, seperti yang ada pada blog ini jika kursor mouse berada di atas gambar ( pada artikel ) maka secara otomatis gambar tersebut akan membesar.
 
Apakah Anda berminat untuk menerapkannya di blog Anda..??

Silahkan ikuti langkah-langkah dibawah ini :

1.    Login ke akun Blogger Anda.
2.    Masuk ke bagian Template.
3.    Sebelum mengedit template saya sarankan untuk membackupnya terlebih dahulu ( jaga2 barangkali ada kesalahan ) caranya dengan mengklik Cadangkan / Pulihkan lalu pilih download template lengkap.
4.    Selanjutnya klik Edit HTML >> lanjutkan.
5.    Cari kode ]]></bu:skin> Tekan ctrl + f untuk mempermudah pencarian kode.
6.    Jika sudah ketemu copy paste kode berikut diatas kode ]]></b:skin>.
7.    Klik simpan Template... Dan lihat sendiri hasilnya...

Masukkan code 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;
}

Atau Download dibawah sini :

CodeZoom.rar

"Contoh Zoom"

   Scale (2,4) mengubah gambar dengan skala 2 kali lebar dan 4 kali tinggi dari aslinya, secara teori begitu tetapi peramban juga tetap menjaga resolusi gambar agar tetap tidak rusak.

   Tidak semua template menggunakan class .post-body img bisa juga menggunakan .post img atau bisa juga yang lain tergantung pembuat template blog anda.

Sekian dulu postingan saya semoga bermanfaat untuk kita semua...

"Terima Kasih"