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/AVvXsEjYCrzG2CHLsQXxo92CjaWe2GUnaKiVjAQBn-I8eRfX_hnI8v16f4vQAEIsrUkmJ-mEcwO1hwkikZHgIEb0wow0MytjQMQL3ov-hNCKpqF6IkCPgKhi_ayP8rzZYdNREblHCQjQe1xTeyM/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlWhn8NF_tp7FaD9dRqKMo3_ObKFZgb4asYzffkiEof_29l4F85bGjfhOqYee7sdi_PALCOPntVzm5uKGRX3zzyozgbuj3cLzPOXsY04OIwSJ-yp6nFD-V2zYuWHO9imlJq5w2Fkxi0Y/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipRONntk8-fOJrmq9h5jzW3RAZRULHmGFT-L70hpP3KsGvTlfIxzS7Gbpcfnz6nHYKdKBIrNufydoAaUVLjhb-vOo1qP-Z-bf15PhF7idiquvbgFeE_isJb-XOuawSmkEQZWDNDdx3Myo/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dXfigVMEGuQUo8u9IjQQEDY4f48U02gmq_Sq1QmH143r-FN1r2RK3HyDY9M-SaprQh0betk0ndqoXaprHiTFAfGDDyx2d8STRegVXoJNoNS2H5SrHES2yOrJ-5yxxtOmtwQP8IdHScM/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxzI0VQMbtzvIxCml0uN3QedEdV8-rD2n-LDaD9poCbiWBY6uBlcbpyiaGN-okWZapvxqlR8vxCTBTP648DBd-c9swUhmEJkOLv0ZJ1Hf96EnveEHfIHINCaS0mxeZ5DZxNqdlkCUdPqc/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhre4sk5rTMBDIh1TVQoNkdNgnjGczN6fYAjtys84RSqd1ZhjfRwPFTQ9Qi-EVk5_mBP7-09csj4Sa9ah8MdG_geAJlBX2KHNl55Ya26Wr3GRkp-58oMTEN58m7qCKu8kLpsQR8VEP4GuI/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyXVjZDxMf8oBlFSVK7jW94OhmI4ZecbZbKfId-u5Hwz5aE4iVbCd2QJAwB4qY4ev_0IL6t27qwjR8MsBEWw6UDSsvyr35pRMyYVrsdLWE700iSpPp5kHXySg2llVAuD6dv42aY-n5Jc/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2SRdJY_2bEhcee9z4jRS_iuwJ6I9l0WusVUI5HK5i5G-TKSCqBvFptKYEM0_PbHZRTb9zlyMVGkbcAJKzzqlGMMjqGCLPII3h4MxRDP3T45y64GiFnVpQfdIa6qGLyXeEBX1FBs9pVQA/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJc_7aaz98gNq_h9Ebz_G5RY-10wL-c0sbi1kTLKM8xhmb8goDe-TCZVI4W7VUwAwdaD3Hiuo5QI25iOk3h2Sv9Nv0zZqB0hijFRxVnFLMlcdJQcPiezjhicLu4ch1k4YSE-Q-Pe9OpU/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt407qFbwsalLwLkO_4MPtMU-ai4ULUP-zuENymZafqSs3CwYPC1FWWjHIzLJWh7jlaQ2SHnHYa1gDXFhnSdlSl4vuUqiWKTsUjQfqChyphenhyphen5ZpNCAPUw8GKA88eq_CTFKcmw5TsNEvpDHvk/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdSEqJSrEeZOReq9Zgl-WcH2bPH6OPQpcVb0e4p_77XuFENdY5Hd4eozfzuF-O4rHSQkqbwsGhPqnZx9Sqa9nPtz0xRVLLd3yVtq4LVoVeMYrJm85_eYaI9Iqg99m4U9vUD8iUOac-_M/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPritIHHVsiqtQG9dkf1S0dYqrpFNJBoy_6A8bzCrhmGgEdPynzAu4lAFam2KXKBozZL0OyRlDnxs8LbSUXDE8YSGnlOJAGD8Oe-vcMg-d0tZ2ZhLxAgRkhzqEmJKqroJtUnTnDwrR23I/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcDsOwlm0lwFgkg01UBzA8Y9Xjabpwz90ZTv1bdj8RQs-aabDlCpVL4Rqljy7fTsAiIuenqZlXxhXuevxIrYB4fSCU3_A2K9i7jhYr122Kf_xg3Lm58bsi7cSTdQ7o4Uas1uNSP1b8Ek/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXVVwgCEIObTI_4xJvN3iW9w63n9uBXjX5EiLN7-kfbM1FmvBQ_jfups6Lz9QiiwNqnn7u02itJptgjTArfsSCiV5nLNcV_LtAiPau7Ia_FXmNynK8WPXhxH95UqlxKrjRaaXs4ymN2Zw/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCjL7X_i8EWtRGqZoiAuILMvQ0D7_H6tDl0pZa5rmBW6LQVT5C2vtDJhyphenhyphenEE73ftjsASvqAGpgbfSLF9Ughvayqcp1R9Ys5MnnEAzdLMCwG-WeyAhIf_QMuhlqk2FXCovTGsbmv6h3O0Oc/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3o1ZEP9RDvPUIIh0_ntTQYZxqNJb-ZO_4wpFtWGt4u9ceAU1QsysKJW1sl2If3jXSIUNksfuhyoxxMG4zTvEuzY4fspEr_Q6IHa84RjcTujBz7xu5f91WiUoclIdD-txLLoe9P4wiFc8/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6y-U00bXch4BPmq7XkTZNJmnsA3rGbjcOwclkg6I1k4UaqgPlZT6zdDbiVzxp6nVtCvriXQLkCPuwLi5CNqkI2A4COHwXgc0d6pEyiYTAEGtyH7D33Ri_7euMXXtVDVI0Yv3AW29Jm_k/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYp46h760o0HKZbIHn3XAki8k8ouRcvAFgEuh4_8RySgOsVPY5E91fMQl_mqStaNXr4f7w1GKdKK3GAlwLShBJuQP5QD95jFcvuge46XZWw0k4AJ6MVUyi9ogE4JfkBehtzXgPxnwQKg/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4WATg6OH7_wiScezjb84kn-qsV05mbuSH5an9cHIct4hcgabBo3NixzL0CP7b0EPfEQLYYnc2oyKCPqnIDJoDdOtskNoJKPF1goUNyLH41ykuP4C76siRp5ebKimwHeH388TZ6HaSII/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7f95yTawZqaEbIBkAtaCAAQYntnVdFX72IScMD9-XEOSZYabn5gpxPCb6HYbMPO4Ov0QWVm1mThKeoC3yAdLZAHVvi21OfJL3CScrAZlJCYCXZpsfm_8QK5JHskRrwkQKBDeXQo_wktE/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYELkzYd_1qX69E-k84ZNFalIg0YYPd5gsVAZXSlGwcML3vREou-_K_ew5Q1adnAifqMFgxMA36Tz_zGOid80bT8o2vAjYRtsW41tbe8_kCRl5WzeDB1fYzhQYbI44TRq_hlTvN_YzmE/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeCqJoe4KEr1Uw3SLG_SMOzOVXrK4DHWgQBMEpYkG7yG-fA1sr4ze4IES0Yb3ODLIStFKX7bJ3sIyNJ0TErdvbkfelmGSJEex5nQOgVkg4QpeB0r7bKhjkERu2p-481fINCimP03U4Qw/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A_y2j124NVs8p28aTNdw6JaPifo69SpzMPK9M3IUPrulSwJiyYFn_ox-zBVQlRveC5_GYL4ayQAEIJzcycuqs382Sm1BvN8UuLObkNgt4g3P4S8WMSBgWrTTn5t_JPtLbeWPsU5EcEI/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnO1mfjfgjbSPgPjIBVq0g-GLhyvEfM_BcUb93UT2brYGYaedAEzESoRJu1eFYYRI7lGuO0pyDraNMjTqkcLDB8mxTY_2aw7lJQcCWBu9ETmoKIVCAYhs8fCwsWCBVNqo0PlskoX8xhI/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8JyYl-4vK6eAZNnfIAjNfztHOsknf6xQ2JMk4j82ZKhVlMoxOje_79Jpgdcjz7eeTeDIyCGAWzrThJdHaSDi1r5oqlavbrycx23gS0OGJ8RAW_h-WhUZS_pdUhuWuaVvC30RKmIQBLhA/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/AVvXsEjYCrzG2CHLsQXxo92CjaWe2GUnaKiVjAQBn-I8eRfX_hnI8v16f4vQAEIsrUkmJ-mEcwO1hwkikZHgIEb0wow0MytjQMQL3ov-hNCKpqF6IkCPgKhi_ayP8rzZYdNREblHCQjQe1xTeyM/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!