Sobat Blogger semua bisa mencoba dan menerapkan tutorial membuat gambar membesar saat disentuh cursor pada blog masing-masing. Oke langsung saja lihat tutorial cara membuat efek membesar atau zoom pada gambar saat disentuh cursor dibawah ini :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste 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;}
Kalau dengan kode di atas ternyata tidak bekerja, cobalah dengan kode berikut :
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;}img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity: 1;}
5. Klik Simpan Template
Catatan :
- Kode CSS diatas sudah valid CSS3.
- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.
ConversionConversion EmoticonEmoticon