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/AVvXsEgTXtu4nK4tCQYqRKSU7N5RE7VM8K0f_2LiXRT20WIcbyly0ArajktI9SEm2wsCsKV0UkjM1Jl07lml-36het2GYddQ92zjlUTd7SbCgT6b6FihwtNSt21rhJxvY8UvXrvZ5nVNy1ayap0/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0A8f-EScfpSlcyKZLQe7QqMCAQU-MY_GoVlL2arzMqpx2-fFeMwbv2l2g3NbxnvaJwPybaU_nBZELlO1rC0dQUJWlUaIt5X97LJibVOddq26NtuD2lcgM4QmMc_0gldKhcrHzMut2DBA/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-yvyYeUSiwoDgBjzSOUtsQiFxAidxQFUb-4q517T-PV2TKq02yJzbPDwa7ehM76jzmVVkKj6xm6uq0GPAGA30csF4H_l3K3U76IB7BsWGqDpq_plY3bszY57yguTnDuZEPn4b4Ua8pY/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcgMyQ5tLOfl2V1KsN8BSO2KX14BzR3-rWXvc5upFja5Qs5BXKRf9_C_5a5q5-RUWRrYc-ugEKvHzVmD78lO4L5env0LzNOfhmnphsgo6ngFEioEQ1NpuqKD5DqfDEi1-YX15sj1X9Mc/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBBaUiGJfo_-nBbly6Xii8lOpVouBQpJfQgRy1yDj0awDTXP7sA1hPIgo49g1Hertx3LwMgoE2dPz0R4i-W1g9FD2fxuqsyvni2gZqyGKNGfMY825jgkjQ5yrGhlsGVSzhBNaKqJSJJ0g/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPDwrXcbjFwUkS_d1JBkf2fEP18ui0poS8zNldEkk39wRXqdg0fAodYQv3ur-v0oG4aXTYj6IgWb3gFhBhcoNx2TyfHA8KdThfPnyNUqgg1H2xYIomdqZSpncP5Y-U3JTYnBhSMI7cPg/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTFqkHF6eZ2Nt0Xyf-5VFpn7MFtmY5YO4qb2i6jwTJ2ZWjOLv7kdNXK3M6oK586fdj09O94MQVXew5znffrkkQpqVENyCALxJLNwPz4VF1rzhFYYLcZYICT2FHmN__OgRN8rmHkom030/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPiQHbfpH69yOi_W1o3S5f4R4Js4taJ982CRgFl1XlEz-BVQx9ZouLv97QzhiB72Aeiuh5WevADAOmMQ2QLNgIHNbtVpHuzThK_1zBBBFXutoEQ-PEKNaIWSkqLhqgMbkBFQids9u34o/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wB5Yw8kaQ7oQHwYBYCYtf4cohnhFSc3-xYUATI2MguT4xc0PBUh8_KsULnDwS3BQOXTUMThye2_qd9pTawg9Tb66Fn-yZt3kHJgi9L4nhIVMxxD8qIFrOBQtn3WrsKpZbN4nf9CLMbs/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8r4AWRgWb05WBD_RqK3r2BKp4zkQ_VgzwXmzconGomuEFsDXbnsX9thiZyEI3zd3Mlg-YW2MY1cbS-Fhm4e6Iq3ROuG8GRn2x7LmEMJPcfc33feBgZD7fC9N3FJZ3qja3E3S2ECqQd9w/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExJYj27Bj1_srUTKiRxN3kvRImY72Xf_3hm8KAt9wYEbcqPyFnLavj6Hwuc89eSjhzaYB0vvjzHAJJiZ7JaP7uJDx88cTGXOpCE-A3L-8S4CbFy7IdWVoV0zys_qdCq9JpE5ysSaaHos/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUor8SMQCESFABuN_ugJRwMYNhjlmoYp_k1PmhQQlJjoLvxH6LSYUq38Vt2YcblCcUwloW3bVWSK9pO-q6VxkR47ryPKow0C7JBvAaqNXI44h4wWkH93KjrVFskXaNQ5rzd9qgup1GME/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFJrZUjOJ-tH5oSekbtobJ1HcOXBlDa9ftSg_c77ENpzGorsJzWlL4wvBZvYvWZ7Ey2AyYfZgKiBedhKHkORR9_LFrcHJMDa_mdNlPZ08Os-_HSgNlrU5R9vTWhid-SUfEuH35BZKBUI/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpuJF__Ta9iye5MqD_mqf8i_fG95r0w6bn0THOUEYni2Ayc4wpcYDLuJ7tWP7_5KpM0uKdXqllfh1v0WrGaSmltlx6gK60jMaQgvtV8nHsnNxw0G-dAjtL888HHHi04Oo_As74S6ypic0/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_zrRkz2QGjugBjToQZwWT7muxtNs6qSQS2vn8-Hbub-C5qhQ-9ldyZx2dIm8xqB3o2VepHYjproyyxQyjXEN6hPtOWAbvQkNh7aRLY5tU6rHGOf3Bhj53iwtjZOHGL2vz6pRainWuXM/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigh1ePl9AoNplaceYOg3YuE73402IZtuE29ggQtqLeKyAqzD_QV444wuqRmuWHqUA-A-5_BgO1ERGdoq-vtMtqBl5XzQnST6TZki8W-d2CWec3bfpIfXV5IYgt2yZJgU6OGI2CFIptbyA/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZdKCZQkmtkY5cVJ6QmcgGBGrgyc2-OpLEa-PXKhkgcl7MtQgILXa2GCOXtpi7X6f8FiPXMImuy8iE-I6NcrzOC8NUDJOMMUf4EVHQ1rSFZmB0_iJULIkEC7ATEw6UKjkEvCY-DtcOqE/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkFUE0l1bx6Ilmp1U7gv-FdWgPlQp5XMfOyk_VfAghrhhWuPLYs67nBibwEZ3-HgwLMERn1wzpMkkEfdBlHoSj3QLvQ1B3UxnBGvAKaO5i8j0qmv8MPm6p6CsoM61IkllBjiRDweXYnM/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1zikeIVrp-KLXJp3JIPqku5ydqnDEthV0-Ocl-5ujxBinT2cLxrrm8Cjrf1FyL0ZqCjTOPjW8DR41iWi_CjsFB8taw9VAY5i7pjY5_NhKDjAnwwknJLsGF4lmDoJz6BbVCSv7llvvTiA/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlfYXcvBlFDBceo8DaygyPDdpdgg5OUvE5rvjPbseo9SfBp-VxUv3tPpWBxeHiNJ55kEtMKvlutU3R2x_px1j6_E3tnLLX4_c3gkZMchTRBjAx8QGcMl5MOwudfTiOUaT5FcAzjT5TjE/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYR_y4XOW2j9BK5eTbfLiZEVjoA_S4bS751u_qrTihaMj2maps3BVB57hAz_bEHSri3a7Iqx5NUT-E9kv5WdkU4Ra_FwIan2_TyHh-h5-GFcOWJLFWUTdVc_7NKNiBkRAjVQSYepuqLao/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmOlbJXO5-OJgpns-5fKZ61xJwkRpN18XxJLEIhT3bB95DUU9Uf5MTHXeFIyfBFpzq6JEWF4KAH7z-TYbBapSHmR9E-RRhV7sF02smqDzrN4YMjwJKa73lT2Teh8gtNXh9H-L5bZMRCg/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8_tcbl_IzbskTICfLXbQlMOizFYCrQlXDq1WCKOiiGulyZUJ627VW77uVaElK6dJwS6yfmXSm5ldbf8rdFb9eyBd7DdxgSjGNfFMBYiRVuoPGCWtEiQrtKFPHN-h6HfdJ_CGI8xq_EA/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcdY6v_wM1aJ-S0skATDXG2kQMmhTYgwAvsudDhD8EM5ri_OrrQkfSepTnHNvwQPfuxqD0gkxoWgOIfuD-wflYvyUseC_JYdMS5UBwGLPghhTfru6COoREp6GOtyA0LD7TIBYwljy1VQ/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyP213SWHJPyMsYAan8YQcui82Oj3iS3bKPYHPqGupPILDpexpGeB-fqisLgd6HcIg73ogHyLqJBTcu9SMixiSmukg1vGcJ4TJ5evF5MDM8MFveLWL3UjtPB_62zZNmwjpBiv21nnpfU/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/AVvXsEgTXtu4nK4tCQYqRKSU7N5RE7VM8K0f_2LiXRT20WIcbyly0ArajktI9SEm2wsCsKV0UkjM1Jl07lml-36het2GYddQ92zjlUTd7SbCgT6b6FihwtNSt21rhJxvY8UvXrvZ5nVNy1ayap0/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!

Comments emoticons how to Widgets 16:54