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/AVvXsEjnqB7TzlEJkFlyPW2sI3gEZqS7OmuzQ8YIlQ5kiC1uVF24IpM_g4nPDrZmqiZ5BRwy3ta7Q9E4QaUaSu9CDxsL1TQlhyphenhyphenUY-mbVDMhy1Y8SzCUr1qfQYLADEddMWMum_ta81lHRLUlrTrs/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImnl84VsjSqaePeXkes77f35JRLmgiFfJ56bUXHX9jLlSn2yeFc0Hc-pRpphIkdvcVPcW8lo9oo0Of3XH9EuAlle_lVVKPUUmoG5aA_1aSObCdAdN-2vGxsDUYy8jODDG6RZycGrO7xo/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNXRTwVsjpk5V_UbSmq6d0YV5g0ig9xFZACW_pafR_orYizVg-ww_UqROTpcNPcOYllDVkx6zB7noIrgCt3TgeUBXzxiJ4T29ZNYWyIr6H1ZLDochhzeAP_dixmgsG1AjmYGrYjN0uSY/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLuZDmCrTuBx6GkVFisvfJLHqfDt2RG2OJmFWYZ0WhGdkbzZKIgnoqKI28hDkcpL2yMdfeeq2esa5y0_4Yp7trK6yRxVnJYTnJtBUY4MvGRW4Yk8OZhHBEYXkSt8vHrbKLivg4JayxXQ/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-NCnXMOrxUAqXlOzgRNQjSh1C9J79ijhAR7n43YaNIFhmcYpOIHXnxH22ESSNsB_dYO2LPG0h_JkM3dAr4fgfmNH4WpBZoAb_iMRbsU3lC4mJZOzvkGjW_0xca1e_zq-WwWMmsQFR0XI/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCeQ00kKpWSmxHhhFM4kiYx7TIkJVbUZYjK8K4c1y4LD0xLfEwCjIYMYierTGF-TeEx_26i7bH2ZAt8tAUv8A-L0HDBZf8ngu9_4xcJijLdjU6Y18ozaSHUhjYwky9t0W3DW4ahb44gk/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWkn8Cnz5NgqB24eXAspBGXtslh2iiuMXX97lqsB3mgoZxiLCZEJN4JG5i9VYYhFa6mD6idtDNQ2kESEDYxggGXz59-X2r7QBDfs0g2cuBxKeXK9_nKGaPyRVmzhfnQx0wD3NWqLxZio/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBUKP2bEGPV-D76FBhDPWoW1efAp_r7itA5NQBq26MbRWDj7Pua05x2mKmJfO08jju21ZfdEytDkQba4WAbVu-MdBC5H55h5X_Z7brhoQ-dJX0gZswtIVXVNO7BjNgJ5VGgvXzCrmKJ9k/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSVaX-H0WqrkVoIAJ2VWI8frR3xU-Iub37RWOeemhzEJmiZDAxKdrlgyaexRGcTbmKnN34MS897d4Z-R-ShwgaWcXDNUnJxlh7TzBlNuu4lkUBGt_0yJRQdUpvxyX_cAzgmIjIc1xcczc/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzwUjlLQp5fMI4WqO4ENiGks3YJDH-61WeTNTIZpANPuQzwzo2cWP9d_SWCLeLW2C7h2t5m5XCfsGaOWeS_GGKOaX_Cr_EJ5xY2scPawTSdgl3jq_gvCK33l4o2b4i0NALQqA6bYzTxA/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUcKFFswtuMRI0VsD15kn2BboFwWpCUyb5FNf3YLw614dm95ooD7hMfQlAzG4_wxxtPRTuocEPcyl7KjnrbvsTUv6U6E6pTTO8_FjFlQ6mJ-6H4K5JNw4vgQZRONt9nTBoRbD2NVUZ734/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBK-YljeKAcBxZzJIvcxRwzgPdy-bYIBX8tMHc24ROefmlPGdYKp_wwNcJuGZDR2DMbdbSZCBOzJieTjVfLq6cFLLND6p319XtKM8O6lv4VIaZ4TRdrO0Xu_P7J-xyZnhfpTPbqFxklec/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Xy1RUfhI__K1ppno8WUdAIuK7Vc0D7KbaFgzIyMEb5rNW7dfoRH7uytkmXdmskviyMdOtfdaSJ2rkX_OUt4otJlwKCYPediFE6Lby1XjNQzN_o3ksz3xKmuNgTBsvCqwdgQ4_onvMY/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDEveCVpKSZqDqPXniOelapPw4uuumPefj-8W8Wuiy1wXMBDWSVtMGgwDRv8CwRhpQ9PN8BYpXHKsmI8871blabg8S97ZNbSXFgbGe5dMJCfxJtBZvX5VmkI7sdXeYGvU9m2nw61Hv5s/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTnrodPUSq0uzZ7qfvr6dpiShy9ZdBpRTHZ8qNAY9Bv4Wmi96PidFkJ4AR8P5bCPbvnYrGc2EvUHsTy-Q4kkzHbd5kfBN5VFNiUkUBDp3Xpj6Pjy_TU0gxKe6YWoY9-EHVn9DedWafwY/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimu126FR_MdqvH4kfwMD6wygID3jYPfPO5KPYmjRu6t8q47bhDAH58eobgvId31u3xQ9pi6GmYnGg2V7dz4S6nx77DzvFBDRv_z4uDHQliw0zvWNksynYm4hUWMhSx78x-drvwh9T5zJk/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPRWTyiczt5QXzcrGOkp_y4CxafPd2_TECAoqZRKMwCoT_4Sp9Qm5tnJBHMCIXizNR5YNbzNRBJBtfoiS-g4CHRICDIw9_GsJ7TPBZRpZPxdZd0LgZFrWwJIPNqC1ef4F2hrKjdJTeYA/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5qRfNQds7DzhgABB91mHQ_to-SRoaff91MIbPe1KZEAKdt-ZCuYq6Ly4Q_0JmGwBqPnezFWBBqCjm-G4iF2HrRhyphenhyphenph1G3_hBHaLt7_hI_T2Gywj1MzPspRIyDqof1B1RbpNOhoHyteU/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEmUnuCY4QYfrYj12cdsb9ep4KGU0sU7rlqUi7olHHw9t6Sers4fzpalXrJYOx2Yfe2S96MUFKyhe5PZas6AUKBl7DFlBaSBwt-RUp3UHUlo7OKLyq9BmFHcGTXgtLqiR5i9iAwMguuew/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49hy8yMCnBIF18VJN0KlNfq6k9kg0xLCgTKPNx9NjiUtmfZ7cefG5i81R784zlLMLkWtUKLqtNoUNvk7pSnS8TtG3ufEWltS6ZMR0PzHugGr0TJA9ZzC1LWakMYsaPXg_e3GysFCfhhw/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNEpTlRVKEQIfdyccG1l_KIMl6Z9o9OSny8wP71Up-gyBlLQqgSdh2i7Zzsxah5JNc_dh6kNUVez0c2a3EsJM2vKPKonRoSU1ydO4r8u1IQZYxqnxvaXq1Zf-KfM_82BOwWUUeBVyg6VI/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUf7yBzJIQGqUyDXnbq1jk03hLQuIiqH9eIy7tAx6nGoEctVPIpkLai8uiJHZ-AUolkSonL1umvGk6jkBRlO1SKSLxzAFoTg0bdWmHNaJqhONnDdjGNgBfY-9tDtmTOEUjJPGq78lJ0M/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqkZvY1K2PTvZXvhWBtdKJ3TofITETZMLkcXXMnHfe2YUUbQHm7_xKQ0L-RQstUaxfaEkNNVqAgHmZsb0Y0lfwhkNt2DLZhrf_6wrShDIg4GskMuCsfXKYfKENKs_BMrcWEMbI7MqF5g/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuo39Ci0M2extd72h9IpdSga1E16GUyA-RP2RAA3l4FnO2LxPaixwqIiXXFUKQeWzafm7CPZRMv9TOhWhoe54qOPjLjJz4b8FDlUB6ubn5WJlATfm09uGINgXkrIG4PP-aj8hrH_sBtYU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbv16ESJErNyVe-ke2ZBKEwOnT9fviTD5PLRJ603uaKnDmNh32nep6dJ_rgJSAurPigGt4Zi3q3auq1z-n-tNKRZktumj3dJc4v2W6NqmBeYXlh1T364-mPA7QGFNla9dFVnOWpHAxSek/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/AVvXsEjnqB7TzlEJkFlyPW2sI3gEZqS7OmuzQ8YIlQ5kiC1uVF24IpM_g4nPDrZmqiZ5BRwy3ta7Q9E4QaUaSu9CDxsL1TQlhyphenhyphenUY-mbVDMhy1Y8SzCUr1qfQYLADEddMWMum_ta81lHRLUlrTrs/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!