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 Gank-Zone ini. Coba saja buka salah satu postingan pada blog ini yang ada gambarnya, kemudian dekatkan mouse di atasnya, pasti tuh gambar 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 berikut 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, Sekian semoga bermanfaat.
0 komentar:
Posting Komentar