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/AVvXsEiLNWefWw5CMhQv544KQq7k9FKwLo5yfzi5qt017Zu2IxjkD1MCjM5Crsyd8rH-0Z-2bmsfHjdWUcr4bCjlJVIxtvmJs6JUxCw6JfXwuud3cx6RG9FgpmCtqxCOXDPRQIvDKVudR00gXHw/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonD4KDqf32Yf_GMIL5MRIBAKmR9fD01Im_NXIVYCm6waOtRGCSgcTuMw1diLUFguOCXimBXJr5eBaXjySWZhBuP5mJm0XILFIumR_yDqgQby0sG_DcZ_2ARgVceSzKRiZb39Kwbeuo1c/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ6OgB9NSe49tf3a7ca0OR1qsZ33quB-A-LcMbLb5_Ylvp4nQX8pQ5qqB-aDGfylObG4FY4c_UR974kp6wonsv7J0IaeMJZvgkQm34foj89KfQqwiJ50V-xb4Ayh0otAGT1ThyphenhyphenzyDM63w/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrUEeYkf47D8oDaNh1jvQQtbbrK2Na22c2m70gz_syu6fukOIwx7xW6nL_AtvvSrunCw4t4ykJ8RJc8Nx4k00_fviJxu8GuihR7xd61P57OqvOoCdj4EnEqS5O4hMdXvcFY2YIBozWXaY/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqu8R_TwXgOD8Kpw1YbGNZG0ZjP1PIlw-Q9xJueX3FzFRButRrWvdbcJrDdSTNE8sbCZeBRMcIO4RjxPfTOpEK7qKQ1TORukriv69jAUNWNpCGljrTEnUIuBXdBhlDG9o11ruezVS8nBQ/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZASlQyQ4ZOz7NKp2cIFrDCPiY41OH8kmRn-GJLbyz7fy3ByBfmFd7KCYEjmSXhy826rB5FySb-lfMG68WXaIwKcSwMXAr8Ko9VfEaRGe1XsU_GyWAc8MwhmRDb0egfHcqQy1CsmLQ-Hc/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKkebOOrFpiwp7ziytFF7nu-cpFnEuGtsH0q4F9-G9Uzj4Y8HoR2jtQa5cLGWkmwETcmmmGczMIbLUcBMEXBoZ_PoLWgtkYXXwmIeVjMqSmwz6U9qaDScJrGAy8xJgJpc3eVB1vq2dic/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OLPJc46x7H6Tyhm3MKXZPY_040sh_wCHRCcGxYoct4myHe9hfhUvNSeSZfnPMxeq_MCl1gPuenwEiyn0hcIMGMS6Wk6UdZ7KY0hBSfZ3qEaaD6KnC1CP0o_T_e-8wAtQyLonPVo1Exk/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmK6xialW5dRs0UYHgyC1MC-D46N8sZCRFsbn8txv7-veWtnUoCYQUVAusv3RYkvt85pR-Jtaiad3qDwjp-bIncP0zyMJedeFnaFljnwpCWNdIcp1KhoZs2GvP3h4Dpa_sQay4_tkN1Kk/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3A1fWdY0u81h3XkGLXIhgMc2CQs_mnV_N4KhTEHBxXsKr86PEi8EBgQ2k-wyBAQ47rbtXwfHD-9tKuMAVJxjfo7eZqt5GvhDbfRoZy8brEHfn5DfSm5viW3KpqRBtQp8-x_plZKijvEU/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOSqqdby-F-MqcuPRD6Mjnf9en9qjnaob0HMc1OMXuAiQoeSjhlnKQDJt-cX3LXcm-SgGdWMQKSSVbox5oF_tUcjV0uUcyj9LYciuPF-RP-cBAjILpo3z1l4U51Cce9AM8EEmXYSU-jA/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jWVeq63BRQPijwqF6fHkqHjcCu3OJZVgNEcZRanigs8WJtjPq-fiXanjhkePmAp7e1lMvMAXNxjhFakmQDvsBD8j2rHNAhpi4bQbRYaVQiCPGDqlLYpZ6wQNkmeSbcBE_78et24KBBs/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8rW1DGDtWgFYsChuOPJpYrRKJEO1s7A-ze-I8UMlEIRb62zxM69335k6d5ygQsj3qAIVfcS-uakDeAOMf5vLlRhR_4Ge6H-MBoiyoz7JZqoKZ9PP9_wAW1Or5xcsiF3F3kQnVR7uiUP8/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmZDIBaIR96TDSVnCugpddbKUACEgV4sjW7O9b3lAcm5ze0xYcyWlb03I-QiRunQpfEQug7uh7OpIxAkHDKWsKWTJ717Ppj644Jzc33mAsMFOLLjiMrJk27-BVAzKXH0GJpYz-3ZLzkU/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGlLuk-bnsE80o-BSUCUm0K4d2SfWjZFD6-oyEsLWYuXKmf0FjJA4JEw5Pvwx7MUm1nvD0ehmVwf6i8Ftfi4YoxDdxOAty82Ti3gyKwsfTvA0E5occyDH54_qzhyphenhyphendSYepyxCDGvctlA5Y/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdvYyP7Y5Jsekn6EhyphenhyphenroieRzRRqcTXDH1Ds3-zSIwJwzXb2ARyZOUaE7h85CEOPok4e3u-7TT5QIv5pe4m5GY99g6pwTtd2LI6NbpNu9NtGL1vBdTAc5Gh7g2BD9-7rYo_1LFDgjf_Bg/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08ahnegMWS_egvKFrVuAFCYoWnEQ2QvriSWMzbHPu4r_TKjhee7zTZsmdlGIjl5kKGT302V91f0JNxJ76it-yVwIFa1mjEKPVQXmd_sTWpRCrVbtFSPewppXOugrzsEcFDl_naSbehd4/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4A-1CieM3eJf98CoZ1KFX_-5YAA7uruNIj3UeRCSwzl4KbEebkMm16jRP6V5UEeRCLTjqNTMQRO9cgN4-b-z-mo525IZRO96EbolyuY4ov1WM0Zhq-cTiQY1GghwmpxfmRdIvbmmy6Ng/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcS_cZ03qRGEL_5Zord-XlgeLr8zFuTULccehgSM1MseBz_tHMpby1dZY9hD9gnWC8Y6zouD8UDYYa4-43c2OGHuxLD-Te6nqaOrls3S7qtHZRnrGv9V1DjBVXMDA6D60JrTHPXVVcSSY/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Y7iG5tGGTsfBnthUebTZX2FZbZlU36_TwbZbgdFuMvLI335oCeCjuwzxQDMHADUlyfwNk7X80_Sr4WWR2GPh_m0ZppthEywpvtcUXDZjnuczgYRgd9LwYh9QRyu37wEWoXYP5kozzoA/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMYDK_d9m-te1o5ZwbIW8Rw7ShbBeDZkOBYh__BxWRNuB1K-pQGni4ZjjjwadYsV7T_qwTjWwBK3I0sPRWWPKVC2Y2hx2ASDO0H3o592-lZuPgLl6fS5AXeQzDw2CqlmTdBn5cKcUdug/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSq0rtFPSXjTeSXctOugGzEfmUtLEY2VA4t0_cTIf1Qw8fRpC1EuxtrbqjfQS3AKnyF5RB01v0i4QHZnWT5rSr-d2Cc5K_dpOFY8eTgH4Ibd3EQPGa52mJxSJ9Wvtdpnxmi5kZSkCqHU/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEgMx5vQ20qnHWBvtwbmKTj9ppD2xUtkM6QTuPKvmFeKZ0Nx48EArowQj9FKpZXTfk6vLuI0iVPacxfKB2rVpY38-ZycBlorjwJW2b0SSr3D90Qqc-_EplNv1dy_RrGYn5MmbV5XMTjU/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXpRmCLWHz0iI0USYW_H8GyesEf2eMiSxleKDPs_u0yc90wj5aysKBHCBe2TQc05xCi2Qn4YjrvyFHLsvwGJY3x7W4RmCrpF6tQlN4QdzCuc1FZxm3RfcsXpoyhj_GCGPyaDyzJXyww4I/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywflqiEwKeudODw373gdKTnFg26JpIg_Orrw-33cDuFnZxVN2Nft9z-YGFzohSlHwXx9cVvCHf78fp0whyphenhyphenM4-SR6TgKGZKUld1jX7-JxjZkT-Q53QSi8E4K96AJ73QcIHfCpvA2CJiX4/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/AVvXsEiLNWefWw5CMhQv544KQq7k9FKwLo5yfzi5qt017Zu2IxjkD1MCjM5Crsyd8rH-0Z-2bmsfHjdWUcr4bCjlJVIxtvmJs6JUxCw6JfXwuud3cx6RG9FgpmCtqxCOXDPRQIvDKVudR00gXHw/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!