Pages

::-Klik Gambar Untuk Magnify-::

Tuesday, February 1, 2011

Tutorial Magnify Gambar

Tutorial ni bagi menjawab soalan dari YanaMIB bagi menjawab soalan aku. Aku tak tau pasal autopost sebab sebelum ni aku pakai post editor yang lama. Bagi sesiapa yang tak tau, post editor lama tak ada autopost, cuma updated post editor je yang ada (ke aku sorang je yang tak tau ni) 
gambar yang sebelah atas adalah post editor yang baru, yang sebelah bawah plak yang lama. Aku tau mesti ada yang masih pakai editor yang lama, tak ramai pon mesti ada sikit yang guna. 


updated editor
editor lama
updated post editor ni lagi senang dan lagi banyak kelebihan. Kalau sesiapa yang masih pakai post editor lama  kalau nak tukar ikut step ni

Dashboard > Setting > Basic > scroll ke bawah nnt jumpe macam kat bawah ni > klik updated editor > save setting 



Ok sekarang kita akan mulakan tutorial MAGNIFY GAMBAR (rasa macam cikgu plak) 

1 - Mula-mula korang kene copy and paste html kat bawah ni.
(Dashboard > layout > add page element > HTML/javascript )





*kod ni cume perlu letak sekali, dan jangan dibuang. Kalau tak nanti tak boleh magnify image


2 - Kod kat bawah ni pulak kene letak untuk setiap gambar yang korang nak magnify.




* ruang "url gambar disini" adalah untuk url yang gambar akan diupload
* data-magnifyby="2" merujuk kepada berapa kali ganda anda nak magnify.
width dengan height tu pilih ikut sukehati nak besar mana. Kebanyakan gambar aku kalau yang menegak aku cume ubah width jadi 300. Kalau gmbar melintang ubah width jadi 400


SOALAN LAZIM : 
1 - mana nak dpt url gambar?
2 - nak paste code kedua ni dekat mana?


JAWAPAN


Soalan 1- Upload gambar macam biasa. Ke ade yang tak pernah upload gambar? Tak kan la nak kene buat tutorial upload gambar gak. Melampau la tu.





 Bila dah upload. Besarkan jadi original size dulu. Supaya kalau magnify nanti gambar tak pecah-pecah






bila tumbesaran gambar berjaya. Right click pastu pilih "copy image url". URL ni la yang nak dipaste ke dalam code html dalam ruang "url gambar disini"


Soalan 2 - Pergi ke tab edit html, sebelah compose. Paste je code yang yang ke dua tu kat situ. Kalau da masukkan url gambar, korang bleh g balik ke compose.


Kalau YanaMIB pejam mata jawab soalan aku, aku bersengkang mata nak buat tutorial ni.. Haha

SEMUA NI AKU BLAJA KAT SINI : BLOG TUTORIAL

UPDATE : ANDA BOLEH PASTE CODE NI SEBAGAI POST TEMPLATE. SUPAYA SETIAP ENTRI BARU YANG NAK DITAEP NANTI DAH ADA CODE NI. TAK PAYAH NAK BUKAK TUTORIAL NI TIAP KALI NAK COPY CODE..

SETTING > FORMATTING > POST TEMPLATE (paste kat sini)
------------------------------------------------------------------------------
Kalau ada yang tak paham kat mana-mana part sila tanye. First time buat tutorial ni. Takut ada yang tak paham. Atau kod yang aku bagi tu tak boleh gune. Korang pergi la ke link blog tutorial kat atas ni untuk copy code html


32 comments:

  1. aku pernah guna cara ni dlu
    tapi dah malas sebab banyak keje nak buat..
    huhu..
    ko mesti pro edit gamba an?
    share laa..
    :p

    ReplyDelete
  2. ssh nyer nk buat,hehe2...

    ReplyDelete
  3. mcm ezma gune classic editor.xreti nk gune modern template.so, ezma gune coding utk magnifying the picca..hehehe.. :D

    ReplyDelete
  4. sblm ni mmg nak wat. tapi x reti bila ikut step dr blog tutorial tu..
    hehe.. aku cb dulu, jadi ke x. he he

    ReplyDelete
  5. Wah, ada tutorial lg tak bang. Hehehe

    ReplyDelete
  6. byk nye step... memang tak menyempat la nieza nak wat... dah la slalu nak update entry pun laju2... curik mase... hoho...;D

    ReplyDelete
  7. taufiq : aku buat macam ni biar kurang berat blog ni klu letak bnyak gambar..

    senydream : xsusah la..senang je..cume banyak sket keje nak kene buat..

    ezmaliza : yang gune classic editor pon boleh gune magnify ni. gune coding blog jadi lmbat sket nak loading

    batu melukut : gune cuba jaya

    fatin : ye, adik nak tutorial ape lg dik?

    nieza : buat magnify ni kat rumah la..hehe

    ReplyDelete
  8. sesuai untuk blog2 photographer.. heheh..

    ReplyDelete
  9. kalau letak banyak gambar, memaang ringan skit eyh kalau guna benda ni?

    ReplyDelete
  10. wahh..serius smart..hehe...bguslaaa..suke la...nak try...eh...camne ek wat kotak2 taruk kod tu yer? nk tau la...sbb kat blog eqa taruk disable right click...tp part nak bg 'tutorial' ni...nak gune kotak cam kat atas tu xpandai...

    ReplyDelete
  11. thnx der, aku da try wat yang tukar post editor baru tu. selama ni pakai yang lama ja..huhu..besh2 yang baru. thnax gain!:P

    ReplyDelete
  12. yes! yes! dah berjaya buat!! yeahooo~ thank babe! suka! suka! *sambil lompat² kijang!* \(^_^)/

    ReplyDelete
  13. solihin : untuk blog yang banyak gambar pon sesuai..hehe

    taufiq : aku rase bile aku guna lagi laju..kalau gune coding besarkan gambar jadi lambat

    zuzu : nak tutorial letak kotak plak??nnt la aku tunjuk

    amalina : yang baru tu lagi senang kot..hehe

    yana : yiehaa!!igtkan tak paham...

    ReplyDelete
  14. caya la abg dean.. wat tuto la sakrg ni...

    tlg ajo budak new baby ni..
    x fhm la.. nak blajo face to face..
    baru faham.. hee

    ReplyDelete
  15. caya la abg dean.. wat tuto la sakrg ni...

    tlg ajo budak new baby ni..
    x fhm la.. nak blajo face to face..
    baru faham.. hee

    ReplyDelete
  16. aku rasa effort kau utk buat tutorial ni memang mantap gile..

    sebab.

    aku x faham apape.

    bukan salah tutorial.

    memang aku bukan student yang baik.


    aihh...~

    ReplyDelete
  17. LPLH : kalau ajo depan2 da kire tuisyen tu..kene cas ni..

    cik ungu : ce cite part mane kau xpaham...akan ku olah menggunakan daya imaginasi tahap ultra

    ReplyDelete
  18. nape komen aku sampai ade double ni..
    ish myuskilin...

    ReplyDelete
  19. LPLH : ko tamak dow

    lovelyfana : kalau xboleh cube amik code dari link BLOG TUTORIAL ye

    ReplyDelete
  20. nak guna ke tak?
    nak guna ke tak?
    aduih..
    konpiuss..

    ReplyDelete
  21. nazirah : sila la cuba..kalau tak boleh bagitau ye..

    taufiq : xyah la guna..lagi xkompius

    ReplyDelete
  22. tak trai buat pon lg yg ni nk trai wat sb byk lak stepnya..tp cntik lg sng nk zoom huhuh

    ReplyDelete
  23. efa : sikit je sebenarnya..campur dgn menjawab soalan tu yang jadi anjang..huhu

    ReplyDelete
  24. again~~
    failed ok!! adeiiii frust btol! :(
    pesal xde pn 'copy image URL' time right click kt 'original size' picca yg kte upload tuhh eyh??
    aiyakkkk~~

    ReplyDelete
  25. ahh sudah...boleh plak xde copy image url..cuba open in new tab..sabar2..jangan frust2..nanti cepat tua :P

    ReplyDelete
  26. thanks for this great tutorial!

    just nak tambah idea, kalau rasa cam payah je everytime nak copypaste code tu kat entry, try paste code tu kat bahagian
    settings > formatting > post template
    kalau nak code tu wujud everytime tulis entry.

    ReplyDelete
  27. i got it!!!! ^________^
    alhamdulillah~~ berjaya kowt!!!!
    finally..ehe :D
    thanxx cegu blogger!! tut0rial mmg mantappppp~~

    nway,yg hAwA ckp bleyh apply kt semua gmba each time kte upload lahh klu camtu eyh? lg senng kowt.tp blh kerr??

    ReplyDelete
  28. farah, cara hawa tu hanya tuk memastikan at least ada sesalinan code tu kat entry kita everytime kita nak wat entry baru, kot2 la terlupa mana sumbat salinan code tuk di-copy paste tu, kan...

    *faham ke ayat hawa yg berbelit ni? Sorry, tak reti nak cakap bagi clear macam tutor bertauliah. hehe*

    hawa dah try, and it works

    ReplyDelete
  29. hAwA : terima kasih atas cadangan hawa tu..paham maksud hawa tu..bile buat macam tu setiap entri baru yang kite nak post dah ada code html untuk magnify tu..xyah nak susah2 bukak tutorial untuk copy code..cume copy yang dah ada dalam post template tu..

    farah : cepat buat entri yang boleh magnify..nak tgk.. :)

    ReplyDelete
  30. kenapa ye, rase macam mls je nak buat.. huhu!

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...