Sudah lama nih saya ga posting mengenai Edit HTML Blog.
Tidak mau banyak basa-basi langsung saja saya akan memberikan sedikit ilmu yang sekiranya bisa bermanfa'at yaitu bagaimana caranya agar gambar pada artikel/postingan blog membesar/zoom otomatis ketika kursor diarahkan pada gambar tersebut.
Sebagai contoh silahkan kalian arahkan kursor pada gambar dibawah ini:
Gimana gan, zoom otomatis kan gambarnya ketika kursor diarahkan..??
Back Up terlebih dahulu HTML asli, untuk menghindari jika proses gagal.
Jika kalian tertarik silahkan ikuti langkahnya berikut ini:
- Masuk ke Blogger
- Pilih Template > Edit HTML
- Cari kode ]]></b:skin> (tekan "Ctrl+F" untuk mempermudah menemukan kode)
- Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
- Simpan Template
.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;
}
-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;
}
Baca juga Efek Gambar Berputar Dan Zoom Otomatis Pada Posting Blog
Semoga Bermanfa'at
Related Post