Memasang Emoticon Pada Kolom Komentar Di Blog

S ebuah emoticon/smiley kolom komentar di blog bisa di bilang penting karena, untuk menyatakan kondisi, sedih, senang, marah dsb dan itu juga bisa menjadi memperindah kolom komentar, sehingga tampak lebih hidup.

Sudah banyak tutorial cara memasang emoticon pada komentar di mbah google. Mungkin saya akan memasang emoticon yang sederhana tidak seperti yang lain. :D

Dan di bawah ini adalah contoh emoticon yang akan kita buat sob..

Simak dengan baik ya kalau mau kaya emoticon di atas :D

Yang pertama Blogger -> Templates -> Edit HTML, kemudian masukan CSS dibawah ini sebelum ]]></b:skin>

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

Dan simpan kode dibawah tepat 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/AVvXsEi9kBI09huh4t5nOybxxekxDSQMnHQlt1Sfnbe9XY7RhMzmvzZToe3I4-bvjbzl9BPgEeQfpUBeGNIEQoWz0X7dJinoPkgs1yZSsZwXqZC3CwXsnGFuE2Uylso9heDvMnyEkoGmxzNwZVw/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBbEedcRvh5Iwxb_QfbMJxUzsh4WT90Fbwgpn9-K67WcaN0o4KhdnhH09sO_UCz3TjyKEbw2Bz6dmFpr5pNaCU0tkfkkRR5SN5CzhFYYYbiQKlISRflGsf7i5oOvbepIPV_IqEm0UDe0/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1qGx1KybvSXA3RlwEsJm9xdx0bKpotsWNKbfO3dyC8BHlhJYtIorVPUNUKH0wZgWvazuwUIl07je0OJXuzOVZ4YbK-DwWZnWdSsfGYD2YASXCE3ngrozXFX35EBAGryIiS7qLUCsIvTw/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyivHdJtKCQECdk69ENJbpMygHNdw5mHK5whewOf53QCwLqBvxTiIqxooibenoalsxEKA-NCFhlr32ttwZ6xUfz8sR3P_1dpjCHluQUniwiQNacPNTHf69Dg24gQp0nYZKyLngSn4FDVk/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1G8GSxmyIFjOHmWp1Nf6AKVGPcQbK_3YgPn3Pn0v9hScOOR3NkMCtO0_x3jB6bFiVOTN_aIYzPxBMdAjrJXlKFEbWkNUYG2uBVnzLOhJ6S27GVcbTpvaeRves47msmveGyOCyp5Jdfb4/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfOIH5-CMsN7i4sDGG5RSpVEOZTkBIWuH9vSWxv7NnLj3GBLKgEDnrX__PBQv50_nZMRACsf-d70UdfSXj0_7MVbBhifp18tcCC7MzULuEjASp5GkfXpTdt_bLpVI61GPs9umBpOE8dU/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY75YIomfCSC5uD4BBQoeWB200wLWS5-yPgsO0_e5lccgC4tPC9_lVHMM0K_hVjcsFRU8maSU_16Jc16NTKyzKsmFtsr0CaCGXGf22-IuXgklPGUAfVi-_U_Bu3YO4AEFicW0WASqABkc/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9fE84YsmAN3K_c677xAKQSoWQjv_EWKz_Gp-iH-xuIcA6XRcuCyU2ypufeNUX4U3Zy7KeGph55Lzhohyphenhyphenj_SrHEA1vt03BYnzUsL8a1qnHN5QAZnP9u_cTCbIq0fiM5ejWzC0U4B9fYww/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7uFguEGQLFPJRfyZIQ5efoi775RQ4L7V6Q-__jUzeq7w80I8Tm1M0hYV9F3MFSfpOsCYX-r3Ln6Da13E7IFGBXBrgnbSkXki6Qe4KYirLo1avyskauf1we0Grj1iX2hoiytoXFjFytzE/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkT-xtzSAIdQ77m7x6ozN_1wAbnMz7qJ9PRe5SVaDxgXaQfcvHAZ8-gQ7WfUSx0tFtVLBob848eIhswfsvYf7wcjWwRutp5xWp0ce958cX6CR1Asx0zl909ptsM6CVdjNOcNkujP1kZY/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaHIvKlAV6NtGPq96x4tcFRmEaZOau8BPpQxA0wmBF0Nn-AWyuEvUwepjriE5bTXiYIJTV9wa-X7iaFwSHJoKdlIoLVSpkC2aDlaUjEKaB1x9fJohgKQxT7kNh88PCxyHsffC3uMjxQ8/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEI7Lo-6P22pm9JP4Wc0AL4mLI_aW5qz_dz3UH-w1Ij0R1XUXcNSfBsJo2BsNrT8m1Ij5qeMXkZX_ttPpdp20mYF10hrv8k_ZqhvfGMHdECjT4wuQhGfw84guGC-jOzuTaDrldu8jgZ0/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEI7Lo-6P22pm9JP4Wc0AL4mLI_aW5qz_dz3UH-w1Ij0R1XUXcNSfBsJo2BsNrT8m1Ij5qeMXkZX_ttPpdp20mYF10hrv8k_ZqhvfGMHdECjT4wuQhGfw84guGC-jOzuTaDrldu8jgZ0/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>