Trik ini sudah banyak digunakan oleh para blogger termasuk saya, Contohnya juga banyak banget dan bisa anda lihat pada blog yang mungkin sering anda kunjungi. Image yang membesar saar di sorot mouse ini sering kita jumpai pada blog terutama pada bagian postingan akan tetapi tidak menutup kemungkinan hampir semua image bisa membesar saat di sorot mouse.
Karena sudah banyak sekali blogger yang menggunakan trik ini dan daripada berbelit-belit kesana-kemari mending langsung saja saya tulis cara membuatnya:
1. Login ke blogger
2. Klik menu template » Edit HTML » Lanjutkan.
3. Oh iya hampir lupa, se baiknya anda download dulu template karena kalau terjadi kesalahan anda bisa mengembalikannya seperti semula.
4. Cari kode berikut ]]></b:skin>
5. 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 );}
6. Simpan template.
Keterangan : 1.2 di ganti ke angka lebih besar untuk hasil gambar yang lebih besar.
Karena sudah banyak sekali blogger yang menggunakan trik ini dan daripada berbelit-belit kesana-kemari mending langsung saja saya tulis cara membuatnya:
1. Login ke blogger
2. Klik menu template » Edit HTML » Lanjutkan.
3. Oh iya hampir lupa, se baiknya anda download dulu template karena kalau terjadi kesalahan anda bisa mengembalikannya seperti semula.
4. Cari kode berikut ]]></b:skin>
5. 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 );}
6. Simpan template.
Keterangan : 1.2 di ganti ke angka lebih besar untuk hasil gambar yang lebih besar.
0 Komentar untuk "Membuat image Membesar Ketika di Sorot Mouse"