hack image blogger anda dgn AJAX!


Demo (Single Image) : Click to View





Demo (Grouped Images) : Click to View

menarik bukan?

selalu kan nampak effect ni di mana2 website?

inilah yang dinamakan fungsi AJAX, tapi kali ni dipasang di blogger

terima kasih kepada encik pejal aka encik dekan or kaizer

kalau x kerana dia, lambat la saya nak realize kesyiokan AJAX nie

dia la yg beriye2 dulu suh saya try AJAX ni, bagi link tutorials apa sume

tapi time tu tgh study JSP, so kurang sket mood, cuma tgk gitu2 je

jom kita tgk apa yg bes sgt dgn benda nie!

bley blah ke xbley blah~

ok, antara kelemahan image yang diupload ke blogger ialah

apabila kita click, image tersebut akan dibuka di page yg sama

agak menyusahkan sbb paparan blog akan hilang & diganti dgn paparan image

mungkin ada alternatif seperti open link image tersebut in new tab/window

tapi cuba fikirkan in worst case scenario, di mana blog tu disable right-click

oleh kerana itu, kebanyakan users akan memilih utk tidak click pada image

xtau la korang, tapi saya mmg xkan click image, melainkan SANGAT penting

dengan adanya fungsi ni, users pasti x teragak2 nak click utk view image

selain tu, blog juga akan load dgn lebih pantas kerana kesemua image

telah ditetapkan pada saiz yang kecil

contohnya, korang hanya perlu pilih size thumbnail image sebagai “small”

tetapi bila users view image, ia akan dipaparkan mengikut saiz sebenar

selain tu, fungsi ni juga boleh link images dalam sesebuah entry menjadi satu

teruja x? teruja x? jom pasang!

ok, saya dah siap2 setting dah files nya. siap host dlm server sendiri tau

korang tinggal nak pasang je. bertuah punya budak. isk isk

masukkan code ni selepas tag <head> :

seterusnya, setiap kali selepas upload image di blogger :

1. pergi ke mode Edit HTML

2. edit code drpd onblur sehingga ke ”

kepada

rel=”lightbox”

3. edit url image dengan membuang -h

contohnya jika url image anda adalah seperti di bawah

http://bp2.blogger.com/…/s1600-h/Image.jpg

remove “-h” dalam “/s1600-h/” supaya menjadi /s1600/ sahaja

u’re done!



PERHATIAN!
PERHATIAN!

untuk single image cuma add rel=”lightbox”

untuk linked image, sila add rel=”lightbox[chokilala]“

chokilala tu contoh je, korang boleh guna apa2 word

yg penting xsama utk setiap entry

untuk add title, sila add title=”bla bla pok pek pok pek”

untuk add link, sila add rev=”http://chokilala.blogspot.com”

arghhh penatnya buat post nie! panjang sgt n byk kena explain

abes hilang tenaga batin i.. kuikui

sekian, terima kasih

Credits :

Fizz – sebab support host image kat server dia

Dynamic Drive – sebab celikkan mata saya psl AJAX

Ryehanna – sebab request nak tgk view menara drpd atas..

03
Aug 2008
POSTED BY chokilala
POSTED IN Tips & Tricks
DISCUSSION 19 Comments

19 Responses to : hack image blogger anda dgn AJAX!

  1. kaizer says:

    Cik chechoki..nape aku click die jadi force download.?adakah browser aku yang wat silap or ade bug disitu??huhu..yaa..tp jangan silap ek, ajax ni bukan new programming language..it's javascript & xml.. :D nak lagi menarik try r mootools ke..lagi de mcm2 bende menarik..

  2. kaizer says:

    perghh..sakit ati btol..pas submit comment, bleh plak tersembul pic tu..kan dah malu ni..eisk2..

  3. Ezany-Kun says:

    besh tp cam susah jer nak wat.. hehe
    nasib baik penerangan terpeinci.. thankz..

  4. Mr penyubiru says:

    wa..bagusnya n3 nie. rasa cam masuk kelas lah pulak.hehe.. btw, thanks for sharing this.ku x tau pun pasal ajax nie.

  5. shira says:

    wahh . pening sudah . HEHE ;P

  6. nur'ain says:

    choki, tenks kongsi dgn kami. saya dah cuba. tp knp tiap kali sy klik image tu, dia terus donlod dan bukan enlarge cam cik choki wat tu. uhuhu.

  7. Ryehanna says:

    Waaaa…terujanya aku melihat gambo2 dari atas menara Taming Sari itu… sian kat aku…bila la nk menjejakkan kaki ke bandaraya bersejarah tu.. huhu..

    ermm…cambest jer Ajax ni…nnt kalo free, mesti nak ditry…senangla org nak view mataku yang cantik.wakakaka…
    :P

  8. Aida Zahrol says:

    nape aida punya tade tulisan CLOSE X tu eyh? tapi menjadi la efek tu…huhu…best best

  9. Aida Zahrol says:

    dah jadi…hehe… tenkiu izah sayangggg!

  10. Cik Choki says:

    sayang? gelis i nyah~

  11. nur'ain says:

    cik choki! sblm sy aplod script ni ke googlepage, sy dh cuba server cik choki. but failed. n now it still failed.

    btw, thanks~

  12. Cik Choki says:

    im just wonderin’. kalau u tau server tu failed, kenapa xtanya? instead, u still placed those files into ur own server. failed jugak kan? there must be sumwhere, ada la pape yg xkena tu

    server tu okla, kalau x ok, kenapa dah ramai buat menjadi? xkan la saya nak publish benda yg xmenjadi dlm blog. sume benda kat blog ni saya dah try dulu kat dummy blog

    atau mungkin u letak dlm server sendiri, tp xubah path utk image whatsoever dlm js n css file

    cuba lagi. usaha eskalator kejayaan =P

  13. marzuki jalil says:

    nak pinjam tutorial ni buleh x? haha

  14. Cik Choki says:

    blogmenjerit, xleh. kalau nak, byr la. aku penat2 carik coding, test script nie, try n error sampai lebam, upload server sana sini kasik jadik

    last2 nanti ko gak yg dpt nama. tralalala~

    sila bagi credit yg sewajarnya sbb feature ni setting agak leceh. aku try n error byk kali utk integrate dgn blogger

    thanks

  15. dayah@yasha says:

    huhuhu..
    msyeh kat cik coki..
    pasal snggup kongsi ilmu2 nya…
    skang blog ku da ceria!!
    hehhee.. thannxx!!

  16. kaizer says:

    Huhu..nampaknye cik chechoki dah ramai pengaruh..dah ramai yang pki lightbox..hehe..

  17. tukiman says:

    paezah… x kuar pon gambar bile aku click?

  18. razifembi says:

    susahnya ….

  19. HafizAdam says:

    hush, kalo gune code chokilala menajdi tp kesian lak makan bandwidth org, so try upload kat server sendiri xleh plak..
    aiseh, kne adjust pape ke?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">