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="http://1.bp.blogspot.com/__hqk0jmhlcE/SzU7weJgpkI/AAAAAAAAAEQ/ifsmC4puq_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="http://1.bp.blogspot.com/__hqk0jmhlcE/SzU7weJgpkI/AAAAAAAAAEQ/ifsmC4puq_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="http://1.bp.blogspot.com/__hqk0jmhlcE/SzU7weJgpkI/AAAAAAAAAEQ/ifsmC4puq_k/s400/forest+wallpaper21.jpg" class="magnify" />

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

{ 32 comments.. read them below or add one }

Best Of Me 321 Best Of Me 321 5:04 PM
wow best tutorial!


>BOM321<
bom321.blogspot.com
delour delour 5:36 PM
thanks sy byk blajar dr blog ni..=)
L3onydus L3onydus 4:00 PM
yang ni kena amek url yang da upload kat photobucket ker?
cik lia cik lia 5:46 PM
salam nescafe ais.. npe kite wt xjd ekk mende nie.. ;(

cbe tgk kat sini

http://kerongsangbrooch.blogspot.com/2010/01/testimony-herbal-foot-detox.html
Nescafe ais Nescafe ais 6:04 PM
@cik lia

Cik Lia tak edit kod image tu. Kena edit ikut contoh yang bawah ni.

<img src="http://1.bp.blogspot.com/__hqk0jmhlcE/SzU7weJgpkI/AAAAAAAAAEQ/ifsmC4puq_k/s400/forest+wallpaper21.jpg" class="magnify" />
cik lia cik lia 6:28 PM
cuma tambah class magnify je kan???

xbp nk paham..huhu..sori
Nescafe ais Nescafe ais 6:37 PM
@cik lia

Hanya copy img src.

Copy dan paste kod ni.

<img src="http://2.bp.blogspot.com/_mIPUms93ViE/Sz2HZppo6aI/AAAAAAAAAs8/iRs7srzdsvE/s1600/foot%2Bdetox.jpg" class="magnify" />
yana yana 6:53 PM
xjd la.. huahua...
Nescafe ais Nescafe ais 7:48 PM
@yana

Mana satu nama ni.

Boleh. Cuba fahamkan betul-betul.
cik lia cik lia 10:52 PM
dua2 org y sme.. hehe..
xpela.. sy NIE bute skt ..xbp paham..uhu..
pape pon thx en nescafe ais.. ;D
AnonymousAnonymous 10:29 AM
salam nescafe ais,

sy siti cuma nak tanya dgn lebih jelas pasal nak besarkan gambar ni, sy dah ikut apa yg diajar tp x menjadi so sy nak kepastian samada langkah 1-3 tu dibuat n disavekan begitu sahaja ker disavekan bersama2 posting gambar yg nak dibuat?

sbb sy ni masih budak baru belajar harap nescafe ais bole bantu pelajar yg x x brp reti ni... hehehe sbb sy cuba langkah2 yg diajar tp tidak berjaya... tolong ye...
Nescafe ais Nescafe ais 10:38 AM
@Anonymous

Langkah 2 di buat pada Add A Gadget. Langkah 3 di buat pada post.
Izz Izz 1:38 PM
waw!!jady2.thnxs.
wallpaper wallpaper 4:36 PM
kalu nk magnify pict thumbnail kat hompage camne yer?
AnonymousAnonymous 9:55 PM
salam..., sy siti

Dah cuba dan berjaya postkan gambr tp bila klik x bole besarkan la.. dan ini menjadi masalah di blog sy kerana ada sesetengah gambar yg sy upload tidak bole si klik dan besarkan (sebelum mencuba tutorial ini) sy tak tahu knp... bole tolong selesaikan tak masalah ini... harap bole tolong sy yg masih baru ini... terima kasih
ariyon176 ariyon176 3:59 PM
sama juga..dah try..step 3 jer yg fail...

Asal:
src="http://1.bp.blogspot.com/_9Igh-omyQLI/S1R8wjhYv5I/AAAAAAAABHU/qh-WkOG0IEk/s320/leatherman+the+ori.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5419303430522971714"alt="" >

selepas edit:
src="http://1.bp.blogspot.com/_9Igh-omyQLI/S1R8wjhYv5I/AAAAAAAABHU/qh-WkOG0IEk/s320/leatherman+the+ori.jpg" class="magnify" /> border="0" alt=""id="BLOGGER_PHOTO_ID_5419303430522971714"alt="" >

lepas safe terus jadi error pada post..

keluar link pulak :id="BLOGGER_PHOTO_ID_5419303430522971714"alt="" pada post
Nescafe ais Nescafe ais 8:39 PM
@ariyon176

Cuba guna kod ni. Copy paste pada post.

<img src="http://1.bp.blogspot.com/_9Igh-omyQLI/S1R8wjhYv5I/AAAAAAAABHU/qh-WkOG0IEk/s320/leatherman+the+ori.jpg" class="magnify" />
Kct Kct 11:17 PM
salam nescafe ais...

Akhirnyer berjaya jua tutorial ini, kredit tuk awk, terima kasih byk2.... tetapi yg menjadi masalah kenapa gambar2 diblog saya ni jadi blur... bila diklik. harap dapat bantuannn
matdolah matdolah 8:45 PM
yelah...same jgak...knpe erhh???tong ajar spe thu??
matdolah matdolah 9:32 PM
bro..aq rse artikel x ckp lengkap lagi laa..cuba korang lihat c ney plak..http://unwanted86.blogspot.com/2009/10/image-magnify-tutorial.html...
Halizayana Halizayana 6:15 PM
sy xdpt buat...blh tlong
Halizayana Halizayana 10:23 PM
usaha tangga kjayaan...sy dh brjaya..thanks mr.nes
norezshah norezshah 1:18 AM
x ble... cmne nk wat... huhhu
Adisaufi Adisaufi 2:59 AM
buat da jd tp bila magnify pic kua kot window lain huhuhu
Farah + Hanis :) Farah + Hanis :) 12:32 PM
susa laa bnde nyh :((
miSs Zie miSs Zie 3:49 PM
da lama cr tutorial magnify yg senang cmni..slalu jmpa mesti kena buat byk langkah..yg ni ringkas N sng fhm..huhu..tQ s0 much!!
inspirasiizra inspirasiizra 10:12 PM
thanks,, jadi tp time dier zoom skejap jek
pastu tros kluar dri blog tuk zoom . .
hEartlEss hEartlEss 6:53 AM
assalam... sy da try wt. jd xbp nk jd la... huhu... try tgk kt cni. TQ. :)

http://munlivelife.blogspot.com/2011/02/jom-kita-pingsan.html
hEartlEss hEartlEss 7:01 AM
assalam... sy da try wt. jd xbp nk jd la... huhu... try tgk kt cni. TQ. :)

http://munlivelife.blogspot.com/2011/02/jom-kita-pingsan.html
mynameismy mynameismy 11:30 AM
tak faham la yg langkah 3 tu. nak cr kod ape dlm edit html tu?
mynameismy mynameismy 11:39 AM
dah buat. tp lepas da tambah code. try klik die zoom in kejap pastu still pegi ke page lain mcm biase tu