Pasang Emoticon Pada Komentar Blogger ~ Blogstorial

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/AVvXsEhTPUA0szT4EthHYXOspmFCzPjl-XGoZoFxj7V1l7rAQcc9mSssSWtJSFFoeIYMR4_giWwXxtgQmIvDdeV5tirLjnKQWEgRWWq6ObH1T2uvbagR950GYbtVDbBCpDrCBmPmTRFVdFwmZqY/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGqq0ub2yqTzbFCZgblQwocC-gu5ajjmcZc7wPEdRfT8nnLKIdv0xA7Tp9LEfK3gQeTz-d-Ux-Gsih8AYO1B_P6eyCVyuwhIRZirNuMNtEUTbmUIgW8aXXFpntMM2jK4OiUdZTMfXSew/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQxfmxumV-bijYn_VGHazrsOS82KvwGMcrYkU8gAIirdv9ibW681ZPiZqE-InWcxMCWispMC0rdNNeRVru5fulolrxXQpA9yVZsuzPQAAfONu_7cATEFvAqQeflErEkhQVKv9bvbg-Jk/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vG1-R0fajMW8GvWqmrjSnbGecpjdw81LLkM9ogl-K1IwGqR3pOpPLjrfYyH13AodaGpFLEjxcbVx9nIfdmI8SpDJXz7fE65JU6wPd_zadcozYCEJga_5I6apXFn_V_tCb2hMib9eucQ/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5SK8boYO-LHKekbcY8zrRrdgurN07fRL4tbMiuuaygg5ZqYogjnyuojrnPGYonSBzYfA-YwAFxejHOq4gFalFfhp3DZAPHGXudcO37C-GMFkVyShRWDNIeCEJt8r0q-FxVTgTMn5J88/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuCMi6lWacDgxy5gLYRQ656xWrVfQqTss5ugHWA0StkWZSIE494QIMVJiuR7VxPK8JTWGEw4vRiVnm792Ev0n_1Nvi7U5xTsBqRvpbawe0ZzzGMp1C7pKq81FEv_OHuq6ZoymZ1pzQSA/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkcjQPmgtvahvXppVa4UI_f5C0cI_4eTJXBpqe-IYZ1IRRm9n_naMiRbDs13HhTVIzO_1LXuoFJZMkLJtTQxndXBMMyqfBs3-ebjaLzMzKRh6Ra3FRsrtju6ilZneCB5-IVi8NAYqhSo/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkTYE1LhfISHZWxbI6MV1VSt96d2URVniZ1k9_1P5TEEQg9j6t57EssQuHAhUl2AxGwnEnB7CKfmapksFb0toIMgT9pW0sXlsGFgRLNXbxigj5la8frpkkUMbBVwMqpuhZ7Waa3ntIH0/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0bC1lfpiHTaiCGcFcyhROrvtXfNjzywcbRCy3X3lcCk6hUUMn7AD5A_Wdamn6TdFz9xSf1J0V_Nf5B9jN1xpIBuDU-7riTN9iLuVslftrMg5vpzK8i7KXHgZnF5cgAkIDGXWUZnbubo/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgJH-ALlcMEMniregtIA93Ad5y4q-0vAHDMAcEvWYVg8HFnOVtwzl0F-NuOit2anTKHPeUWWdSiVAhCq-tGqsDj4rLCSdSudJEvFUcMa0TCXRtPykzu-WY7_WCi3pa3jCEw1nDXzbZDc/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AaLClj1bZflXDsqoLmYbIXEfED8JuzL4LpapBMB6A9W02acfIPOVYm7Os1VGyRJcrRSoG1S4h85qiesyJ4UpdACnEdu2fYFAsxTFGC26674W_W6jGrIVDWBhX7jD4IE3H5roxh8D538/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldSHUDjWcgvsI-XHM0vd-DMYuD104JgV5zNY0PFAEqztCIffu9LyHDo7sYRfjFkNFj9drsXZzV5LIXqjf4w14cdOpTuxHg6JYqFqaBMHiMjIMYJo6yBt543cLN6zKwp86wkl1_gxgWvw/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldSHUDjWcgvsI-XHM0vd-DMYuD104JgV5zNY0PFAEqztCIffu9LyHDo7sYRfjFkNFj9drsXZzV5LIXqjf4w14cdOpTuxHg6JYqFqaBMHiMjIMYJo6yBt543cLN6zKwp86wkl1_gxgWvw/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>

Penulisan

Cara penulisannya standar aja, seperti tertulis disamping smiley :

smiley

.:)

^_^

:-d

:-bd

@@,

\o/

;)

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

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.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Blogstorial