Cara Menambahkan Efek Zoom Pada Thumbnail Image di Blog
Akhir akhir ini saya jadi suka ngulik CSS, dan kebetulan, saya ingin lebih memodifikasi CSS bawaan dari Tema yang saya gunakan, nah salah satunya yang telah saya edit adalah tampilan Thumbail Image dihalaman depan blog saya, sekarang ada efek zoom nya.
Penasaran Bagaimana cara mengimplementasikannya? berikut caranya :
- Masuk ke Dasbor Blogger kamu, dan masuk the Tema dan Edit HTML.
- Selanjutnya kamu cari variabel dengan nama seperti berikut :
]]></b:skin> atau jika tidak ada, masukan saja ctrl+f dan ketikan b:skin
- Selanjutnya kamu masukan css berikut tepat dibawah kode barusan.
/* css gambar zoom */ .post img{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; margin: 0 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); }
- Jika sudah selesai, kamu bisa langsung aja simpan tema, dan lihat hasilnya.
That its, mudah sekali bukan, silahkan coba dan semoga berhasil, btw code diatas adalah berreferensi dari Lycoris-template yang saya modifikasi sedikit banget.
Post a Comment for "Cara Menambahkan Efek Zoom Pada Thumbnail Image di Blog"