Cara Membuat Gambar Membesar Ketika Disorot Mouse
Tutorial Blog| Cara membuat gambar membesar ketika disorot merupakan salah satu teknik dalam mempercantik postingan kita. Sebagaimana yang kita tahu bahwa dengan adanya gambar di postingan kita dapat membuat tampilan postingan kita terlihat lebih hidup dan enak dilihatnya. Akan tetapi terlalu banyak gambar juga membuat kita pusing dalam melihatnya selain itu dapat membuat loading blog kita menjadi lambat. Keuntungan dari membuat gambar dapat membesar ketika diarahkan mouse adalah dapat menghemat tempat dalam postingan. Selain itu juga dapat membuat tampilan di postingan kita terlihat lebih menarik dan profesional. Jika anda tertarik ingin menerapkannya dalam blog anda silahkan anda ikuti cara berikut ini.
1. Copy Paste kode di bawah ini pada tempat yang ingin anda beri gambar dalam postingan.
<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script><img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />
2. Untuk mendapatkan url gambar, sebelumnya anda harus mengunggah gambar terlebih dahulu.
3. Ganti URL GAMBAR ANDA dengan url gambar yang tadi anda unggah.
4. Lihat hasilnya akan seperti gambar di bawah ini.
Jika gambar yang ingin anda masukan lebih dari satu maka agar lebih praktis anda dapat gunakan cara sebagai berikut ini.
1. Copy Paste Script di bawah ini.
<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script>
2. Letakan script di atas di bawah <head>.
3. Lalu Copy Paste kode di bawah ini tiap kali anda ingin memasukan gambar
<img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />
Jika anda ingin lebih praktis lagi maka Copy Paste sript pada No. 1 di bawah <head> yang ada pada menu Template Edit HTML. Untuk cara Edit Tempalate silahkan klik di sini. Selanjutnya lakukan seperti cara No. 3 nanti secara otomatis setiap anda memasukan gambar akan berlaku efek membesar ketika disorot mouse.
Keterangan:
- Angka pada height="100" dan width="100" menunjukkan panjang dan lebar gambar dapat anda sesuaikan sendiri. Usahakan ukuran gambar asli lebih besar dari ukuran heigh dan width supaya efek membesarnya terlihat.
- Ganti tulisan URL GAMBAR ANDA dengan url gambar yang ingin anda pakai.
- <script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script> merupakan script yang membuat efek gambar menjadi membesar ketika disorot jadi jangan pernah anda merubahnya.
- Semua cara di atas berlaku untuk penulisan mode HTML dan tidak berlaku untuk mode Compose.
Demikian Tutorial Blog mengenai cara membikin gambar membesar ketika disorot kursor mouse yang bisa saya share kali ini. Mudah-mudahan dapat memberikan manfaat bagi anda. Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada postingan kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...
Reviewed by MCH
on
August 04, 2012
Rating:
No comments: