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/AVvXsEjMZ_YRs5nuPC5Do5Ud7hg50mWnteU9vXXjNAo6pBAM9OypZzuIIWTTQEvFrS7RMIRSbRIgx3N2XrDZs5H-LBVwL4tY-DP3Hrz3R8rytsPHOUHmgOklDqb68RvG_qpcRjcaTtdY-iWAD_Y/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg558NgwCWyn9QaiDhQRST_gRbtuC8DoXBdeybENihDESBk5kyXTamITRlWoXabbn9rOxKr0mIgD58fXSII6Ndnmn1yz0i-f7dcNcvC7_3S8aUAQ9cihFKHvKqrBy0CBXOc90kWDlK0UsU/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwk7Z-3bemUaXERxnuoFohF2IZZg3qk78j0dzrSj7Rf-zTFqG7up3eq0G6yZQ7JjkQh7GyQtILw6okaNimfKlTz_H2HLfnVFdRiHwNsXZs4TQhT1K-3c9QYs-ujPUXqMVgfU4N6M0uFA/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA52H5snYTHfyCBTKdO55rf68kgSnZsTq_kSKhw0n-a1rrJ11wDZza7fV_Wd9O7Cpvz9Zc_NzLNA8TWd_IOqW-QTudyLYEXSjqFUnd4TWLZRjkOxdAFl3V5B8B8iEf8CWSkrDCVl76FVM/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqBQgebiUrFs_BRUKzYl-LbwvkfWIs6VdD_BosaLCGhoCIAvWh4kWcD7_EqCNeZbhtAPySsMN7IiKN9r6Cf0lgBlwDThDOYs3yrZA4fMsNV6fhy78PXK19T2Chq2TsUxBplk8JRfhgHY/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdcUJVGQm6LMPVE8jCdOJ23xUX1rpyaXhCeYisxbF_VAm2HVbyyFNn-G2xB_A0jIYSPHGAJEZAXBjZYEbQDpqKmZw_wPbPjhPFIFpjrW5XQVnWBNemX72cG-5OP25hFM9O3PxoB6N7I0/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-Bt6S6yZh44i5hHMPtBipz_DYuUvs7RzFdsUSt_wspU4BMgWsCpCCaHUxfkbF88bZNL0_-p7U_glxrw837K1Lnq1Q3tVFo4DEvEfj9VtKWKeUMgH5SWJiyCLxelxffuiX5ufErxMFRM/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZUq_3dnWVYYmLL8A4whKmQAGt23DA6KDtymVl0e3iFwdckDm1VfSBA2oIfV8rch0yx8iyvb21SZNb-dS7CQPWWo6ZL3nF3UkYmPN8IeXRJuVb6DF1T9QDGNs1LaLtumRKEetfuLKWww/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwX6lR66_KJePX33ECId3GA-p4FTMzfP7xiKCvVosQahd8sSWauH69YzJ4D69nqmWi0o9XCYyd0RTxvD3bn-1h69iHRzWt856iq5AlAuPGPqqjsJgqOShyphenhyphen0ITyLA0kEiVwNwjGVc0Hpk/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm9RLwUEysuVrUdeDF6G22DxdStMeuchyphenhyphenPSOJVXOk6wsy4C8z5lTSEFHIQeHWW3j3eg3_LL__TU4gxf-xD3zS3tUySJh-9JFHUuckrCHG4Fw4CtstoFGs-Fk4G_yjdbLivrf3Xa-aKBlY/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcz_v66DXkoctsCL9cFqMvejLqjY-mZH4rNTItJoWtzje84J148uvYrAYZ9jumNd1psxdODy4rBEJ_cjMS8740ahnUDaUnECCSppu0wk3f0GvY-nfHGuGPFfNt1KPDKiF7Wic5uISkvyM/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AuesLqLo4vodE-AL928wdKRDp7gTv0cavVxGqfcpjGedJUCoCapn1iJdSGib34ga-GNIvPyUzQIZd3KfdMmPyUJxwpEC5yhAvbby3IL0vtqb84NWjmjgIjTtVPgZ29bUzebZnYoHafk/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMT1vXtmjFRdcJQXSmG-xMmfM4Gqfr9mScBvIql3ntM99vX__B2GRXKKJ2B4A5KAhl4-A0PQG4K1eo3qVNPBlCdT84rqbhi0iGFkmqHyTklh0vjwemUn1QtgEGb21E2e_wSrRKIq8BYD0/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4QkVYdhUmsLBVrcLfKUTy7Novoc-sJZDVLgB2yjF59CzPXMal1rEWET6Z9BON1GZMsPeGpMjVVJdNH2brhRcoxFNBN8XhOWCQE-uQo-IRr2GHh4iajizKvl68NtV3lHrrTiTz8TPjeE/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIvNM1gwv1PeTzTo2sCN4HnmM9E28HHw0ZjtI9g48X38YWvjUP-3Mibbw1WmjcO0qJfxpv1wboyrGDtp3zPmE_EY1CPeV3AnlsCaWQDVZ-ce1BP4vSNFeHkMasNWJ29cum-6sovp__yjk/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8dESApj6hK-GiIJYMJ4tza2wZcTl61xYhWAONJTWcpN4JD8dEeqIPcJF-qSOryRxOQhu36oJV6u7lJN6WHbxVqyHBwVKu74OaJVRjzRF8D-YlI2ON13BJ949kQce2_FpvZd_pWe1s9s/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMRODFc8OASuGJpUDSF0QyZRx6z5MIW9Ky64ZPYkxjUU0nm7Oiov6UgG5Ldxq9JDrWyVp8nfLqWWtBPGseVKWL0WGpHQhOXSeMJVsviYycAuSuGpvmOif5aggGeMgxDqF55LNlmIa9JQ/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzpMZRxDYkvR95-CA0aINSLez7ZPScE_6BtiQBqfGeVX7pXEsXoYEepfKjCTJx7KI0CLVPgkospRBDkVNiBPuf9zCGKQ14Q5hybfv9RiofQA0VQlo5FfSts9tFBB5IXdBeJ9RA6dvCTc/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtz0jieatk2aeL3DqtL2-Wd7jmx8Z1W7notZmwZu2KLskT077OPT2kTzAeNh9LssP8z3KUJN7hyphenhyphenvh04YmopNUb8lIIeESSGGSQQTbMVpOg6_P6hfLnnVIft4NrHmKgJL7t2PyBqbfUl8w/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiE5gPIpRZFHxfLgdaH4wIKSHxyupf-Lx-40_ujsws8oW07K5YoieyyJhiItzdGgZ-z4gnJg6ylTdU9ZYEKYiYEPiL5fDf0B41dDnmd5VPqXWyiKgNNsfjrLKCyOlrDPOT2jT0VKZK8qM/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnibBntVpcm0LX0apUpM6b3TD1_Nzhq4HZfh63iBt6PEhDHhF62OrLKDeYQ3kINtjXYvStCRGS84SgXqZLKBZ7Q_24uPQg5jMrOnWw71d6nZKoDzhO6WdmcQKYXjNaoZcPVokk9EZve0/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQQJKJECzmln8LXTGU6NaZdPJ7l8gpd1cNmgsvcgsBRzoSoJTdmB0KRYzjz-tRtpaiJhtaU4khOqiyAbWfILRWvp0NGP8F4HBLk7c7cHlnqXVRx2M-WpXEhGTdPBfl4pya-ZLKFJmMls/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWvgOdBtD7ay-fCzOQQ2eJIvMDkci_exyMKI9vLADLjDDJrGbzPqg7dcwACzgV0zsCUU4nMerKECQnExQTovkWnn72oQdkEOOp5VbIVR3LNNMX1K4kzIu0W8P9QBMuuRSUbICQkPeu_eE/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiir9LjcoojeJwdskaATa_NN0dy4Eo41cMZIbHA9aLzJDU-9zzJSicZJ_SKZQaPEiBCCSLZPSPD2uNkH-PXmKen5cc2y2gsjZrwywmIKtdbTsido68njZjbJCteDIDSQUMN0qpLVUmAdOY/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6uKAMopnjeJBvpLi53-HzJn1q4LUkj2JiAuufhhUiRKNPZ6zkFplog7UYLjhTdU8SKZYrdEhtw5Rhr3-b-doBT33TcSmifFrF-WrOJ6jM1SN0jB4dv5hvlUXH2DaV8nmJuJz6r-tsog/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/AVvXsEjMZ_YRs5nuPC5Do5Ud7hg50mWnteU9vXXjNAo6pBAM9OypZzuIIWTTQEvFrS7RMIRSbRIgx3N2XrDZs5H-LBVwL4tY-DP3Hrz3R8rytsPHOUHmgOklDqb68RvG_qpcRjcaTtdY-iWAD_Y/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!