Cara Membuat Efek Zoom Pada Gambar di Blog

Cara Membuat Efek Zoom ( Membesar ) Pada Gambar di Blog - Memodifikasi template tidak sekedar hanya utak atik bagian luar postingan saja, bagian dalam pun ( Artikel ) yang akan menjadi tujuan mata para pengunjung seharusnya harus kita perhatikan.
Setelah sebelumnya saya  memposting cara memasang tombol follow dan dashboard di blog, kali ini saya akan memposting tentang Cara Membuat Efek Zoom pada Gambar di Blog.  Dengan menggunakan efek ini, setiap gambar yang ada dalam postingan akan tampil dengan pilihan Zoom seperti yang terlihat pada gambar berikut.


Selain itu, cara ini juga bisa di gunakan untuk gambar yang berada di luar postingan seperti di sidebar, header, footer atau bagian lain dari halaman blog.
Sobat yang tertarik untuk membuat efek zoom pada gambar di blog, silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak.

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

<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>

4. Klik Save.. nah sekarang saatnya di terapkan pada gambar.

Untuk menggunakan efek ini pada gambar di artikel, silahkan gunakan kode pemanggil berikut
    <img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Keterangan :
  • Ganti kode berwarna biru dengan Url Gambar Sobat
  • Ubah Lebar dan tinggi ( Width - Height ) sesuai keinginan.
  • Angka 2 pada kode adalah Skala Pembesaran. Nilai lebih besar dari 1 akan membesarkan gambar dan nilai kurang dari 1 akan mengecilkan gambar. Contohnya 0.5
    Untuk cara menerapkannya pada gambar di artikel , sobat tinggal memasukkan kode tersebut di Edit HTML pada postingan ( bukan Compose ).



dan untuk memasukkannya di sidebar atau di tempat lain selain postingan, silahkan masukkan saja kode tersebut di HTML/Javasript sobat.

 Sekian cara memasang efek zoom pada gambar di blog, semoga bisa membantu...
Previous
Next Post »

17 comments

Write comments
Tanpa busana
AUTHOR
20:49:00 delete

mantap tutorialnya masbro!!!!


akan ta follow blog ni...

Reply
avatar
18:54:00 delete

agak ribet ya kalo udah ngomomongin script yang di masukan ke edit html,,sering galat gan,,tapi terima kasih buat tips nya

Reply
avatar
20:00:00 delete

ilmu baru nii,,mksh yaa mas brow

Reply
avatar
02:47:00 delete

praktis nich tipsnya,berkunjung ke sini makin banyak ilmu yang saya tentang blog

Reply
avatar
20:05:00 delete

mantab gan infonya,,,,
mampir gan di blog gw ya,,,,,,

Reply
avatar
20:06:00 delete

artikel tang bermanfaat banget,,,,,
visit gan di blog sya ya,,,,
ditunggu,,,,,,

Reply
avatar
20:08:00 delete

keren gan infonya,,,,
mampir ya gan di blog kecil ane,,,,

Reply
avatar
Unknown
AUTHOR
14:11:00 delete

gagal gan

Reply
avatar
Unknown
AUTHOR
17:40:00 delete

not working....

Reply
avatar
Unknown
AUTHOR
08:17:00 delete

tak ada kata yang hndk ane ucapkan selain ...makasih banyak atas infonya....

Reply
avatar
10:46:00 delete

yang otomatis gak bisa sob?

Reply
avatar
made
AUTHOR
17:40:00 delete

Makasi Infonya ... pasti saya dofollow

Reply
avatar
MaskaPro
AUTHOR
10:43:00 delete

saya coba klik gmbarnya tapi kok gak bisa???

Reply
avatar
Unknown
AUTHOR
06:52:00 delete

thanks kawan atas infonya

Reply
avatar
kikils
AUTHOR
08:44:00 delete

bisa gak tanpar perlu edit template

Reply
avatar
Unknown
AUTHOR
15:34:00 delete

Efek zoom nya keren bro! :)

Reply
avatar
Dark Wizard
AUTHOR
13:09:00 delete

Gan. kalau yg otomatis g palah pakai nambahin kode ketika meletakkan gambar ada gan?
saya newbie :)

Reply
avatar