Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Pasang Emoticon Pada Komentar Blogger

Cara memasang emotikon / smiley pada komentar blogger / blogspot.
Adding smileys on Blogger Comments - Emoticon / smiley biasanya digunakan untuk menyatakan kondisi, senang, sedih, marah dll. Selain itu juga sebagai pemanis kolom komentar, sehingga tampak lebih hidup.smiley

Sudah puluhan atau mungkin ratusan tutorial tentang cara memasang emotikon pada komentar, tetapi  karena banyaknya permintaan / pertanyaan tentang cara memasang emoticon, akhirnya saya share juga  :)
Dari kode dibawah, ada 12 emoticon yang bisa sobat gunakan :

smileysmileysmileysmiley

Bagi sobat yang ingin menampilkan emotikon pada komentar, silahkan ikuti langkah mudahnya :

1. Simpan kode CSS ini di atas ]]></b:skin>

img.comment_emo {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

2. Simpan kode ini di atas </body>

<script type="text/javascript">
//<![CDATA[
/* Blogger Comments Emoticon
 * by Kang Ismet
 * Url:http://blog.kangismet.net
 */
ki = document.getElementById('comment-holder');
if (ki) {
    zx = ki.getElementsByTagName("p");
    for (i = 0; i < zx.length; i++) {
        if (zx.item(i).getAttribute('CLASS') == 'comment-content') {
            ki_emo = zx.item(i).innerHTML.replace(/:\)/gi, "<img src='http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>

Penulisan

Cara penulisannya standar aja, seperti tertulis disamping smiley :

smiley.:)smiley^_^smiley:-dsmiley:-bd@@,\o/

=(:(;):D=D:p

Menambah Emoticon

Untuk menambah atau edit emoticon, tambahkan kode yang seperti ini (edit simbol dan url gambarnya) :

ki_emo = ki_emo.replace(/:\p/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");

Kalaumau yanglebih lengkap silahkan gunakan Yahoo Smileys / Emoticon.

Emoticon ini untuk Komentar default Blogger. Emoticon ini tidak ditampilkan di atas form komentar dan tidak menggunakan alert box, apabila ingin menambahkan diatas form komentar atau ingin menggunkan alert box, silahkan cari tutorialnya di Googel, sudah banyak yang posting.

134 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. sudah saya pasang kang .... hihihihi =D \o/
    1. kalau blog saya ma sudah ada,hehehe sudah bawaan dari threead komen hacknya kang ismet,hehehe
      ~BW~
    2. Unknown
      Komentar ini telah dihapus oleh pengarang.
  2. Punya saya sudah ada kang bawaan template hanya beda penampilan....
  3. ketigax hih
    1. apa fungsi dari / dari kode ? mengapa pakai kode tersebut dan apa artinya /gi saya pernah menemui /ig lalu kok ada kode emotion lain kaya gini /\:) apa artinya ?
  4. camkoha kang,,,, mantabbbb
  5. alah ka opat kang ...
  6. Tips bagus ni :)
  7. dapat yang ke-7..haha...terlambat...Kang bisa ganti emoticon di blogger comment hack gak??
    1. tinggal ganti aja, kan ada Emo List
  8. Mantap deh ,, langsung aku coba ni Om
    makasih tutorial nya
    1. Muhun mangga , mangga sok tong isin-isin hehe ( ngawakilan kang :D )
  9. maaf kang... coba cek lagi, ada link emot yang sama pada 2 emotikon
    1. emang sama kang, yang 2 terakhir bedanya dengan p(kecil) dan P (kapital) antisipasi penulisan berbeda :)
  10. Wah cari kemana-mana, ternyata ketemunya di KI lagi aja :D
    1. wih lumayan buat nambah
  11. itu gambar gif nya bisa diganti ga kang?
    1. o iya bs, belum baca semua :D gomen
  12. cara pintas yang di anggap PANTAS ! :-bd KEYEEEEEEEN MAMANG KUHHHH :D
    1. jalan lieur, sanes jalan pintas :D
  13. Tah ieu pisan nu di pilarian teh Kang...
    Seseur na mah paket Bundle ^_^
    1. kos kartu perdana wae atuh nya kang sareng hp :D
  14. percobaan :-d
    1. buat blog kok coba-coba ? :D .. hehe , kaya minyak kayu putih aja gan .. wkwkwk
  15. makasih kang tutorial nya ^_^
    sudah sukses terpasang :D
  16. haduh gak pernah pertamaxxx , baru online lagi soalnya . kang nulisnya subuh aja kang biar saya bisa pertamaxxx \o/
    1. waduh.. subuh sih jadwal ngaji :)
  17. Dicobian heula kang :D
  18. bisa gak kang kalo emotnya digunain di post juga? butuh pencerahan lampu sorot...
    1. harus diedit lagi Jsnya
  19. Asik ... akhirnya di share juga ... =D kemarin-kemarin aku baca yang di artikel Komentar Hack gak mudeng ... :D Alhamdulillah sekarang dishare ... :D Makasih banyak Kang :-bd
  20. wah ini bagus banget
  21. pengen pasang, tapi kayaknya kurang menarik jika di pasang blog ane :)
    1. kalau pengen menarik, pake tambang aja :D
  22. Absen peuting ah, ka 40 :D
  23. walah tutor membuat emoticon komentar ya, dulu pernah pakai tapi sekarang saya lepas. kemarin nyoba pasang emoticon comments di web berbasis CI tapi masih ada bug, saya ikut nyimak saja lah tidak ikut praktik.
    1. silahkan sob :)
  24. salam kenal kang .. tutorial yang keren dan jadi bentah ningkrongin dimari..
  25. wah sae kang tp memperberat loading blog moal ieu teh kang pami ngangge nu kitu?

    kang,template kenging kang ismet nu zikazev blue responsive tiasa d valid html5 keun teu kang?? ku abdi hyg d angge tp pas d cbaan teh seer nu eror..
    1. sadayana template tiasa divalidkeun kang... kaleresan acan valid html5 sih
  26. makasih kang kapan2 saya terapkan. bantuan saya ath kang, tolong buatkan kode CSS responsive buat menu di blog saya, & saya pusing dengan warna apa yang cocok untuk bagian tsb. (yoga-tc blogspot)
    1. apa hubungannya buat responsive sama pusing warna yang cocok ya kang :p
  27. keren kang tutorialnya tapi masih betah ama emot blog yang lama :))
  28. diluncurkan juga akhirnya kang, hehehe.. daripada ditanya terus sih :-d
  29. Kalau saya bawaan trit komen yang kang Ismet udah kasi, paling tinggal di tambah aja emotion nya...

    btw OOT nih kang, saya naksir ma widget sticky twitter ma G+ yang sebelah kanan kang ada tutornya gk...??? bukan untuk sticky kang tp tampilan G+ ma twitternya kang kalau bisa sih ada fb fans pagenya :D, biar irit tempat aja, makasih sebelumnya kang
  30. coba dulu ya kang .. tapi emotnya kok dikit ya .. :D
  31. Kang maaf sebelumnya,OOT soalnya...
    mau nanya mana baiknya kita psng css/javascript di dalam template atau menggunakan tempat penyimpanan di t4 lain? semoga kang ismet ngerti maksu kata2 saya :D
  32. kenapa dicoret ya?
    1. mungkin karena kata-katanya tidak mengunakan bahasa indonesia yang baik .. :)
  33. Saya mau request dong kang, cara pasang emoticon di postingan. jadi misal kita ketik : ) maka otomatis emoticon smiley nya keluar terimakasih.
    1. ditunggu aja sob :)
  34. wah postingannya semua keren keren akhir akhir ini, maaf kang baru mampir :) [ modem baru pulih :D ]
    - salam damai :)
  35. Kang, mau tanya berhubungan dengan komentar blogger, saya install disqus sebagai pengganti komentar blogger default, nah bisa tidak "Comment Count" (jumlah komentar) itu muncul di home page?
    trm ksh
  36. kang apa ini support dengan semua template?saya pernah coba tapi ga muncul??
  37. kang kalo nempel nya buat di postingan gmana kang? di ganti
    [code] document.getElementById('comment-holder');[/code]

    jadi

    [code] document.getElementById('post');[/code]

    atau gmana kang? :)
  38. tes :-d
  39. Test dulu :-d
  40. mantap deh blognya kang ismet :)
  41. kang...saya dapet masalah nih... setiap kali saya mau bagikan postingan di google +, malah keluar pesan "Post anda tidak dibagikan. Coba lagi." itu setiap kali mau saya bagikan tidak bisa sama sekali malah keluar pesan gitu, saya coba lagi, sama saja gk bisa saya bagikan, tolong kasi solusinya kang !!!!
    screentshotnya kyk gini kang :
    <a href="https://lh3.googleusercontent.com/-8SQvzOjx3tw/UqM-uy2IOTI/AAAAAAAACL4/cdRoe-8683M/s613/Untitled.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://lh3.googleusercontent.com/-8SQvzOjx3tw/UqM-uy2IOTI/AAAAAAAACL4/cdRoe-8683M/s613/Untitled.jpg"/></a>
    1. eh maaf kang, salah itu URL gambarnya, bingung mau nmpilin gambarnya di comment malah gk jadi, tapi itu URLnya kang coba lihat aja sama kasi tau solusinya gimana kang...
  42. Thanks Kang Bisa Di coba nih kapann kapan :D
  43. info untuk Cara Meningkatkan IQ gan , baca aja di http://www.herbalarjawinangun.com/2013/11/cara-meningkatkan-iq-yang-patut-anda.html :)
  44. info yang menarik mas
    umpan balik ya mas :D
  45. mantap postingnya kang,

    -brofist-
  46. http://th-informatics.blogspot.com/
  47. http://seoxr.blogspot.com/
  48. ini yang ana cari2 :D
    http://innocenceberbagi.blogspot.com
  49. :D
  50. berhasil kang sukses dipasang , oia kang mau tanya jika seandainya itu emotionnya dipasang di kolom komentar caranya gimana kang , soalnya agar pengunjung tau kode apa saja yg harus dipakai agar bisa memilih emotion ?
    1. itu sudah ada pada threded comment hack sob
  51. sudah terpasang, thank you
  52. Mantep banget tutornya, makasih kang ismet
  53. Gan kok gak work ya di blog saya..
    http://killersblog-19.blogspot.com
  54. thx atas infonya kang...
  55. kang kok ane kaga bsa y ?
  56. yours.net
    Komentar ini telah dihapus oleh pengarang.
  57. Kang Ismet urang Bandung nya?
    kang Ismet abi tos nyobian emoticon onion head tapi gagal wae, saur na mah teu support ka blogger, 5x gagal kang ti tutorial nu benten

    punten pisan kang pencerahanna
    1. ti sukabumi kang... nganggo kode anu abdi we.. gentos link gambar sareng kodena nganggo onion head :)
  58. Desapega Network
    Komentar ini telah dihapus oleh pengarang.
  59. Perlu dicoba nih.... ^_^
  60. kok ndak muncul kang ?
  61. Gk jadi :(
  62. thanks kang, it's works !
  63. Kok gak muncul ya kang ? =( Solusi nya dong > SS nya http://prntscr.com/33bm3m
  64. :)

    :(

    =(

    ^_^

    :D

    =D

    |o|

    @@,

    ;)

    :-bd

    :-d

    :P

    :ngakak:
  65. thansk gan...kunjungan balik y http://widitrick.blogspot.com/
  66. Ini si mantap kang,,, langsung berhasil,,,, terimakasih tips nya :D
  67. tes.. . .. . :ngakak:

    horeee |o|
  68. keren kang.
  69. tq bang :-d
  70. ok sip |o|
  71. saya coba kang :ngakak:

    >> http://caralagi.blogspot.com/
  72. lol
  73. |o|
    @@,
  74. kang gimana cara nampilkan emotion nya di atas komentar supaya pengunjung tau, kyk di atas itu gimana cara nampilkannya,,, mohon pencerahannya ditunggu,,
  75. gimana sob kalau emoticon nya pengen di bawah komentar
    sobat bisa lihat blog saya
    www.cecepcom.blogspot.com
  76. kang kok di blog sya tidak jadi ya,pencerahannya ?
  77. sudah terpasang kang :)
  78. :)
  79. Keren tutorialnya Kang Ismet , Terus Berkarya :)
    Saya dapat tutor seputar blog dari Kang Ismet lohh :D
  80. sudah terpasang tapi cara menampilkan di atas form komentar bagaimana ya?
    jangan lupa kunbalnya juga kang arifinbp.blogspot.com
  81. wow
  82. Sangat bermanfaat :)
    kalau sempet mampir diblog saya yah , Join site juga , ane juga udah join site nte |o|
    Terima kasih http://virgiawan-didik.blogspot.com/
  83. akhiiirnya nemu yang work juga!! keren gan thank banget.. tapi box buat emotnya ga ada :(
  84. Gan kok emotnya gακ hisa di pasang di komentar google+ ya?

    tolong pencerahannya gan.. masih newbi nih.. :(
  85. \o/
  86. seep mas, siap dijalankan :ngakak:
    salam
    (gagapseo.com)
  87. kang, kok tetep ga muncul emotikon nya ya? Maaf awam..

    dhimas-rafiif.blogspot.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.