Gambar dengan Efek Zoming di Blog

Dari pada binggung langsung aja lihat tutorialnya...

Berikut langkah-langkahnya:

1. Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".
2. Carilah kode </head>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://z33s.googlecode.com/files/BesaR.txt.js"> </script>

Ket: apabila kode berwarna biru sudah ada pada html templatemu, maka yang dicopy-pastekan adalah kode dibawahnya saja yang berwarna hitam.
1. Kemudian simpan template sobat.
2. Untuk memasukkan efek zoom pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek zoom. Berikut kodenya:

<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="Url gambar sobat" alt="" id="BLOGGER_PHOTO_ID_6060538624190533589" border="0" />

1. Ganti teks berwarna merah dengan link dari gambar sobat. Kode berwarna biru adalah tinggi dan lebarnya gambar yang dapat sobat atur, ubah dan sesuaikan dengan keinginan sobat.
2. Jika ingin memasukkan efek zoom lagi pada gambar yang lain, ulangi lagi langkah ke-4 untuk setiap kali memberikan efek zoom pada gambar yang lain.

Posted in: