Membina Image magnify atau zoom in image pada blog

Apabila kita meletak image pada entri dan visitor klik pada image tersebut, ia akan menyebabkan visitor langsung terkeluar dari blog kita. Ada yang menambah kod target="_blank" supaya image di buka pada window yang baru.

Cara yang lebih mudah dan menarik ialah dengan menggunakan fungsi image magnify. Image magnify adalah satu fungsi di mana ia akan mengubah saiz image menjadi lebih besar apabila image tersebut di klik. Ianya seperti fungsi zoom in. Untuk lebih jelas lagi, anda boleh klik pada image yang terpapar di sini.(sila klik)

Untuk memasang fungsi image magnify ini, sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya, klik pada HTML/Javascript

Langkah 2

Salin kod berwarna biru di bawah dan pastekan selepas atau di bawah ruang Content HTML/Javascript (rujuk langkah 2)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/javascript10/resizeimage.js' type='text/javascript'></script>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Langkah 3

Image yang telah di upload pada post perlu di edit kodnya dan di tambah dengan kod class="magnify". Untuk mengedit kod image, ianya hendaklah dilakukan pada Edit Html . (rujuk gambar di bawah)




Untuk mengedit kod image, anda boleh rujuk contoh di bawah.

Kod image sebelum di edit.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-n2zokx6__nvfZ4YZsxIXJD3FkU9KERIPt77useWPyi4-6MEkE32M9aA1xIRaTwUMlxnT-lUky-98iHDI5Jdmt8m6AL4pogHfZZNAaiahkgclWhrPkHqdQJUMzvxRDRaEnXoaN7fNY_k/s400-h/forest+wallpaper21.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-n2zokx6__nvfZ4YZsxIXJD3FkU9KERIPt77useWPyi4-6MEkE32M9aA1xIRaTwUMlxnT-lUky-98iHDI5Jdmt8m6AL4pogHfZZNAaiahkgclWhrPkHqdQJUMzvxRDRaEnXoaN7fNY_k/s400/forest+wallpaper21.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5419303430522971714" /></a>

Kod image selepas di edit dan di tambah kod class="magnify"

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-n2zokx6__nvfZ4YZsxIXJD3FkU9KERIPt77useWPyi4-6MEkE32M9aA1xIRaTwUMlxnT-lUky-98iHDI5Jdmt8m6AL4pogHfZZNAaiahkgclWhrPkHqdQJUMzvxRDRaEnXoaN7fNY_k/s400/forest+wallpaper21.jpg" class="magnify" />

p/s: Hanya ulangi langkah 3 untuk zoom in image yang lain pada post.