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/AVvXsEgsmgV98SDBjuvoluViMqVl4aTj2YRGdhq4G3kXih9HVG5aEnt6FNaciHySk4LL18r4Af_SNqi0QCZBCiMH-6oyGFQjomFttRtB8_pIsu83PM1sF1SU6Zmb8waT1H1Ywbkj87fx3mya41U/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpDFerz3lSJwnDIYAPcWbn3AB6Gbdy6_u6cZ_RAghG-JlIBzq5r6PshUcQaFhOTl88VoXtSKLejkmeIk89TRIYYzeC4IUD7V6_PsALcIROB56jnLqMI_mAzzQsgE2atK6NZbTvIERwJA/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsXseXat05LDqU_6DYpRIxACmrzpdJKv_-qIQtyxOxMUhRhD6-3DrXd9SpdPHLHBnr5MeCfWDeWzm5S-B4MZMgnZE67CRTRIkyKto7m6o7Xhx5bY4HxlNbp2AR0NfWE1AwlpGBzty2uk/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsvI5C2AQ8ha3CdJga1xYIsba_2uS-SERjk2PxmrPP4JzI-JlmvYFNA6OnBX6HNBBoLggYtQ632baolt5l4y3T99B22PaFyc3678jRxN-oH7QqllqGSXVQPDzaaXBcdTXkno3RcLM7OTg/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA75Fpr70RCalmKREoQTqOx354Mnw5WjR_FcpuWjBzXkkotO0gvnkHw_N2TW38yEkbfFBFVJFcatHs8tb5wsLPwaq5UKWvKE9l2UhxIeedcO04oC9H2duM9cWkuct-ZSSdTezwmSVisY/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnN99tFpQY8qTTPdO5N9llcyzHu-e4ziMOnd-RRc3wMhKEAhnCVv6PTOqYA0STE8R4ezRP8cfojOnwVdgdPsAdTL3PEws8anW_Sqv2SrgCNkAg_NTthPMQ8bI2c4EJEBoyW5-820-gbwI/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybGsdZ-P7tJZ0Drcf-NfgvYpHpIUdh6JjXgNKzMtahjKQiBB7Ej3N9HkuD9U2D1BPkg0H8elVo7vSpWvZX38agfCGks0ttlWC6qZACnt4lU16eG4quaN5dovigHA8MlRzwUmE__T_jSI/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_8287ihupbgfdbmLpu3l93nedH4jKUtDg613GTMTZT20woe-kS0d7RaHvzo96_HD-1apnPxPOUILY3GuyHlcfQaEd-7sUuy_yfN2gFcxtyiSz3WP7mqE3g6Hm2tHVbpPv1Gpu7pTIWQ/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjICfd_B8NWNobm-u1ig2Yo7AXSAlLeI-7HQIJF-Mlukw8aAyC2ltkl_uhKt8Gf1IHhr6-PgFQGyzgWnBCsP-Eap1qBUnLC4iZIq9earUvKLNm3aB-0l4LsCo6gQsuPcY-sDTFLEi9w6Ks/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-XJysIDMqVwftqNuusfPNYwNAJDgx5OQF1P1nZgLgj3ypWT7BmpZtv-3c0Yi_hfCPeyDwmibtS0tVMdMawFONwxsIfEkq_YbU9bhRrhq2V-dqbAO0EKb6Ln3S7WQlQKf9B_0QW1hdlUA/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mib_kK4xQUnevDatkiIkZk1FPGwp7_B9sYaX_DktMFivK_JYQOLl7U3c4fVryPuqYMM4I3cqiSOXgWmNNv5fJ8x1stgAESZ4mp5vUDNx__TwCj1nqSxOtiJmL_N8LaS8H2vqnWOzW2k/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3d5GJ3naz7mkrmTXQ5BeDKiGLV3Sxt__h9gN874rgKuA1wJLuPqR7awTBh0UpgcmBGv556otrh2aYRsE2z1CKDzCwQSpUjkyyg294QH_TggBW3fQ6l1Nmf8xeG2OrCCDqj76YvkRIglU/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix10syjFeXciKDe3hUs0E-sQnShE_lFqaGVBJmglV0o96L1qRHuBjRfC6ZMlU-xmaEt3ys80Jpu1FFGnoqMsVRIQ2bTgzbBGwip3jEkS2LE97DKdndWmJlmRQ7DFrA069L8Cu_D8PF0ts/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPJS4hI3qHLo3vGGz2t9xjfAKRMt6QX4GFomiH3xrDh5itXEhV2a_0gSldW2jbxhhJ4gjWe1U5Ihv27Kd6kSYWe-DCC_JtmWQbHkUsYXvYb3-uPEwpKo_zwnkT8P_zzIMCTLPHVxGYYk/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFikIlOsX3Mvp1mDehHdRfVwOSf_RTq4jBMe79LcF_8_QlQ1pYSB9xkQGhHOduT-A8dZjb1r5Sw39KUencmM-2NR_1BlcEg3v6mSCNdEycCNGlr3ACXeiBH_8W4gpIOGF_QnHA_UhlcDA/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaC_01db6tldjlV6NttVm0WIi8u-1KBF-CdiGe5aUda3Jfs0m42jASi5cceGBmRqKtDuS0BbdIHXSDnW4CzD347Ds06cyxd3phOlHqL1lD8WvxDnQfXeLIAqa8tiI6sv9qarcrPoqHKQk/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrgAWVwBI61oPl2cpJ4oyj31STXVSAY6tFUS6pvkONI8G4jxGRR41Fwh1YfREEgoUFTiHwp5X626HXJhngPI1cLQA9E_mGm-92Xfmt9ubcyzVMr06Uh5aeaapQ0JATDVA28iyCD-PWMpk/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-IH2-Kyh-278pF-SA9Hdx-gzhlhSCmGLQ-I85VNewQlMHNq2NHo5lbdAeTEOrjRQTjzo4QAWcvm4IitwtAy4jFvZPMOHv9Ll9OFm5pSwzfchCg1kdTn-6O9piw9VmVeHwK3dCjgDdctQ/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3Ufu2UtTD-dBL0ZneVY5t_AD4dEqUtmSvIjDBwQaiyClH0zsMKOvK5vPeZfewttJkemr9B7spQLqj8wVc4jZMKwlhxVko06mB4_Vh5l4qcO8EVN9EwrDImHNEBrvY5QpP0W_arhQVYg/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6InGAtrCZ6EFIMgN-7Ujc4KsQMKqEVHn7Wf0OxTQz3qrnzweFf6xKKIa1p-1nUp4Pop8e3EsV3cxornKfHx4pCO9jGy1UwmsoEnO1xWf5agXOSD3P0r6QHRkhyphenhyphenXRsPP8rLCws9fCSFQ/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudnhy6MlEjENlwt_lJ4aNBL25R83qEo-vgLAlQ08bOMQxttccpbZ_ZDP5MtWy7RlvqQTtQ2jSb2PSFds6-FIP7l1X3d957ccDlu-q7W7nyzet7sv83mkbcjlC355czsa9xx2H0D9nGL4/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5DTYojj3bU0-bj4TdyDTjXWh3gju2ScP6o55kMw6AC5mGhydt5o6yz8RvHotk7Q8FVmb9OmZOpwMCtsA7bNeUorbttfBi7xAcoALyy8SQlPwwSCIDXpCGZjF9RbhYNLcCbj13wEe-I0/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgela-uhkjJMuGA4yIJhDPzrgffuL5YtuQHa36FjqVdIFFCqu0tSIIX5n_cHCnYw7guGs8N_b8_LlBawFfypPy358jerb2hyXua-yFf3FuLlosNyi4fV1QxSRihoA_xsahbjMo4eCQLQkE/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6pVqHPAtzfdgJQPMjhr-Q-t-FEzEl4H82amSNDFD8nR8Bi1HR36HjSW_Jo33qDlH3mXbnHftCuJOIAEFDjVTVLVRMoC9l69qqElYiLewmqL4U3pumXnr_NU-ao4uWBKfLqQw6qV_Ekg/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFC-oBUkUBS9Fga9M71NNnuHQHuJpWxvpiFpUI1DlmlU2DpPvYtKL9b1-ycM5PZ_d_EB2ckJdlfm3isPgqdKHBn231K8hLjkKb1smZkTKxBeOsLg52JVw9mg4bwbl6FmIYBo-0_ZImz8/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/AVvXsEgsmgV98SDBjuvoluViMqVl4aTj2YRGdhq4G3kXih9HVG5aEnt6FNaciHySk4LL18r4Af_SNqi0QCZBCiMH-6oyGFQjomFttRtB8_pIsu83PM1sF1SU6Zmb8waT1H1Ywbkj87fx3mya41U/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!