Gimana Cara Memasang Emoticon di Kotak Komentar?

Thursday, April 30, 2009

Posting ini atas rikwest dari Nona Itik dari Bali

Bagaimana cara memasang emoticon di kotak komentar? Tentunya sudah betebaran di mana mana tutorialnya. Hanya saja jeng itik pengen tau cara dari awal, soalnya biasanya di tutorial langsung di kasih javascriptnya.

Jadi caranya begini ya jeng (dan kawan kawan semuwah muwah)

Siapkan bahan bahan

  • Gambar emoticon , bisa googling atau nyomot dari blog saya wehehehe tetep aja promosi di cuteemoticon dan di emocutez
  • Harus punya account imagehosting misal, photobucket.com , imageshack.us , dan lain lain
  • Notepad ++ untuk edit javascriptnya, bisa di download di sini
Upload Gambar Emoticon
  • Upload semua gambar emoticon tadi ke imagehosting (misal photobucket)
  • Catatan : Di setiap emoticon yang diupload akan ada URL nya. URL inilah yang akan kita gunakan selanjutnya
Edit Javascript
  • Install terlebih dahulu Notepad ++ yang sudah di-download tadi
  • Gunakan javascript untuk emoticon, bisa di download di sini, download script emoticon
  • Buka script emoticon menggunakan Notepad ++
  • Di dalam script tersebut terdapat URL emoticon. Edit URL emoticon tersebut ganti dengan URL emoticon yang tadi sudah di upload di photobucket. Ganti kode emoticon sesuai keinginan (bisa dilihat di atas kotak komentar saya, ada kode di samping gambar emo nya)
  • Lakukan sampai semua emoticon selesai
  • Save hasil editan tersebut
Upload Javascript
  • Sebenarnya bisa saja menggunakan script tanpa di upload ke hostingan, tapi tentunya ini akan sangat puwanjang di kode HTML nantinya, dijamin mblekenek ruwet nglihatnya. Jadi lebih baik upload lah ke hosting lain
  • Upload script emoticon yang sudah di edit tadi ke file hosting misalnya fileave.com (Silahkan Googling sendiri, asal ga hotlink alias nebeng hosting orang lain, kesian kalau sampe bandwidth exceeded)

Edit Kode HTML Template

Langkah selanjutnya adalah meng-edit kode HTML template kita. Caranya? Silahkan di baca, banyak sekali tutorial bersliweran di search engine. Salah satunya bisa baca ini, Cara Memasang Emoticon di Kotak Komentar Yang perlu diperhatikan, ganti script dengan script upload-an tadi. Untuk url, ganti dengan url image kita. Kode emoticon dengan kode emoticon seperti di javascript.

Selamat berjuang.

You Might Also Like

121 comments

  1. @mbak bre: mbake dapet piring cantik
    @pencerah: biarkan semua dalam kegelapan...amiin

    ReplyDelete
  2. wess penak ki..gari donlod2..rak karo njlimet mikir.

    ganti emo po yo aku nyolong emomu bong?? :k:

    ReplyDelete
  3. @mbak bre: woooooooooooooooooooo.. yho sumonggo mbak e..bonus piring cantik wkwkwkwkw dan cebong cantik

    ReplyDelete
  4. @pencerah: mesti mau janjian ning cedak pos satpam yho kaliyan berduwa, kok barengan

    ReplyDelete
  5. @mbak bre: loh ya jangan, ngko nek diriku kudanan piye? (cebong kok wedi banyu)

    ReplyDelete
  6. Anehnya gak jalan di templateku gan..eh bong..sori kelamaan ngaskus jadi ngomong juragan terus..kenapa ya?

    ReplyDelete
  7. Salutttt,
    meski buanyak tips2 kaya gini, tapi mba'e nyajiinya njrimet, cerdas, cermat, terampil, taqwa
    ( kemutan mbiyen maca nang dabag SD nganti apal golepal,hehe )

    ReplyDelete
  8. Salutan ke 3
    ( ws lah, ngirit go liane maning )

    ReplyDelete
  9. @lookj: wekekekeke hasil di luar tanggung jawab sayah
    @mbak bre: ck ck ck mbak bre, sampun dalu loh..mengko mundak di grebek
    @chuanx:hayah... dan hafal Pancasila juga :k:

    ReplyDelete
  10. @chuanx: sendalmu ketinggalan ki loh

    ReplyDelete
  11. sip mbak..
    ntar kapan-kapan saya coba he..he..

    ReplyDelete
  12. emoticon iku apa ce bong
    bisa di maem gak bong?

    ReplyDelete
  13. @eros: ndak usah ekting we, g ekting wes ketoro loh wkkwkwkwkww
    @hryh77:wiw buat emoticon kok coba coba :f:

    ReplyDelete
  14. bong..pas mbiyen aku pertama masang emo akeh seng takon carane nggawe..

    lha berhubung, awakku rak puiinnterr dadi guru ngeblog koyo koe *ngeleess dibalang sendale Chuanx* mengko seng takon tak kon rene wae yoo...

    *balik siskampling sek* (mosok hansip digerebek)
    :l: sesuk meneh..

    ReplyDelete
  15. Mba' le mbalikin sandal ketuker satu. yang satu mana!?

    mba: buatin emotion polah cebong dong.. unik yakin sumpah lah.

    nb: mba' ngcilin font komen blogku piye? ajarin. masa kudu puasa dulu?

    wis lah, kabuurrr...
    *wedi dibrengkolang sandal gapyak, parah*

    ReplyDelete
  16. @mbak bre: wkwkwkkwkwkw alibimuuuuuuuuuuu, mosok posting penutupe ngunu wkkwkwkw
    @chuankxq: yho diguleki bagian .comment-body{

    font-size: dignti piro 11px opo 10px

    ReplyDelete
  17. @mochal: nongol...padal belum bakar kemenyan loh :f:

    ReplyDelete
  18. Yups, kesewun mba. nek kaya kie kan turune bisa ayem, dadi ngiler loss...
    apa arep janjian, ngimpine mbae rep opo, tek tunggu ng pengkolan go pit onta, hikhik.

    Mba' takokno brencia jajal, mbok sandale kleru.

    ReplyDelete
  19. Pertamaaaaaaa.....!!

    Postingane bikin mumet, aku ora mudeng.
    Sik aku tak njajal takon Si Momo, iso po ora dek-e??

    Mbak Nurhalizah, carane mbales koment piye??
    Mosok komen-e Momo ra di bales, koyo blog suwung ae...
    Bales donk...

    ReplyDelete
  20. :d:

    akhirnya, emoticon di kotak komentar di posting juga tutorialnya.. heu heu

    makasih mbak ebong....

    ReplyDelete
  21. ouh gitu ya caranya,
    mau coba ah,

    emoticonnya ada yang bagus ngga, bentar ya aku kunjungi blog mba yang lain dulu

    ReplyDelete
  22. Mbak Bong...yahhh aku kok malah ketiduran waktu lihat postingan pertama ini

    lah gpp..jan trimakasih
    matur tengkyu
    sik tak cobain
    jan mbak Bong okey tenan

    sip...

    ReplyDelete
  23. satu lagi mbak..
    Kalo kita sudah edit Javascript dengan url emoticon kita
    trus upload ke hosting.

    buat kodenya untuk masing2 emoticon itu sesukanya kita ya??

    ReplyDelete
  24. kal0 it0 biasa mbk,
    wekekeke,
    bisa gag kal0 em0tic0nya di k0l0m k0mentar nt0e g usah c0pas c0de smpingx, jadi langsung di ceklik, is0k gag?

    ReplyDelete
  25. @haqie: durung iso, trus dirimu iso?
    @itik: yupp, sesukanyah
    @antaresa: silahkan
    @neilhoja:langkah selanjutnya silahkan googling hehehe
    @semut: heleh cerewet sekali dikau, ning omah adoh soko warnet
    @chuanx:yui cumi cumi

    ReplyDelete
  26. kalo pake emoticon dari plurk bisa gag? :D

    ReplyDelete
  27. ngak tau bong... diriku kan gaptek

    ReplyDelete
  28. wahhh
    sep neh
    kapan-kapan aku coba yaaa
    tengkyu mbak Cebong...

    ReplyDelete
  29. weww...lengkap banet mbak bong...

    soale aku make emo juga tapi nggak berfungsi...ternyata karena masalah script yah...soale aku denger katanya masalah template yang nggak kompetibel...

    ReplyDelete
  30. @zujoe: g ada template yg g kompatibel, kecuali ada kode yg kehapus. Masalah utama hosting script yg nebeng , jadi kelebihan beban. Script jadi ga fungsi
    @rusa: hoOh gambar rusa ntar ya
    @suwung:wes ekting ae
    @mila: semua bisa, itu tadi cuman langkahnya aja

    ReplyDelete
  31. mumet saya, minum panadol dulu...

    ReplyDelete
  32. waduw downlot template yang langsung ada emoticonnya aja.. ato langsung ke emocoutez

    ReplyDelete
  33. Nah.. ini, very nice tutorial Mba. Thanks for share it, kapan2 nyoba.

    ReplyDelete
  34. :a: gara2 javascript ini nih, saya sempet pusing....... what u call in English mumet miss Bong?

    ReplyDelete
  35. :a: :b: :c; :d: :e: :f:

    :g: :h: :j: :k: :l:

    :m: :n:

    ReplyDelete
  36. hehehehe....salah ini :c:...
    makasih mbak bong infonya......

    ReplyDelete
  37. Kereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeennnnn...Makin mantap aja neh :c:

    ReplyDelete
  38. oh, cebong yang baik hati...

    omahe dicet meneh cah, apik bong...

    ReplyDelete
  39. *mampir bar siskamplingan*ki bong sendale chuank..*mbalang sendal*aku meh nggawe postingan tandingane iki aah...

    *angop, turu meneh*

    ReplyDelete
  40. iki blogmu to nang? tak sawang2 kok fotone ora asing...

    ReplyDelete
  41. Emot2 pilihanmu iki lho jian nggemesi tenan :f:

    ReplyDelete
  42. Wihihihiy,,,, coba deh.....
    ebong templatenya bagus,,, cerah gitu... :d:

    ReplyDelete
  43. Wow, tips nya mantap :j:
    Design blognya keren nih

    Salam kenal...

    ReplyDelete
  44. Mantap bong...kebetulan lagi mau bikin emoticon sendiri...btw, emang harus di photobucket? Kalo di upload di blogspot gambar emoticonna bisa kan?

    ReplyDelete
  45. weh aku wingi rikues langsung digawekke ki.
    hahhaa...

    *ra masalah jenengku ra ono*
    hahaha..

    ReplyDelete
  46. betewe isih ono sing ngundang 'mas' ora
    :h:

    ReplyDelete
  47. @aprie: hyakayakaa isek onok huh... halah GR
    @fuji: di blogspot, kan g bisa gerak animasinya
    @suwahadi: makasi mas
    @deta;eheyheyee kemana ajaah
    @rozy:youp
    @goenrock:ekekkeke lah kan sesuai dg kepribadianku

    ReplyDelete
  48. @hendra"halah salah omah we
    @mbak bre:wkakakkakakakak dasar
    @grubik:hula halou brik..piye kebomu

    ReplyDelete
  49. makanya tAnya sampean, cpeg dweh

    ReplyDelete
  50. berarti boleh mesan emoticon nih.. heheheheheh.. pengen pasang but bingung pasang yang mana.. sapa tahu di blognya yang baru ada emoticon for man.. xixixixixix.. kayak shampoo aja for man for man :-)

    ReplyDelete
  51. @haqie: :e: belom support iframe nya komennya blogger, ada juga yg pke klik copast
    @ifoell:heyeh kan itu ada cowoknya

    ReplyDelete
  52. emang emo ituu indah ya bong... *ngelus sirahe ebong* (wes kramas rung to bong?)

    ReplyDelete
  53. kok aku ga ngerti ya bong... pusing... mending ga usah deh...;(

    ReplyDelete
  54. Wah setuju buat usulan emotion cebong.. Mîsal, cebong bengong, cebong nungging, cebong ngamuk.. Wkwkwkwk...

    ReplyDelete
  55. @anno:makanyak pake ekekkekek
    @mbak bre: sangad mbak bre (ngelus peyut e mbak bre) wes 24 ulan kok ndak laer2
    @ducky:dicoba aja
    @manohara:hayah bunda kwkwkwkwkw

    ReplyDelete
  56. mbak bong aq udah download notepad ++ tp pas mau diinstall kok tulisannya error.... apa ada yg salahkah????

    ReplyDelete
  57. @viethrre:wew, error apa keterangannya? hehehhe

    ReplyDelete
  58. jadi pas udah aq download mbak trus aq klik yak.... eh tulisannya NSIS Error sampe bingung aq.....

    ReplyDelete
  59. @viethree:oooo, belum pernah nemu error ky gtu soalnya vit, humm...ya notepad++ ini yg paling enteng kl buat ngedit2 semacem basa pemrograman itu. Mungkin download nya belum full, udah 1.9Mb blum?

    ReplyDelete
  60. udah mbak bong udah full sefull-fullnya....

    hiks palingan emang gak diijinin kali yak..... :i:

    kalau seandainya gak make notepad++ bisa gak mbak??? kan aq udah daftar di photobucket.com nah terus emoticon dari mbak bong udah aq upload disono, nah kalau gak make notepad ++ bisa gak mbak bong yg muanisss :h:

    ReplyDelete
  61. @viethree: huehuehue lah masalahnya ngedit javascriptnya itu loh, coba deh program laen, Javascript editor software gituh...

    ReplyDelete
  62. oalah mbak gak ngerti aq.... hiks-hiks :i:

    kapan2 ae wes ta'cobake maneh..... mumet ndasku, wis mumet malah tambah mumet.... ta'turu ae mbak, ngademno pikiran.... huwekekekekekek

    ReplyDelete
  63. kalau boleh tahu, gimana ya caranya agar nick qita di shoutbox jadi berlink?
    makasih ya

    ReplyDelete
  64. @vie three: heuheue melbu kulkas nuh
    @vyna: di website nya kamu isi dengan url blog kamu

    ReplyDelete
  65. mbak bong aq sektas ae singgah nang blog'e pean sing situk'e, ealah tulisane bahasa ngendi iku gak ngerti kabeh aq :d:

    wes kah aq ngimpi maneh ae, iki nulis koment karo ngelindur iki..... :c:

    kapan2 ta'lanjutno maneh ngurusi emoticon2 iki wes.....

    ReplyDelete
  66. @viethree: wkwkwkwk boso amphibi...semangad :e:

    ReplyDelete
  67. eh mbak aq mbalik maneh nangkene, masih penasaran ikih..... aq mau tanya mbak kalau pake emoticon ntu ngeberatin blog ora???

    ReplyDelete
  68. makasih tutorial nua...heehee....:c:

    ReplyDelete
  69. @vie three: enggak, biasa aja sih kan enteng kok js nya, gmbrnya jg cuman seuprit
    @madan: sama2

    ReplyDelete
  70. kolom komentarnya bisa jadi lebih hidup dengan emotion,, thanks ilmunya

    ReplyDelete
  71. mantap kang.....http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif

    ReplyDelete
  72. mbak, saya udah mau, tpi kok displaynya gambar serta kodenya ga muncul di atas kotak komentar yak, yg kek diatatas ini :i:

    ReplyDelete
  73. @moccachi:hayoo..udah bener belum nempatin kodenya... xixiixixix..di cek lagi ya

    ReplyDelete
  74. udah nemu mbak, ga jadi. hiiiii thanks inponya, keren sekali.akhirnya bisa bikin tanpa nyuruh si kucing garong :h:

    ReplyDelete
  75. eh iya mbak, salah nempatin hiiiii

    ReplyDelete
  76. ribet juga ternyata... tp thx y info nya :D

    ReplyDelete
  77. leh tnya g ? q setting koment udah di semat d bawah entri ! tpi knpa ga muncul wktu q coba ? tlong jwab d blogq atau d shoutbox pnyaq ! thanks

    ReplyDelete
  78. mbak bong.... PENTING!!!! tolong dijawab..... akhirnya aq bisa masang emo di blogku, tp ternyata saat aq koment tidak bisa keluar emonya mbak.... dan itu dikarenakan ada highlight author koment. Nah bagaimana caranya emo itu muncul pas pemilik blog koment tp tetap ada highlight author komentnya mbak..... PLIZ HELP ME!!!! :a:

    ReplyDelete
  79. mbak bong tulung..... aq udah bisa masang emonya tuch di blog tp kok pas yg aq sendiri yg koment, gambar emonya gak keluar nah kalau orang laen yg koment bisa emonya.... kenapa ya mbak???? :a:

    padahal highlight author commentnya udah aq hapus tuch..... :b:

    ReplyDelete
  80. mbak bong udah-udah selesai mbak, ternyata emang permasalahannya ada lah highlight author comment, asyiiikkkkkk udah bisa masang emo niy aq..... :j:

    ReplyDelete
  81. di blogku juga ada tutorialnya sob,tapi di blogku pake onion head dan lebih lengkap,mampir aja

    ReplyDelete
  82. I did it, I did it :k:
    Makasih ya mbak totu dan emotnya :h:

    ReplyDelete
  83. tips nya bagus.. nyobain ah.. :h:

    ReplyDelete
  84. hehehe jangan sia2 kan kesempatan ..langsung k TKP plus praktek....awas ya klo g berfungsi hehehe
    numpang baca ya salam kenal aja

    ReplyDelete
  85. This comment has been removed by the author.

    ReplyDelete
  86. udh ada yg coba blm..
    sumpah bong, binun aq..:b:
    ksih tutor brgambar dumz bong...:a:

    ReplyDelete
  87. Mbak Cebong kerrreeen!! Aku Berhasil! Aku ijin pake emoticon kamu ya :d: kapan2 aku juga pake cute emoticon dari emocutez buat variasi :h:

    ReplyDelete
  88. This comment has been removed by the author.

    ReplyDelete
  89. This comment has been removed by the author.

    ReplyDelete
  90. emoticon bikin blog menjadi hidup lebih hidup :D

    ReplyDelete
  91. Mba Ebong, sorry banget, aku ngambil scriptnya emang dari mbak Ebong, waktu itu aku udah sebutin sumbernya di blogku yang ini

    http://tutorial-words.blogspot.com/2009/11/how-to-put-cute-emoticon-above-comment.html

    aku juga ga instruksinya tak suruh hosting sendiri..
    aku juga udah mikir begitu mbak..
    tapi itu temenku minta di posting persis kaya punyaku...
    waah...aku jadi bingung..
    wis tak delete aja postingan itu..
    wong blogku bukan blog tutorial

    sorry banget ya mbak
    aku ga bermaksud untuk umum
    maksudku untuk pribadi..

    ReplyDelete
  92. :a: haduhhh.... aku gak mudeng mbak... lha wong penjelasane gak patih jlentreh.. gak jelas.....

    ReplyDelete
  93. tes ya mbak bong...oya makasih loh template2 nya...woke2 tenan. aq dah ngefans bgt dr dl, tp baru sempet kasih komen skrg. matur nuwun ya :h:

    ReplyDelete
  94. kak aq blh mnta emotionnya gx ??
    simple bgt...:d:

    ReplyDelete
  95. guoweigang More often than not, even pandora bracelets sale the kind of material used for the jewelry is also diverse. Most necklaces are normally made from silver or gold, but there are others that use leather or even bones and shells.Other necklaces contain precious stones, most commonly diamond, similar to discount pandora bracelets what rap stars usually wear. Among these so called "bling" the most common design is usually the cross.Aside from the obvious fashion purposes, these cross pandora jewerly necklaces can mean so much more depending on the personal faith of the wearer.Pretty much, cross necklaces can either be worn to symbolize faith pandora 2010 or plainly as a fashion statement. They can showcase the personal faith of the wearer. There are plenty of sites online as well as stores offline that can help you find the right men's cross necklaces to wear for yourself or to give away to male friend or lover.

    ReplyDelete
  96. eh, ternyata ada di sini... hehehe jadi malooo :f:
    tadi udah teriak2 memelas di shoutmix n komen... wkakakakak!! makacih , Bu Ipit!! mo dicobain ahhhh!!

    ReplyDelete
  97. btw, untuk format blogspot bisa gak, Bu??

    ReplyDelete
  98. ngubah script di xml-nya gimana???
    Informasi tutorial ini ilang separo kayaknya??
    aku udah upload javascriptku, lalu loncat ke edit template, nah..masukin kode javascript-nya di sebelah mana, Jeng?? :a:

    sutress...

    ReplyDelete
  99. mbak ipiet..aku udah sampe tahap emotnya muncul di bawah kotak komen, tapi begitu dites, gak muncul... :a:

    apa ada yang salah sama uploadan javascript saya ya??

    saya paham, emang kurang ajar orang2 yang maen comot dari uploadan javascript punya mbak tanpa izin (saya liat ada beberapa blog yang nyolong js.-nya si mbak):e:
    makanya saya mah maunya ngambil dari javascript hasil keringet sendiri. tapi masih gagal.. tolong liatin dong..di mana salahnya..nti kukirim vie email yah :c: plis mbak, da geulis.. :d: hehehe

    ReplyDelete
  100. @muxlimo: kirim emailnya ke cebong.ipit@gmail.com ya
    heehehehhe jarang nengokin blog saya mah

    ReplyDelete
  101. upload scriptnya kalo sekarang rada susah sih, coba deh cari file hosting gratisan ehehehehe

    ReplyDelete
  102. @Mbak Ipiet: makasih udah sempetin nengok blog cakadut sayah, hehehe

    oke, alamat emailnya langsung dicatet :d:
    Oh. yang fileave udah gak jalan ya?! padahal baru aja bikin akun di situ.

    btw, mohon ampun beribu ampun, Mbakyu ne.. kemaren karena ngebet pengen pake emots, kepaksa deh sementara ini nyomot punya Mbak dari situs orang ...

    *kalo jadi orang gaptek susah dan nyusahin orang ya... jadi maloo :a:

    semoga ilmu si Mbak makin bertambah dengan berbagi, juga rezekinya bertambah. Amin. (dengan berbagi sekian persen ke sayah juga, gak?! :f:)
    Oke Mbak, makacih n suxes yahhh :d:

    ReplyDelete
  103. wah ni blog paling keren yang pernah saya kunjungi,,,,simplify,,elegan,,
    nice posting,,,niy saya cari dari dulu,,
    maklum masih newbie lagi belajar,,,, :c:

    ReplyDelete