Image Magnify

Posted on 11:38:00 PM by  with 53 comments
Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode


Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

Berikut adalah tutorial untuk image magnify ini.


1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.

<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>



2) Apabila sudah letak code tu, save sahaja seperti biasa..

Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)

<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />



Keterangan :

  • url gambar disini : Masukkan url gambar.

  • 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5

  • 200 : Masukkan lebar gambar yang anda rasakan bersesuaian

  • 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian

53 comments:

  1. AnonymousFebruary 27, 2010 at 8:45 PM

    salam..dah aku dah letak kat blog aku benda ni sumer..dan berjaya pun,,nasib baik la ada hang..tak kedekut ilmu..bagus bagus..
    lawat dan komen la skit syokNYAdownload.blogspot.com ..mentang2 blog baru.takde sapa komen.,heehe..noob aku..ni..tolong juri skit yer..thanks cikgu ku.

    ReplyDelete
  2. KctMarch 24, 2010 at 2:16 PM

    salam...

    Saya sudah cuba trick besarkan pic ni dan berjaya.... sungguh senang rupanyer untuk tutorial ni dan saya mengucapkan jutaan terima kasih diatas tutorial yg sgt berguna ini... bila nak buat trick pic yg bersusun tu pula???jemput la ke blos saya ye.... terima kasih skali lg... moga2 usaha anda diberkati....

    sharing is caring

    ReplyDelete
  3. schaApril 22, 2010 at 10:56 AM

    Macam mana nak susun gambar sebelah menyebelah, then magnify?

    ReplyDelete
  4. Zuraimi binti MansorJune 17, 2010 at 7:58 PM

    kalau gambar tu gamebar yang diupload nak tulis apa kat bahagian image url?

    ReplyDelete
  5. joonie-girlJune 18, 2010 at 8:05 PM

    maaf ya.. macam mana nak buat gambar tu bila di magnify tak pecah2 ?

    ReplyDelete
  6. eyrazJune 20, 2010 at 7:21 PM

    thank ya....banyak membantu :P

    ReplyDelete
  7. Cik KumbangJune 28, 2010 at 11:15 AM

    xberjaya pun...huhu
    cmna nak letak url gmbar tu?
    kalo kita copy image location tu sm x?

    ReplyDelete
  8. Fateen InsyirahJune 29, 2010 at 12:12 PM

    Terima kasih tuan blog . Tabik spring ! :D

    ReplyDelete
  9. unJuly 6, 2010 at 10:49 PM

    Bagi yang masih tidak jelas bagaiman hendak mendapatkan url gambar, sila rujuk tutorial ini.
    http://tutorialuntukblog.blogspot.com/2010/04/cara-dapatkan-url-gambar.html

    ReplyDelete
  10. UnknownJuly 10, 2010 at 4:48 AM

    hello yunk...ash grab u py banner bubuh kt belog i...if have free tyme..come visit me yaaa thanks...

    ReplyDelete
  11. Norziea JiaJuly 14, 2010 at 6:54 PM

    salam..ziarah lah blog sy yer http://tingkaphijau,blogspot.com

    ReplyDelete
  12. aSmiDarAugust 16, 2010 at 11:53 AM

    yeeeyyyy...dah try..jadik jugak..huhuhuhu

    ReplyDelete
  13. zaL_cdpxSeptember 7, 2010 at 11:40 AM

    ermm..sedih ! xlh nk bt pn ! dh bnyk kali dh try !
    sob..sobb

    ReplyDelete
  14. khalija ibrihainSeptember 16, 2010 at 5:34 PM

    tak boleh laaa...help me.. :((

    ReplyDelete
  15. hanieycahayaOctober 27, 2010 at 10:37 PM

    okey..yg ni gunakan url gmbar..tapi kalu nk yg upload dri folder cmne plak?

    ReplyDelete
  16. .::: Princess MOMOY :::.November 28, 2010 at 4:31 PM

    langkah 2 nak copy paste di mana. kurang jelas

    ReplyDelete
  17. aishahiraDecember 13, 2010 at 12:50 AM

    no komen~

    ReplyDelete
  18. Shafiq IzwanJanuary 13, 2011 at 4:39 PM

    MINTAK TOLONG! KOD YG KEDUA TU NAK PASTE KAT MANE??

    ReplyDelete
  19. linnJanuary 20, 2011 at 11:26 PM

    ty, mau sampai sepetang jugak lah berfikir how to do this... alhamdulillah. im just confius dengan url(magnify.cur).

    first mistake because i just copy and put url photo from photobucket for replace. rupanya yang bawah tu url(magnify.cur) pun kena isi kan jugak. but another url.

    kena tgk awak nyer inspect element baru faham. anyway. thanks alots.~

    ReplyDelete
  20. NoRaNasHuHaFebruary 4, 2011 at 10:57 AM

    thanks...tp boleh x tunjuk camne nak wat header blog sendri..

    ReplyDelete
  21. masnurainFebruary 9, 2011 at 3:29 PM

    second code nak kena paste mcm mane..??
    kene paste dekat mane..??
    tiap tiap2 entry yang kite nak letak gambar ke..??
    tolong..tolong..

    ReplyDelete
  22. salemazizFebruary 9, 2011 at 7:40 PM

    tengkiu ngan tutor ni..:)
    2nd code nak apply cane ea??

    ReplyDelete
  23. A z !February 22, 2011 at 5:03 PM

    tenkiu , bagus tutorial ni, dah isi dah kat blog aku

    ReplyDelete
  24. Nur NatashaApril 1, 2011 at 9:23 AM

    code kedua nak paste dekat mana eh ?

    ReplyDelete
  25. aida khalidahApril 10, 2011 at 8:26 PM

    hye...
    nk tny..
    jd 2 jd tp ley ta law kite nk wat owg len xley copy gmbr??
    n code kdua 2post ktne?

    ReplyDelete
  26. AnonymousApril 19, 2011 at 12:36 AM

    salam

    langkah kedua tu nk paste katne?
    hukhuk

    ReplyDelete
  27. AnonymousApril 19, 2011 at 12:43 AM

    da jadi

    hehehe hahahahoyayaya

    ReplyDelete
  28. Afeeqah AnuarMay 3, 2011 at 10:26 PM

    XBOLEH BUAT!!!2nd link ltak kat mana??

    ReplyDelete
  29. Mohd RizwanMay 18, 2011 at 5:52 PM

    link ke dua nk letak kt mne??

    ReplyDelete
  30. UnknownJune 4, 2011 at 7:03 PM

    Assalam....Terima kasih...

    Yana dah cuba menjadi lah hehehe...

    Boleh tgk kat link ini...heheheh happy nye...Tq

    Churp Churp The Cutest Thing Contest

    ReplyDelete
  31. xuchickJune 28, 2011 at 11:35 PM

    cam ne nk wt energy saver?tq..

    ReplyDelete
  32. momoMUNCETJuly 13, 2011 at 12:46 AM

    terima kasih !

    ReplyDelete
  33. NINICKHUNJuly 18, 2011 at 9:29 AM

    tak faham lah . saya sudah cuba tapi tak ada perubahan . remain the same . haizz . macam mana nak buat yaa ?

    ReplyDelete
  34. ButtercupJuly 27, 2011 at 10:13 PM

    katne nak letak link n0 2 neyh?abes sume org tanye,tapi tader jwpan un [konpius]

    ReplyDelete
  35. mikjsdfwefmfnmeijfJuly 29, 2011 at 6:55 PM

    kat mana nak letak link num 2 tu??????? tlg la bg jwpnnye. adehh

    ReplyDelete
  36. UnknownAugust 12, 2011 at 3:57 PM

    kat mana nak letak code no2????pls....i dah letak banner u kat blog i...tq anywiz...rajin2 jenguk la kat blog i n pls komen ler....

    ReplyDelete
  37. IbrahimSaminAugust 15, 2011 at 12:47 PM

    best gile tuto kat sini. loveyahh :)

    ReplyDelete
  38. Encik KOKOAugust 24, 2011 at 1:36 AM

    smart lorh. cm na jual beg gucci plak..
    beb, kalu letak menda neh x lembab ke blog kita nanti??

    ReplyDelete
  39. Cerr CiterrSeptember 23, 2011 at 8:57 PM

    benda ni hanya yang kita letak dalam gadjet jewww..lau ajen wat bnyak gadjet..bkeh la nak wat bnda ni smua kpda gmbar anda..hehe,,:-)..apepom..keep sharing

    ReplyDelete
  40. NoRSeptember 28, 2011 at 11:46 AM

    yeahhh mjadi jgak akhir nyer... hhuhu

    ReplyDelete
  41. Blog SensasiSeptember 29, 2011 at 6:51 AM

    thnks tutor tu nak cuba la

    ReplyDelete
  42. Nur Maisarah HashimSeptember 30, 2011 at 2:53 PM

    Tak faham laaaaaa.. yang utk letak url gambar tu letak kt new

    ReplyDelete
  43. Misa♥Meow 美咲ニャーOctober 9, 2011 at 12:49 AM

    cmne nak buat semua gmbar di magnify?

    ReplyDelete
  44. BEST4 MUMMY CLOSETNovember 9, 2011 at 7:05 PM

    nak tanye code ke-2 nak letak dekat mana? nak letak kat semua gambar ke?

    ReplyDelete
  45. KEK LAPIS -FRESH FROM OVENNovember 11, 2011 at 9:07 PM

    code ke 2 to, nk letak kat manaee ye hlp help...

    ReplyDelete
  46. Nurin NabilahDecember 17, 2011 at 3:47 PM

    jom la follow sy...

    ReplyDelete
  47. nana ayrienDecember 17, 2011 at 8:31 PM

    macam mane na dptkan url ekh ?

    ReplyDelete
  48. T_bǿMb Jr. ™February 9, 2012 at 10:54 PM

    letak kode no.2 berikut ini d simpan dmn ?


    img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; "

    ReplyDelete
  49. |MrMrsRyanHarvey|September 4, 2012 at 5:14 PM

    thank you .. thank you .. thank you !! jom kunjungi d blog sya http://www.ryanharveyx.blogspot.com . n jgn lupa follow :)

    ReplyDelete
  50. Zairy IzamNovember 9, 2012 at 11:44 PM

    thankz banyak2 sbb dah banyak tolong saye editkan blog saye ni

    ReplyDelete
  51. Agen Ace Maxs YogyakartaMay 1, 2013 at 3:20 PM

    thanks artikelnya sangat bermanfaat...

    ReplyDelete
  52. IzikitJanuary 13, 2014 at 7:31 PM

    tq mmg menarik

    ReplyDelete
  53. UnknownFebruary 6, 2014 at 11:06 AM

    kok ngak bekerja :O

    ReplyDelete

Subscribe to: Post Comments (Atom)