Pasang Emoticon Pada Komentar Blogger

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 :


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/AVvXsEjDhfmqBa3iXGdxqCEQ576DX7Z_fk5ugAglQNjVdsdtWoKZUwQAGzvOiA87YDG8fnhC6XEKgXx997Rt_YF2DSIh6gXUwjjBxUgPts5oS4S367OJGlg5zNQ_hPV4XDYi5V0bslMoPPiUeno/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJYvV-aF0_M9vi5BN9s76y_vjKvi7Bz8vYzG5EfNnEJ49IukgtoNcZ4S8pxcVBdLJRjoixqXBVYaXqTOmi_DiOgn-yZ5wuvufs8JCcOwJvgiEdP9MznZVrefQw1Y825AltYSCWo4DyJg/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6LpsF5ba7WHVlC69NAUs3HKx0NA0jtY1BelpSn_o44TNAyM_KVuotttSxxRLYrY0uMIIKnARsIKxIfkEcYTwZs3ijS9bb5Dnsiv7CT_2_2HogSvK7SDXaq73RS4KRVw7o6nrwNCRYEck/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihVGaasQPSEljck7225hgznIA7pTM38Li9f5RkPcly05dY4NJ1pBRLp0YaSk-GjQGt3IYZbqySs6sVw2AWd4BuPpHn2ec-ZJfQLpCCE8F0QpnxoN7bmuyI94ILgHIHLBNj0hiXC3NuuJY/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kTBMnxMEvqpa_4os5_k8bz7GrSyfyIp5tg5jzAxZcPwfDY5bmL1-e5LgtvzrCc1rYAppqplRynLSRXQDVwtis0sPhRmZIhUVO3tTFqNRiRURjPsgKPlTwiAtPB-91p-_ydfeTCT1TUc/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5dAdAWxFJjEOrHWkq2oNOn-47AjfdI2LoofUmkUrdjRJXONDNYBt_3UK-8YJAHCOumNqZfneSm6EMvvFTuYN2LxqMOuHB9xYHeYPtz08K41GCbad_zCWgDKs0mPHVBWTk-LxSQbtnTMQ/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNUSF72KcnigwznzC1XFpfmHR9o3BdgaXlNh3fJc7mZmzPdvoUvRCWXzG5-EU0t3mGDdcpF0_YUuHJZlqV81lGCcqqCM6hy7i5gcPJ5mDXRz-ckvvjh_U4KAapKwPL3b2v6t1cZvwP4g/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_IMCUUIYMahXEg865bAbsNeU0FGHZK2e1MHYT8ARBUivJGBMQH2Km6tq5L745tqYjYdG2Fw7col3xjTEy3ia_yTAoFq-GkzXBvoXWZ1hJm6_m2qvdlWsvWJkROYSR5Apr8OAgWSW6EfQ/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYWz0VoUNywAAio9IEdTqjZbMluaPx89Jg40-4eUJ36F57CFnaUWEvoNREv-nSeG3EUUT7mcTcPmtB_qXoH_qeg3R-1ttx84u0YPQgvi7xjd2FFP3TbakErOf5sFOtqHURlUuneevjBo/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsmqeADr27824ygTS3Ts90qBTyyEP7x_UGur_dxEnCshmHtojZwQLIhWOR9IP7CZx_ucCeYB_5TGS1GoYUqd6xThxDWX6ZOUGwg2XgEmLx74k0DVJmjxCAnS8vYKSBdV0pFgzfz3JBtc/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxyKyRnt_AvvguYd4lfXx155BdASaVNA0Wn-ZSeesm3xpscirEoutdM1q6Rhkr_GKHrxxHaqa8tc9xntSa1bsui3i0jqXEx4mBHaNS-KSANVn1qxytM8gK3EjU20AvOI1ludfI7ZQcdg/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaA5sd5jiPzn3kan6QEAo__ygEo4zbA4dL0kxCLaxc4e0ZABXCzLzjCcV93ews3AN34qd4gtrVWVNhY5UP2PkODJlFLLuH706YWyqsAiHF0fUu_NlShYNYB5DbK422G7R5qNjw7MujbR4/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaA5sd5jiPzn3kan6QEAo__ygEo4zbA4dL0kxCLaxc4e0ZABXCzLzjCcV93ews3AN34qd4gtrVWVNhY5UP2PkODJlFLLuH706YWyqsAiHF0fUu_NlShYNYB5DbK422G7R5qNjw7MujbR4/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script> 

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/AVvXsEjaA5sd5jiPzn3kan6QEAo__ygEo4zbA4dL0kxCLaxc4e0ZABXCzLzjCcV93ews3AN34qd4gtrVWVNhY5UP2PkODJlFLLuH706YWyqsAiHF0fUu_NlShYNYB5DbK422G7R5qNjw7MujbR4/s1600/wee.gif' alt='' class='comment_emo'/>"); 

Mungkin Sekian Saja Saya Membuat Artikel Terima Kasih

Untuk Gambar Emoticon Bisa Searching Google,Sudah Banyak Yang Posting Tentang Emoticon.

Tweet