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 Response to "Membuat image Membesar Ketika di Sorot Mouse"
Post a Comment
PERHATIAN !...
*. Baca dulu artikel dan komentar yang ada sebelum Anda menulis komentar
*. Harap berkomentar dengan bijak dan sopan
*. Jika mengajukan pertanyaan, beri centang pada kotak disamping tulisan "Beri tahu saya" untuk mendapatkan jawaban melalui email
*. Dilarang menyertakan "LINK HIDUP", "IKLAN" "SPAM" dalam komentar karena akan dihapus atau dimasukkan ke dalam Comment Spam