April 23, 2013

Update!!! Cara Membuat Emoticon Di Kotak Komentar



Melihat banyaknya pertanyaan yang disampaikan kepada admin blog, yang mengatakan bahwa kode emoticon sebelumnya tidak berhasil diterapkan, maka saya sengaja membuat sebuah postingan baru guna mengakomodir permintaan teman-teman.

Untuk tutorial cara membuat emoticon kali ini sudah saya lakukan tes, work, dan contohnya bisa dilihat disini, sehingga postingan ini sekaligus menjadi pengganti dari postingan sebelumnya. Saya katakan ini sebagai tutorial pengganti, mengapa??? Karena, baik visual dari hasilnya maupun implementasi tutorialnya pun akan berbeda dengan postingan terdahulu.

Ok, langsung saja buka editor template temen-temen dan kemudian cari kode </body> lalu letakkan kode berikut ini diatas nya :

<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}

img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}

input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = false;
//]]>
</script>
<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' 
type='text/javascript'></script>

Setelah itu, simpan template temen-temen dan lihat hasilnya. Untuk membuat emoticon tersebut tampil pada komentar, lakukan klik pada salah satu emoticon lalu copy paste pada kotak komentar.

Terima kasih dan semoga bermanfaat...

Tips 1 :Untuk emoticon alternatif dengan tambahan beberapa emoticon seperti pada postingan sebelumnya, dapat mengganti kode berwarna ungu, dengan kode berikut :

<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj-new.js'  type='text/javascript'></script>
Tips 2 :Untuk membuat emoticon muncul di dalam postingan/artikel tambahkan kode  "div.post-body, div.post-body span" pada bagian "var emoRange".

Thanks to : Mas Taufik & Forum MT5

123 comments

  1. wah..dulu saya pernah makai emo spt ini mbak. tp kemudian ganti yg sekarang. lbh genit kyk nya..heheheh

    ReplyDelete
    Replies
    1. :D iya emang emot yang ada di blog nya mba genit, bukan cuma genit tapi juga centil...hehehe... **p

      Delete
  2. nambah berat loading blog gak Mba Bro?
    ditunggu followbacknya Mba Bro

    ReplyDelete
    Replies
    1. relatif gan, coba aja sebelum dan sesudah menggunakan emo nya berapa berat blog agan...

      Delete
  3. Kunjungan perdana di blog Ungu yang keren ni. He. Rupanya ada link anaa disidebar samping ya?

    Umumx scriptx sama hanya emoticonsx yang berbeda-beda ya mbak atau adik Alya ni?

    ReplyDelete
    Replies
    1. \o/ terima kasih mba apresiasinya :D...kebanyakan memang seperti itu script nya pada dasarnya sama, hanya gambar emo nya saja yang berbeda...

      Delete
    2. keren emotnya.

      ane juga make yg begituan, scriptnya dari MKR tapi emotnya ane rubah onion.

      Delete
  4. Could not load template preview: Error parsing XML, line 2455, column 71: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    gimana nih gan. ~x(
    Udah di otak-atik dikit masih tetep :p

    ReplyDelete
    Replies
    1. seharusnya ga ada masalah sih gan kalo kode diatas di copas ke template nya, karena kode nya udah saya tes, tapi melihat pemberitahuannya sih tag script nya di template agan belum ditutup misalnya <script type='text/javascript'>.......... harus ditutup dengan kode </script> kurang lebih seperti itu... :D

      Delete
  5. ini nih yang di cari, thanks infony mb..

    ReplyDelete
  6. punya ane gag mau muncul gan,,,,
    kira-kira apa ya masalahnya,,,,,
    mohon pencerahannya,,,
    terimakasih :'( :'( :'( :'(

    ReplyDelete
    Replies
    1. coba tambahkan script ini <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/> diatas </head>

      Delete
  7. Perkenalkan gan, saya Marlon Alamo. Follower AIIZAHH ke 163.
    Kemarin saya sudah pasang LINK, Banner agan. Mohon diCheck.Ada di Footer Widget (Friends Links) & (Friends Banners. :-bd
    Emoticon Kotak komentar blog saya juga nggak bisa gan, Mohon bantuan agan.Terima kasih. :'(

    ReplyDelete
    Replies
    1. :-bd terima kasih gan, saya juga sudah follow blog nya agan, emo nya yg ga bisa pake tutor di postingan ini kah?
      kalo bukan, agan pake saja yang ini sudah saya tes dan work kok...

      Delete
  8. Oh ya gan, Ini blog saya. Mohon pencerahan... =p*
    http://onlineprivates.blogspot.com/2012/12/enam-hal-cowok-yang-disukai-cewek.html

    ReplyDelete
  9. Terima kasih mbak sudah bermain dan follow blog saya..dan sudah saya follow back juga..

    saya akan sering2 bermain di sini..masih banyak ilmu blog yang saya belum tau..

    salam kenal ^^

    ReplyDelete
    Replies
    1. terima kasih mba, salam kenal juga... :)

      Delete
  10. makasih banyakk saya langsung coba yaahhh :-bd

    ReplyDelete
  11. berhasil sist,,tapi kok ga tanda : (misal :cry langsung cry)
    jadi bingung saya,,

    ReplyDelete
    Replies
    1. iya memang saya bikin tidak seperti emot kebanyakan yang menggunakan tanda ":" tidak ada alasan khusus gan...

      Delete
  12. tanks yeeeeeeeeaa informasinya....
    jangan lupa kunjungi blog saya uga yeaa....
    adiseti-awan.blogspot.com

    ReplyDelete
  13. sist..
    tolongin ane,,kenapa tu emot letaknya di bawah form coment..??harusnya kan diatas-nya :-a ...ini link-nya gan...
    http://rivaledogawa.blogspot.com/

    pleasee gan.. :'(

    ReplyDelete
    Replies
    1. sepertinya sama dengan kondisi pesan komentar yang berada dibawah form komentar gan, 0:) coba agan cari kode : <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
      dan tambahkan kode <div id='form-wrapper'> diatasnya dan kode </div> dibawahnya...
      lalu cari kode <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
      dan tambahkan kode <div id='form-wrapper'> diatasnya dan kode </div> dibawahnya...
      terakhir, cari kode : document.getElementById(domId).insertBefore(replybox, null); dan ganti dengan kode : document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);
      semoga membantu... :-bd :-bd :-bd

      Delete
    2. Berhasil sist...
      terimakasih banyaaaaakk.... \o/

      Delete
    3. numpangn nanya,
      kalau sudah kyak gni trus cara nyobanya gmna?(codenya)
      http://1shared4all.blogspot.com/2013/08/hit-counter.html?showComment=1375541872160

      Delete
    4. krim ke kotak comentnya postan sya mbak,
      kalau bisa sekalian caranya(cara yg kalu di klik emoticonnya baru bisa muncul cosenya) pleased

      Delete
    5. Blog telah dihapus

      Maaf, blog di 1shared4all.blogspot.com telah dihapus. Alamat ini tidak tersedia untuk blog baru.

      Apa harusnya blog Anda ada di sini? Bacalah: 'Saya tidak bisa menemukan blog saya di Web, jadi ada di mana?'

      Delete
  14. pengen juga pasang emotion do blogku tapi npa ndh bisa ya???

    ReplyDelete
  15. http://reader-download.googlecode.com/svn/trunk/images/emo/topmarkotop.gif

    ReplyDelete
  16. pengen banget saya masang emot ini di blog saya. tapi semenjak fitur edit html diperbarui, saya kesulitan menemukan kode-kode tertentu, bahkan /body aja gak ketemu. :(

    ReplyDelete
    Replies
    1. kalau kode itu biasanya ada paling bawah mba seperti ini : A-B-C-D

      </body>
      </html>
      di scroll aja sampe bawah...

      Delete
  17. mumpung ngk ada kliah saya mampir dulu mbak hehehe kunjungan pagi saya mau nyoba nie emoctionya dulu... shake

    ReplyDelete
    Replies
    1. wah terima kasih sudah mau mapir gan... pleased

      Delete
  18. siistt,, kok emot yang terakhir ilang (wind) huhhh

    cek http://rivaledogawa.blogspot.com/
    suerr,,ane bukan nyari visitor.. order

    ReplyDelete
    Replies
    1. ok, sudah diperbaiki gan...
      terima kasih info nya... pleased

      Delete
  19. gan ane udah coba tips di atas ko g nongol ya spoiled

    ReplyDelete
    Replies
    1. =p* hmm...coba tambahkan ini diatas </head>:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

      Delete
  20. emoticon yang sebelumnya bisa diperbaiki ga? bagusan yang sebelumnya

    ReplyDelete
    Replies
    1. =p* sebenarnya ini "perampingan" dari emot sebelumnya karena terlalu campur baur kayaknya... spoiled tp insya Allah kalau ada waktu saya akan tambahkan emot di postingan sebelumnya...

      Delete
    2. sip deh min, ditunggu yaa pleased

      Delete
    3. sudah saya perbaharui silahkan dicek gan...

      Delete
  21. keren gan, ijin bookmark dolo... happy

    ReplyDelete
  22. Permisi Sob...gambar emoticonnya kok gak bisa di klik (sudah di klik tapi tidak keluar kodenya ) huhhh

    Coba lihat deden-winanto.blogspot.com ----Please bantuannya

    ReplyDelete
    Replies
    1. jquery nya ada dua gan, hapus salah satu <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'>

      gunakan yg versi terbaru saja gan...

      Delete
    2. Alhamdullilah Berhasil happy

      Delete
  23. jangan mau blog http://tilla-shop[dot]blogspot[dot]com penipu,scam dan spammer sejati

    ReplyDelete
  24. mantab nih emonye, please visit back
    seklian follow blog ane

    ReplyDelete
  25. aku kok g bisa sih mbak spoiled
    mohon pencerahan nya
    terimakasih huhhh

    ReplyDelete
    Replies
    1. saya liat mba emang belum memasukkan kode2 nya, coba masukkan dulu kode2 nya diatas kode </body> dan masukkan juga jquery : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'>

      Delete
  26. Kesalahan saat mengurai XML, baris 26, kolom 3: The markup in the document following the root element must be well-formed.
    gmana nih???

    ReplyDelete
    Replies
    1. coba dilihat dulu gan kesalahan yang dimaksud pada kolom tersebut, di template nya ntar saya bantu ngatasin error nya... pleased

      Delete
  27. spoiled huaaa .. gambar emotnya ada.. tpi pas diklik emotnya gk keluar kodenya... gimana tu huhhh .??? mohon solusinya ..

    ReplyDelete
    Replies
    1. ini blognya http://muamar-kurosaki.blogspot.com/ .. coba buka postingannya dan gambar emotioannya memang ada.. tapi klo diklik gak keluar kode emotnya...

      TOLONG SOLUSINYA.. spoiled wat2

      Delete
    2. itu saya udah coba bisa kok gan di blog nya agan... shake shake shake

      Delete
  28. mbka smua nya yg diatas udah q coba
    tp emoticonnya tdk muncul di kotak komentar itu gimana,,,,?????
    apa mungkin nilai dari emoRange nya perlu dirubah..

    shake shake shake shake shake shake shake shake shake shake shake shake shake

    ReplyDelete
    Replies
    1. emorange nya ga papa gan, mungkin bisa jadi agan masukkan jquery nya lebih dari satu, tp saya liat belum ada di blog nya jadi saya kurang tau permasalahannya dimana... shake

      Delete
    2. udah q pasang lagi mbk tapi,,,, tetep msih ga bisa....
      dah q cari edit html trnyata jquery.a satu doank,,,,

      Delete
    3. Saya lihat sudah bisa tuh gan emot nya... drunk

      Delete
    4. ya mbk untuk gambar emoticonya udah bisa,,,,
      tapi waktu dibuat untuk berkomentar gambarnya ga kluar yang ada cuman kodenya saja (happy), solusinya gimana....????? spoiled spoiled spoiled

      Delete
    5. jquery agan ada beberapa hapus saja gan cukup satu aja...
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

      Delete
    6. jquery nya udah q hapus n cuman ada 1 jqury di blog tp msih tetep ga bisa huhhh

      Delete
  29. saya amankan mbak alya tetapi saya backup dulu blog saya berjaga-jaga agar tidak terjadi eror pada waktu perombakan :D

    ReplyDelete
    Replies
    1. silahkan di amankan gan, jangan sampe digondol kucing... omg omg omg

      Delete
  30. Sob terimakasih tutorial-nya, emot-nya udh berhasil dipasang di blog saya(http://ilmudhestar.blogspot.com) happy , cuman gimana cara masang emot di postingan/artikel?? tolong penjelasannya shake

    ReplyDelete
    Replies
    1. coba lihat tips 2 di postingan ini gan...

      Delete
    2. Ok, berhasil sob. Sekali lagi terimakasih tutorial-nya shake . Saya akan sering berkunjung kesini pleased :D

      Delete
  31. wah terima kasih pengetahuannya sob,gw langsung praktek

    ReplyDelete
  32. uda nyoba teteup gx bisa ... napa yc sis ... tolong di ceki ceki donk sis (http://innocrime.blogspot.com)
    mohon pencerahannyaaaaa ....

    ReplyDelete
    Replies
    1. jquery agan ada dua, coba hapus salah satu... pleased
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
      semoga membantu... :)

      Delete
  33. punya aku gak muncul ne sis apanya yang salah ya.... huhhh

    ReplyDelete
    Replies
    1. di G+ nya ga ada link blog nya gan jd saya ga tau permasalahannya dimana... shake

      Delete
  34. gan, emoticon di comentar udh sukses happy
    tapi~ saya pengen emotnya ada di postingan juga, caranya gimana ya?
    ane udh nyoba tips 2, tapi kagak berhasil keluar emotnya spoiled
    mohon pencerahannya shake

    ReplyDelete
    Replies
    1. coba sesuaikan dengan kode yang membungkus bagian postingan agan pada bagian post-body...

      Delete
  35. Sob, kok kalo emot-nya diklik, malah gak keluar kode emot-nya, kenapa kok bisa seperti itu?, padahal kemaren2nya bisa. Tolong bantuannya sob!
    Ini blog saya http://ilmudhestar.blogspot.com

    ReplyDelete
    Replies
    1. ohh, udah bisa sob. Saya utak - atik dan berhasil sob happy, makasi emot-nya sob :D

      Delete
  36. numpang tnyak..
    knpa punya gwe gk bsa kepakai...
    di klik emoticonnya gk keluar kodenya..
    http://menmakhusina.blogspot.com
    tolong sarannya

    ReplyDelete
  37. shake
    tolong
    yg
    saya ubah >> aiizahh-reader.googlecode.com <<
    ke >> achmatfauzan-reader.googlecode.com <<
    terus tidak muncul emonya .!!

    dan
    Tips 2 :Untuk membuat emoticon muncul di dalam postingan/artikel tambahkan kode "div.post-body, div.post-body span" pada bagian "var emoRange".
    ditambah atau di ubah ?
    kalau di tambah dibelakang /depan / sesudah tanada (=/samadengan)?

    kalau boleh komen ke blog saya dg solusinya,,,,
    terimakasih.

    ReplyDelete
    Replies
    1. ditambah gan...
      var emoRange = "#comments p, div.emoWrap, div.post-body, div.post-body span",

      Delete
  38. haii makasih sudah bisa emoticonnya di blog saya sist hehe... pleased

    ReplyDelete
  39. cheer terima kasih cheer
    working di blog saya :D

    ReplyDelete
  40. mo nanya nih, kalo kotak emoticon nya dibuat hide/unhide gimana ya???
    thanks sebelumnya...
    shake

    ReplyDelete
  41. lucu ngeliat blog ente gan. kawai. happy happy

    mampir sob ke blog ane,
    http://www.belajardebian.com

    ReplyDelete
  42. Tips 2 :Untuk membuat emoticon muncul di dalam postingan/artikel tambahkan kode "div.post-body, div.post-body span" pada bagian "var emoRange".


    itu maksudnya gmn ya sob? huhhh

    ReplyDelete
    Replies
    1. itu biar emot nya tidak hanya ada di bagian komentar tp bisa ditempatkan dalam postingan sob...

      Delete
  43. Mantap gan happy

    kunjungi http://www.tutorialmultimedia.com/

    ReplyDelete
  44. Punya ane kok pas orang komentar pake emoticon tapi emoticonnya gak jadi :/ cuman tulisan doang spoiled solusi dong http://rm-anime.blogspot.com/ order

    ReplyDelete
    Replies
    1. saya lihat sudah mantap emot di komentar nya sob... haii

      Delete
  45. Met malam min, mau tanya kok setelah saya pasang tampilan emotionnya ad di bawah kotak komentar ya..
    ga seperti punya mimin di sini huhhh

    ReplyDelete
  46. Terima kasih min sudah jadi sekarang...

    shake

    ReplyDelete
  47. Thhx gan, dah dicoba di blog ane order

    ReplyDelete
  48. Makasih yah mba atas ifonya, sangat bermandaat sekaali haii
    Kalo sempet mampir diblog baru ane yah, mohon saran dan bantuannya karena ane bru belajar ngeblog , makasih http://virgiawan-didik.blogspot.com/

    ReplyDelete