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.Okelah kalau Anda berminat untuk menerapkannya di blog Anda silahkan ikuti langkah singkatnya 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 ]]></b:skin> Tekan ctrl + f untuk mempermudah pencarian kode
6. Jika sudah ketemu copy paste kode berikut diatas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Silahkan lihat hasilnya dengan membuka salah satu artikel di blog Anda, dan arahkan cursor mouse diatas sebuah gambar.
Terimakasih telah berkunjung dan membaca artikel di Media 7, semoga dapat bermanfaat untuk Anda.
Selamat Mencoba !!!
Sumber Artikel :
http://media-seven.blogspot.com/2012/06/cara-membuat-gambar-zoom-otomatis.html
0 komentar:
Posting Komentar