Oke kali ini saya akan membuat efek gambar membesar
ketika disorot mouse. Apa itu? Gini nih, jadi, gambar pada blog sobat
khususnya gambar pada bagian postingan akan berubah menjadi besar ketika
ada mouse lewat diatasnya.
Seperti apa? contoh nya ada pada blog saya ini.
Coba saja buka salah satu postingan pada blog ini yang ada gambarnya,
kemudian dekatkan mouse di atasnya, pasti gambar itu akan membesar.
Begitulah kira-kira penjelasan singkatnya.
Cara membuatnya seperti ini :
- Untuk membuat efek gambar membesar ketika disorot mouse, pertama login dulu ke akun blogger milik sobat.
- Terus klik menu Rancangan » Edit HTML.
- Download dulu template sobat biar aman dan biar kalau terjadi error ada cadangan templatenya.
- Kemudian cari kode berikut ]]></b:skin>
- Kalau sudah ketemu, letakkan kode dibawah ini tepat di atasnya.
.post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;}
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);} - Simpan template. Lihat perubahannya apakah sudah berubah atau belum.
Sampai di sini cara membuat efek gambar membesar
ketika disorot mouse sudah selesai, jika kurang jelas atau ada
kesalahan, hubungi saya. Sekian semoga bermanfaat.
