Posted on

Cara membuat photo tagging di blog dan website

alt

Salah satu fungsi cool yang ada pada facebook ialah photo tagging, di mana kita boleh tanda nama orang pada gambar. Senang dan sangat convenient, walaupun kadang kala fungsi photo tagging tu disalah guna untuk tag pada gambar mengarut.

Kalau kat blog pula saya biasa tengok orang akan list satu persatu yang ada dalam gambar. Contohnya, dari sebelah kanan ialah @einztrigger, diikuti @fullfilth @eenrockstar dan seterusnya. Kalau yang dalam gambar tu 10 orang je takpe lagi nak mention satu persatu tapi kalau 20,30 atau lebih takkan nak mention semua kan?

Tutorial ini akan memberitahu beberapa cara untuk membuat photo tagging pada  blog dan website anda. Lepas ini boleh tag gambar ramai2 ya, boleh try hover pada gambar di atas sebagai demo.

1. Picmeleo Alive

picmeleo alive[11]

Picmeleo alive (link) membolehkan anda upload gambar ke dalam app picmeleo kemudian boleh add bubbles atau annotations pada gambar tersebut. Gambar pertama dalam entri ini adalah dibuat menggunakan picmeleo.

Apa yang best mengenai picmeleo;

– Senang gila nak guna

– Boleh embed di mana-mana website dan blog dengan html code

Apa yang kurang best;

– Menggunakan Adobe Flash; pengguna iphone/itouch/ipad tidak boleh tengok

– Gambar besar akan dicompress dan kualiti gambar akan dikurangkan sedikit

2. ImgNote WordPress Plugin

imgnote

ImgNote ialah plugin wordpress untuk menambahkan nota atau annotation pada gambar. Cara menggunakannya juga agak mudah, hanya perlu download dan install plugin pada wordpress. Kemudian masuk dashboard wordpress > edit posts > dan tekan pada butang edit image notes.

Download ImgNote.

3. Demon Image Annotations

demon image annotations

Fungsi lebih kurang sama dengan ImgNote, iaitu menambah annotations pada gambar. Ianya menggunakan Jquery plugin dan bukannya Adobe Flash jadi hasilnya lebih mantap dan laju. Interface lebih menarik berbanding ImgNote.

BACA :  Belajar bina website dan PHP dari Zero to Hero Batch 2

Download Demon Image Annotations.

4. Jquery Photo Tag Plugin

jquery photo tag plugin

Jika anda web developer, anda boleh gunakan Jquery Photo Tag plugin ini dan integrasikan di website anda.

Plugin Demon Image Annotation wordpress adalah dibuat berdasarkan Jquery Photo Tag Plugin.

Plugin ini sangat cool sebab anda boleh remove tag.

Tutorial untuk menggunakan plugin ini di website anda: http://karlmendes.com/2010/07/jquery-photo-tag-plugin/

5. Img Notes JQuery Plugin

img notes wordpress plugin

Plugin Imgnote wordpress adalah dibina berdasarkan plugin asal Jquery Img Notes.


Saya harap ramai blogger dan web developer dapat sedikit inspirasi daripada artikel ini. Serius bagi saya photo tagging sangat perlu dan cool, lebih2 lagi kepada photo blogger.

 

Dah lama tak tulis artikel mengenai html, website dll ini. Biasanya saya belajar benda2 macam ini hanya ketika idea muncul tiba-tiba. Memang niat nak tulis tu ada tapi kadang2 idea tak ada susah juga.


RELATED POSTS

28 thoughts on “Cara membuat photo tagging di blog dan website

  1. tak tau pulak boleh tag jugak..smart2 :whistle:

    1. Actually some of the plugins tu aku da lama tau cuma baru hari ni tergerak nak buat tutorial…hehehe

  2. nice. eh tag la anak kak mel skali haha

    1. Nak tag td tp xtau nama 😛

      1. anak kak mel yg girl tu twitter name @erynazu 😀

        1. Wowowow kecik2 da ada akaun twitter…hebat

  3. […] This post was mentioned on Twitter by Oh! Media Network, einztrigger. einztrigger said: Jom belajar cara nak tag gambar cam facebook di blog dan website… http://fb.me/M9Pqc4Yr […]

  4. menarik gak nih..tak sangka kat blog pon leh tag gambar..hehhehee..menarik 🙂

  5. Nice tutorial .. mmg byk plugin boleh guna utk tag photo ni.
    Gambar reramai kat atas tu yg mahal tu 😀

    1. a’ah gambar tu yg mahal tu. sbb ada julia kan kan? 😛

  6. like……. bookmarks utk masa depan
    terimakasih

  7. thanks bro. menda baru nih. bagi aku la. pucuk dicita ulam mendatang huuhu

    akan aku sebarkan 😉

  8. wahh smart la lepas ni
    boleh tag gambar kat blog

  9. Inilah keindahan & kemudahan menggunakan WordPress…biar plug-in yg melakukan segalanya. hehe ;p

  10. Waa siap kena mention lg tu.. JQuery ni tpnya kena site yg self hostedkan. Yg free2 mcm Blogger x boleh pakai JQuery kan?

  11. awat gambar atas sekali tu gegar… tukang amik gambar lapar xmakan McD lagi ke masa tu?

    1. Gegar sikit, sbb tukang amek gambar pegang byk sangat kamera 😀

  12. wah smart2… thank u bro…

  13. memang coolla imad…

    thanx 4 sharing mad…
    mat cool..mat cool..kawanku..hehehe

  14. File2 js boleh host kat google sites 🙂

  15. macam sempoi je.. wajib try nie.. he eh eh..

  16. best plak dengan picmeleo tu.

    haha~ :biggrin:

  17. Tak sangka lak blog pun da boleh wat cam facebook tag2 gambar ni..

  18. Style la.. malas plak nak try.. hehe

  19. menarik..dalam blog boleh main tag3..
    bookmark dulu, mana taw boleh interview admin jomphp..ngeh3..

  20. untuk Picmeleo Alive lpas kte da msuk gmbr da save tp lngkah strusny ap ek…sy msh xtau lg step2 tok tag gmbr sy kt face book dgn gne app ni :blush:

  21. sudah cuba imgnote dan demon image annotation, tapi dua-dua pun tidak menjadi. yang imgnote tu boleh pakai, tapi image kena betul-betul rezise ikut theme kita. kalau image saiz besar dan kita guna tag width=”100%”, dia cuma paparkan separuh gambar tu sahaja.

    1. Well, terpaksa la ko resize image biar masuk ngan theme…baru try imgnote or demon image annotation…

      kalau faham javascript cuba try edit yg asal 🙂

Tinggalkan komen anda