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/AVvXsEi7c1ZGFHHzP5kxWjTFkX6pKekoFo_uK77J0tDJERrDbL_-EnH2z0H5PokiOB2XO2ph9hSvaorcI0Q5r8C83j7drq9vfC3ABeW1lt3vSqJzuCqpO3JmldcBNRbznVkLW8ouQu50OuKLKcc/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRkXR73oAcg6D9K9UceDOMcubXEhKbFdZXUKP17kSYG_TSvFxuGqAlNy7Z16JYHUUL6DetWVX-8XFglod2JcT9DnbHdTxgaUwiYFQyVOK2pCLGbNZxlDupu0-JLynRhhDEqj9RXv8Ao6Q/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2wlE2EN-khFICGpxo3onHxNewxUDadP3lOGdmvyM2C9w_pHHA_GicbZ9-8fw9w1SH_m6ScMqJKrAEAPQtVs-GvTgUbpd7tbln6wbB3Iqt_LWi6B2pFEeSIS1FP91AykXGNPeMEUMtZMg/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkRa5QC4f726jtOPLK4SR1_ALhE3_h-pll1py5M_lgsSxzEQkpPwvlS5jy1h3k83rk-55rGa3fNb7mtgjrPyJTHIf-9c7GIgHevmGw7WttP3Ryfr5yLvuaLVn-9FAA9gY3S2GhxqVXCc/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWog4b8zYWMEwgfVjsRHAfIXiUTQtSNj2unvCicqrvwr-7bv4Nk6UzpOxb6nEa2a-omZGHKAI22__sMa26AkFtqRF0RCjAOGhgkc8uKSXcLbWmeIGz7TgzUpD1DINaS4ipb1wBqy95K7g/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcZ6N37o9mMOU44mvPVvNSLbHimOwqhaWQTXIKHPmxz21y1WrEzQZdhCei5HBXE50HUNlSU7s9H55ITvdlzW0rt6HaC9Ai0bIuzGPNjKpnPrFgIinWmgADHqVAknbz_sYKtoCNIf3rAo/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWIyohuaLu7COv7CCadl1TGU_hdg9B5GTf-Y8LEWyOfweP0SuHsuO8-02rrWhNaMADEowINlrZZCJopTQR-U6KJOGvZQ4JIRfyAQHgKNROqAytja8WmW249h-XNJGf5YvGEHeqMgx28U/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXaLEMRO638yhNX1dH6C99WK3HDPFj6gzzjQm-x9tfaJfGWKaakUMNrb0iRUsJlAWu5B0SQt1AvZNCi0phvIl5sIOMvd-atdASnCc7z6Xo3sKZwFpxUulazvI9hODPTS7X-F7pp8go2M/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0OqCU1Riy8fitHuU6yKV_oQdItFzwqNzVgvNAxPT0H0TouVX4lwG2rKgrmtXqKgJdt8wruPbELqG32z-Bm7YQfUWUnKk7QKsbasD8M7zoWZVsnRZP-5lQLWO_KaXrJ-75if7tlDKHlsM/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1KiUVVuogGoEhLXlDF4yp4B8VTvDmXv1b_L9yNgqhGGz5by8O9Ik5eTkF7T0MhUixS-Fufo13OazMfezA6dBedBQg9bYaSDSMiLbM_C2noTPhoVySVLc-QviddUYWYrQsACGrRbs-o8/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhForwTMxr62RHhNphuHWwXD7-MZVaIAG2utYZ8QdXZ3BfHdAsCEqV9KpdDC6db7upw1F0KHq2jCDD5Ry-cE8r13VYApH6UsDopw7SFfmBMuOREqyTLK2otNR9ij9Q8sY99uEl2HORpfgA/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAU3LiViSAa-WQDjxvvVxnvopo0QeGZRvPgZ8FFJXAEtFuNOw8_iYDbXwhs1pXyGLjD_BrvAhutlHflISNxexoRCTcfJRmBjQmZsD8ubEw9zXFv2B4DoYfKAT5bgvlJMbMd1h3F7UhBs/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAU3LiViSAa-WQDjxvvVxnvopo0QeGZRvPgZ8FFJXAEtFuNOw8_iYDbXwhs1pXyGLjD_BrvAhutlHflISNxexoRCTcfJRmBjQmZsD8ubEw9zXFv2B4DoYfKAT5bgvlJMbMd1h3F7UhBs/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/AVvXsEgnAU3LiViSAa-WQDjxvvVxnvopo0QeGZRvPgZ8FFJXAEtFuNOw8_iYDbXwhs1pXyGLjD_BrvAhutlHflISNxexoRCTcfJRmBjQmZsD8ubEw9zXFv2B4DoYfKAT5bgvlJMbMd1h3F7UhBs/s1600/wee.gif' alt='' class='comment_emo'/>");

NB:
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.

Selamat berkreasi...!

Tutorial blogger

Tweet