Teknik Membuat Gambar Membesar Saat Tersentuh Cursor

Barangkali sejumlah Blogger seringkali lihat gambar yang membesar bila tersentuh kursor. Di dunia blogging feature semacam ini seringkali dinamai Image Zoom Effects atau Hover Zoom Smooth Effects. Featur yang ini agak banyak di sukai beberapa blogger meskipun sebetulnya dengan menempatkan Image Zoom Effect ini di website bisa mengganggu pengunjung yang sedang membaca artikel kita.


Teknik Membuat Gambar Membesar Saat Tersentuh Cursor

Tulisan ini saya bikin untuk lengkapi panduan di blog ini, buat sahabat yang ingin memasangnya silahkan praktekkan panduan berikut ini.

Langkah membuat gambar jadi membesar saat disentuh kursor:
1. Pilih Template>Ubah HTML

2. Cheklist Expand Widget Template

3. Mencari code ]]></b:skin>, menggunakan fungsi Find dengan tekan tombol CTRL+F pada keyboard
4. Jika telah ditemukan, copy paste code berikut tepat diatas code ]]></b:skin> 
.
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

5. Terakhir jangan lupa untuk klik tombol Simpan Template dan lihat hasilnya diblog sobat.

Jika ada pertanyan seputar artikel diatas silahkan sampaikan dikolom komentar.

Mudah-mudahan artikel singkat ini dapat berguna untuk sobat blogger.

2 comments for "Teknik Membuat Gambar Membesar Saat Tersentuh Cursor"