Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor

Cara Membuat Gambar Membesar Bila Disentuh Kursor - Hai sobat... Bukan berarti ada konsep baru dalam situs ini, saya mengabaikan artikel lama saya. Saya akan membuat tutorial blogger lagi nih. (˘⌣˘)ε˘`) Tutorial blogger kali ini membahas Cara Membuat Efek Gambar Membesar Atau Zoom Ketika Disentuh Kursor.

Gambar bisa membesar saat disentuh kursor? Pastinya tau dong. Kalau sobat sering browsing atau blogwalking pasti pernah melihat gambar akan membesar saat kursor / pointer / arah panah di blog sobat bergerak menuju gambar tersebut.

Mungkin, tujuan utam dari tutorial ini yang sering digunakan oleh para Blogger adalah, jika gambar diatur dengan ukuran kecil, bisa dilihat jelas jika kursor menyentuh gambar yang dituju. Gambar bisa lebih jelas jika diperbesar. Mungkin gambar yang Anda upload memang berukuran kecil dan tidak bisa lagi diperbesar. Dengan fungsi tutorial ini, mungkin sedikit akan membantu pengunjung sobat untuk melihat lebih jelas gambar tersebut.

Apalagi, jika gambar pada blog sobat terlalu besar ataupun sangat besar, akan membuat loading blog sobat akan lebih lambat jika dibandingkan dengan blog yang dengan gambar berukuran lebih kecil. Oleh karena itu, sekarang saya buat tutorial Cara Membuat Efek Gambar Membesar Atau Zoom Di Blog Saat Disentuh Kursor.

Ini adalah salah satu cara mempercepat loading blog sobat. Jadi, buat sobat yang mempunyai blog dengan gambar yang besar, bisa  dikecilin lagi. Terus, pake tutorial ini. Agar blog sobat yang mungkin lambat, bisa lebih cepet dari sebelumnya.

1. Login Blogger

2. Klik Template

3. Edit HTML

4. Cari kode ]]></b:skin> (agar memudahkan pencarian, tekan Ctrl+F pada keyboard)

5. Setelah ketemu kode tersebut, copy kode dibawah ini, lalu letakkan / paste kode dibawah ini tepat DIATAS kode  ]]></b:skin>

.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;

}

6. Simpan perubahan

Selesai...

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor
Deskripsi	Cara membuat efek gambar membesar saat disentuh kursor, cara membuat efek gambar zoom saat disentuh kursor di blog, cara membuat gambar membesar saat disentuh cursor di blog
Author	Fahmi Fanirius
Author Rating	96%/ 100% Suara Dari 3980 votes