Pasang Emoticon Pada Komentar Blogger

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.

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 :


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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY2V9Xx-jfsL81HSf2Orc6S-fkCphjwDCbI4nwEKjw6NAegggfG4QJoGPMkbIDAIsukJCpl9rMpX1_r8wLLT0iDUs6NSp1Vd9Lz-8jSqD_DH6QsL1AyLoKFyoS99lhP2kR7qvREcuGklU/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6EUMbHgxmd0_XiAnsdkELYnsfKEeyfdeMiRDEm6gljnu1Qx_iLaY-1TM1Imljt8E8VeRcrPCnd01DeREJ9BKlX2l8KuNWaZXpbLXa9rAJKEAUwL88u-MTcl803uOXpkdbhgtoAL2mEw/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mwdWwGxGTn0zKfHLsfphOHSLXpN0u1xevv3FctAljESr4y6T7Jq4dwPdVTFJ3uMVNK-M0ggX9Ls5NPOMMaNBpHxnt8c9QaGZE91Kv-ksqLavgPerlZZU3W-mh-kbAlowNZQ6AMA4Rn0/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4keLke1qta_ve1piYm-L0UnmZgq5nMuNy3YLVCtTiDmrXnO0bnom52M1IdSxU826hUlSESiW1N3IzV8fUcF6sAlzj3ou-FinKRqFft07mz73XnbOiicYBtilGUde1pMpdsjN0xzYdxVo/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGe3Jm4CFFuRnmwGRnXAuoqBKssVOqbq2uSUjly1Wxneh7ix_3lQFvQ8VG-GtCWrtOsbaaeBoGK70kEI9bEJvoX4Oom6r12I0UYLXKFrMpqBMThylaVFmISL0M2xZrK3QVFW8yz5DNj0/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Syz7tMTVG6ujkk7Tl7E3PCGm7ykEM4OxUx-iTCKd4OypV7L1AmFsLBSTKxMBaiaGMN5CDkeVBnQbvnGt73v2daQp45qYYhNO1jTeHxjFFD1bLCHcWFAHwRVPSliShKthimVrwmJCDiA/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ad7XDYT50OrzzmFa7Pz-S5PXVvdpM0o9GXL3M6aDU_lUCtjdLVerIPSTgwM7E1VOqfAjYGtLLS-8M2jaSKcIPJRL8LPGNE4SNNam0WrC7dp-IbZUkUpcXSuD9PeQp2G6sZolhPXsfoA/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVu4YIgtrkrjCzLKfuJgrJ4zvZELaB1YH605MelJSwRWgAhpJVGpTs6f81KBIeR9J3xhkqY4wQghcBNcG7C9ACkdYv258me3OOepQiq3ivoJMfoJbFUaH2sa6ymsDwIj1ttv1OLh6aT4/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9d3DPSuM6m18cV0hOYmiRrrjuR89dENkGW6ASzhdx_jl7aKU9K_cLplQJEA7N-hqz8hsoq6uFtOzO10rC3YtRcBgXrDhVeKQlyLMvf5rtc4jxMhhOoqpfn6cm_nEI9crMdT0p4pp3Z9Q/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9cF0TPaEqQNgfQnq2rL4w53nKbqG5EkY0UACQRcxr7t6Z4bqoVt7Zuk3NhHR5JG1orE7PQl9ANc7VSzEew29HiFbA0BRLhhXOVYK9zOTIbkIj-RB1ejMJ4wZohR0NUOWMjexB031Y90/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja556S2t9uCCagasGicMNuX_N2OjirxKZSGnJsFwSP4d_eKI9mIwuR7mkjPhWM0Vx2pdMq1tBKkHX_GmxTawICkx4nO3uY3rW_jGIyGwBgGukwE2Dk0BL3u5WLGpabM6089FoX3Lr5g_g/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19yRgnS6McHeMW_ggwsG9W2DsGYE1Iy8b8uw4gp0Zy0-zz7Ny9x8IUHeDPoEITIX2hNNt_kr0S0kY7yzT323nLw7JezxQcGTq_cCx2P0VrXFioL7PD_jwURMKGdQftK10r1BEzFNs2gE/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19yRgnS6McHeMW_ggwsG9W2DsGYE1Iy8b8uw4gp0Zy0-zz7Ny9x8IUHeDPoEITIX2hNNt_kr0S0kY7yzT323nLw7JezxQcGTq_cCx2P0VrXFioL7PD_jwURMKGdQftK10r1BEzFNs2gE/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>

Penulisan

Cara penulisannya standar aja, seperti tertulis disamping smiley :

.:)^_^:-d:-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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19yRgnS6McHeMW_ggwsG9W2DsGYE1Iy8b8uw4gp0Zy0-zz7Ny9x8IUHeDPoEITIX2hNNt_kr0S0kY7yzT323nLw7JezxQcGTq_cCx2P0VrXFioL7PD_jwURMKGdQftK10r1BEzFNs2gE/s1600/wee.gif' alt='' class='comment_emo'/>");

Kalaumau yanglebih lengkap silahkan gunakan Yahoo Smileys / Emoticon.