How to Add Emoticons/Smileys in Blogger Comments

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. In this tutorial, I will show you some simple steps on how to add some very cool emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

UPDATE: Now available for threaded commenting system too!

DEMO

How To Add Kolobok Smileys to Blogger Comments

Step 1. Log in to your Blogger account and go to Template - Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box

Step 3. Search (CTRL + F) for this tag:

</body>

Step 4. Copy and paste just above it, this code:

a) For previous commenting system with comments that have no reply function:

<!--kolobok-smileys-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/>
<!--kolobok-smileys-->

b) For threaded commenting system with comments that have the reply function:

<script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

Note: ignore steps 5-8 if you are using threaded comments!

Step 5. Now find this code snippet:

<b:loop values='data:post.comments' var='comment'>

Step 6. Paste the following code just above it:

<div id='smileys'>

Step 7. Find the following code (look carefully, it should be somewhere below the code from step 5)

</b:loop>

Step 8. Paste the following tag just after it:

</div>

Step 9. Now find this code:
a) For previous commenting system:

<data:blogTeamBlogMessage/>

Note: if you'll find it like 4 times, stop to the 2nd one!

b) For threaded commenting system:

<div class='post-footer-line post-footer-line-3'>

Step 10. And add this code just after it:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons</div></a>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4znbgLCFtXGe668td9ebDp8tgZL50dMGwb7yf-Q0tVOh0K4K3DH2HpNFX3uPDBCv1irV9HH7k3Qs__jAim7JOEUwR1KndTOakDoMr5MhILJ2rtVPRGlv1m0uNvdM_OKSx0R0pppYqGqs/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeDPXpHng54V8gqOWOB4DZwPsjveFpstWFmS4Atx3q-pXURfZ9DKb6c_ekbB36ZdOdKUnGar0yjH2aUApZVt6Nx977k1Lq2dQD3zCsp2Wzumt8tFBmNssiPXGtqm39Xy0a1dd4AKRPby4/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFruLB8FxN0-3wQL8GXmhrB6SUaQDx1r6-s4URoVjXsyk8UjDQMZLp-tWS-UsKjqohj7sGsjGZRLmqZz5YXaePxqXT8XBXyMl2x9Dua0Lv1k3X88GTNRW7c9isrcYQ4YKFIaCionQbTg/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga6oZhBVRzpgo1kUdpmyzacBz4K3SuIoFLsITah2a52bWv4hof11Pigc2-wYQYgOHqh1I5WsymDz1JmNZcoIZghS4ZVI6KLXBey-A8eLhA18C2SLAr1s4c6AK87PFpihE7EotRKQIbXCM/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZdC5TzT635YLsA7KDhoxYIKRHKDg8oeUM5OknwijnyayhiRQ6eExJhIHkZdZJabITiYXB25LwtEvgeoEg4lp0k-6_reM5x7Oc0o9gmfgHkuCIkbBruYv1pZOP0_hR_EB2pfW64Hb0IA4/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hakSordaHwmjsUC2vQD-xfoWXWyEDL_Rrtn75piIC6p1Uugpqg2kIHYazYQUC-Shu7jRqJ8u4_ZA1m6T725BFAEuRJylvNvPFU5sAJUGSbkkF9pWmZ3MdGiqTCXgKRLZrtJ1UgYLPF0/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZvmgdPsW0fOG8oJhmtfbLN8lESroaHSbhgoCAjGbQT3g4OukZBNMooFREAESpaZCNGh1skTNNSYy8bmwkP1Yaf1CKvxEXik4iucsenwYKGJQDCreJoNoksDHM4FjbruNBika5dkaoO3o/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcluOK03P0rSCmOSIxaiz4s3ZaCc-WGDvDl-SkUnvT8teDAzACq9g2MUtmNurruMPxWI_qqxcQ3syQAK0Qfywa8T5wf9_gNntobe8HhzvrZ5q_vwXJBxYlh9JSLpoo89xmEErU8HjpkGA/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ02C72HqTRUfUIvSm96chuWJ-nJ-UravcX3gPTHaHP7YB-VucJ2301gEy0vAvU-H4rwvrS_VXUbcC0vXQMHt4_lBZb-_TUWRuSeHVaE1JkluvZuDeQyoBRrWQLkqeHecJ959YRd6FBpc/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipt_JJ-qfhHB8Wzy18dLLNw2USQASSzrYDpAU-ErbZV1275VyjtGRlY2O5e0I6mR4GsclNkH8_8w0NldjZ-CZyFkqyOL-VwbkaWJEIk9s9CXmGI6xWA6NKFMD_vFAhyz8_-pwPI2Fjhdc/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQeTDfDeWbtfwDQgY7t-B3mpsMom1Rvlyw3NlyfsJeiXU3g-ds3lGPKPuFoqW3fVmuLDwjqLLbZpNkniVD6ByoXlU3WE5SI6PUDpsvb57HGxZYR1OL1UbPGMh8ej03ml57zdFtwEjgqA/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgF80LBIwqtoI8LWXF1d4Y5XttJ4zzrcwklfEgUjkQ0nWv9d_byUyuIWjZZvPHfFNOVuMXTP6xgDXLv6VvZIs40H1v268K0mBjIVcVe4f7ew_mqkwX6TTlZyqNt1zTGzyUi3a_I53IV8/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezYFKsC9Rd52XcTpM-DuTwuI9GelkRb1HD9gCa8DM70ZESYVF8lmau67OEuxEUScMPZHgHOD1k5oO8I0bZak0OooE_C9Z51XGTVfWJvOpX4PdIMfFHuxquPYjsBAAL-iJOSYeFXwwBNw/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnUaovLAmY3GCVNn9I1XKFfd0-169f-lfQKQIIvDQ0yT4qI9xpcv7Uz9yiUuzJHuw5CpW_WrKVBGIS6vKJa46gTOJhyphenhyphenUFcgDdGnjDg9v_WZVINNldkO30cyJqdKJgTtaj54wy9PP7JlJ4/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHo_GCg9p3ol3zz0BUei1y8RHWW91meoscdAae1vMiM4RHQi_OxZBa2UCOizynksVmEcaf0kWxobYZdOi21P0q0i5trNnG_VEHGBAQqGSPaqJzK49Qc3867PC6yWIoW_bpG-sxfAd7p0/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhIP5lbEULa-UFcQNkU-wlyaD7PpXP5yZCVBxbRbIukLCvIRWBDMHO5xWL_43hveTJ1vZ4wTFRVl2BApIQDROPPo_3QRJ1O9sC9aIAHEfy_mNMs6iNLwUBdRBUQzI7HKFlL7uGYI57wY/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpIA6vk9k63m57ddpN8N7FFV3jSI20CyhrXua51V8FwcwD9udHz70STzTl_uqm7KigZYiVvfKZuFKFGyJlymDHi7RNM_tcio8Ob0ZkZ99z7eoGXItvy9MVK5URd7bNv1XDnJCRXEcIrvE/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlWvYXrV6CYXBTJ835LV58tYB_pybX4atjRjtOHBgNjBFZbQVnOOhIfMMpabFT0YQfUoRsElbleCjl7EYzwXHIhDYOF6tifpM_xMvYQGt_9AwGE4wu9FIWyNUP_JvJbQ52gXATs9U33s/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkAGL7xFLt_VuUVI43cfhzmOqAd2TyAwcAnNjgQ2xLtOuUWn1ANcCHLurKynOmBIJzHwiyzmMKNu7heBUX3v42sONbivV_sdbBsVfhPo7F3mhyphenhyphenXYSVzDyx7uc5ea4lEkwtV7IheVTTS44/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfml4igp4soKKRLVZe07Jkkns5mtXnkVkoKB712BTFYfbWVBLDH2use5yyeZQ-tly01hgPve3OV6KmXkBa0fo1lZHsObdiKQuTu3ElUyyESeM7p7tY5A3CRUMGMzuuzFK7Ks6xPiruiOs/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-wh3yVFg_l7dSfFVZBB7Rffl8Sp0f-JnuHpNnDQhhPbmu1y1NIUbv4OyzpBeHAzqLPSskSWapCZ0FJlhRXubmycydhfr38sNqZAByEMpuEGmECFVQ8J7FUtqWTNMT3XotAtrBcvkyk0/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijWZwN2TWZwPzgfww-DXgLHm0N2yN8EiVfEyVuoyJ0vllY9BUfgGqv57o67glNPeaaVwRc0yBCXka-nkjw4QEnIg1xjKRylDvB3c2HsR9WSia9z8A8iloYQH9byDF7JLQ-mzFPFVmhilc/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lPEqcmKrtp_kXirCmxZHfNrIFux5MXYPxbOjJqo7N__LSvc2txlPywnO5UETawYycWCosU30sdSm3VFU9Oj7MXtPcUxZgeor2iKUZgkECy9GhlzGxliYV98PMQcL-bJZwSgjrVvBpmg/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRRSgpQZlvfm9RThDjTCJfIaF-x2BaEpxaZkkrBrhtQS9eRRRGvL5jZHo20Say_EZFcSBhBBbclkbXpRUY8FYdBhCwoTPcOq2KZJvUjZs_Ta7NsO5_oCrz019qiGjs_9GGj0PLNm6K4_w/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Hc819lbTLq6qoqvD1IXilLVTdNKBaoaTLWBBSftstVpR8tJGu1fSdMPtEbdrkeIYK6bS8aU_k-fcSnw58ha_RPobuvF6JDf2TQJjG0RkN0kCfUkfiLK3dz4bmyHsjfs3OTMKvSTddck/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4znbgLCFtXGe668td9ebDp8tgZL50dMGwb7yf-Q0tVOh0K4K3DH2HpNFX3uPDBCv1irV9HH7k3Qs__jAim7JOEUwR1KndTOakDoMr5MhILJ2rtVPRGlv1m0uNvdM_OKSx0R0pppYqGqs/s1600/smile3.gif'/></div></a></span>
</div></b:if>

Note: Ignore steps 11-12 if you are using threaded comments!

Step 11. Finally, find this code

]]></b:skin>

Step 12. Add this one below, just above ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Note: if you want to change the size of the emoticon container, edit the red code.

Step 13. Save the Template and you're done. Enjoy!

Comments emoticons how to Widgets 16:54