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/AVvXsEhGHjBaEIk2StqXOEeI7Jqf-CZfjErthprW38yHKKn7sZphMBraIPfNKlm05YAHc7uP_9uXt23BUoRVWLQ27DylN5hHtEnTNuVNvg0V_5w7e-CIL9m3kMKjjr9MsUiR3GSekGzmvBwtrLg/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XZOshdTrJAs-ctDlNn73WPEaZvsMKVPCvl7Vx_CFABoKZ9Fr2CGGOYVGI9Z07YSC5At12pMK2BPPawbumGFwFRkbpuojue2QtASiZLiLrrHFwKJ_n-DnpnJfKsXqqUk2KhwddiyELjI/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFBmCa_IWLf8R9_JSjN2FoWQYk9YFBf79CQ5y8ILwPO0okkw-bcmaVRpHRGe8nkwaFART_Ga7iADW3G6te-3oH5Pgdmjrub1ZJ3sVe_ouoMi4Hsdxc4r-0RXjBqTkGyfryHWXplML_Os/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIrfb-KVwIa4cYcKOFPpRj7xrEVLqtydv95VQDZfE8IrtCMO_dAwOetSzFIRoYv04RRBqW9MhYZSJJjF0hMh4QWW4o3I6XoNboeqm0PhZ_VdWbU03KhxXiwZk8T7jmDcOVIyd8GTdl_Js/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh9d7QSdKaG2XUnYKsyRdNV3vDe68_Ip4JTwqG1urfraWIx5-iOAUseW0CuuXqwLrWBvdzhyphenhyphen7D2vswIB01A4ewuam66iJqZRwxMUPcf9_SZOvfB-S1pVwV3AhEitnOiVKZFSq8k4W1ZsY/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3nhGowp2n_4ofY96HikcF4OE7vQLr5vzAfiTMiFprmG0_NFE9frIrsCnkwHGo_eY1tXIMUJjws95VSIL0gw0QFoaw9rAOPIHVULHvPkHpbFLaivZeJGDchwxiloJLEjgsWZDREjpp2Y/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicZfkQk6sKIsxAEPLDAjrgr9ifFIDlgM35lfH9Qn3TXViyQXVeSF5U-0eWv4g5_zduBckl91mKgEsh9-OJExCettKUsjIcfjhMTN6v3psA3y9IqBdLD7UzIMT_lPOF7iawJMoWC2trel8/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdjcVOci_DYUVUkLguI-nlrB_83vZB1bPm6SNrZn__q3Ip3WJzSyNbSkAFm9bATVq8BwEJUKrAhDyWRaatJZfCncZ8FQEoWvNg25pN8OXcnCOBcp7XxE9HJ9TMR_2KFgQrNsgI1FnjZds/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsY3p_bWyDADyoLM9IXd-zXmE2vc9GEs1X1EXN0nJqzzyH9yTzAirJ-GCq40A1zba0iXeU8OZuyML8Sor2fyPBXXo8hfNSk8Xme4LRCeG_qs30O_59pbIDDRjVCYWv3Ubp1dUbDX3rnBA/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTX99Au87DtQ53P-U4HbvV2T4fUslkjzgxxR5qn9F8BrpSP8lvGqWfO1ez2itgLMSKvBjUdyV5Roa5MLKCCT2cC4dFfCJefKV61gKiOs6gH6QrRz-AcInl8lq9EKlEJjyt0fDt8zwJJk/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyu0aXBINADPHknKSBMRR8y9suWk34riDh3O9QnJ0-ZruwG5Z2QyY6699X6dXW-awCmtYYJyefyeH7hSlM7DeQFGV3eZEqck-YZvTs1jZ7sMpNF4OwOE37dZNZX4-8bepz1s_sbQtXRp4/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGEBExtCvtRJBq8QeI7heCajFiHoluKclKi9KuRIPiWTYk6hPLGAHw4EAol5jQH13IYheDF8fpsDznUAgm8GD3ceeLYDFkpSaCE4sWWYryNMGqhIgNafnt9n4-loO0yWpN-a2QFzLKiKc/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxB0qHsvT0x1l2Q2LslcEw_4I9bkIg16-s_DOMnxDPleV6CJITjfsElB3mAHJIkylqiboBhWmViDx1WKz27MBJRMz7_sUu6EHVoNt3LlXExIrpWwqNDMICSJ-a974OE27YQkc5iRTkHBA/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0IUMR_5aC6VFMbPmJL6x-TE134r4BgTjJAr2bOFDlF7Z0SasyH7ore2u9qHUSmP76AxBZVy3mRtnGCHFr6l1VThxgjuJTnaIPVzhvRl3el3F7WeX20XWoLZeotpbLelsAan2kJjzsu0/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gtn_Ip2qSwuL1z0jMxXDzf4W0udh8J1UxSI9NyjtRLFvwqB8CFEk4BIqjPm4r4GxIDT7JUgNTmv6PfKHaprLf9gG60LIbsHQVod0lus5eRsUy5rO4-7PLMAxEnsqOU2zGOgmIjhQ6OY/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Gb_SqL-9zEo14PjYNSr8JDixjS3PJJ2ZB6JhisrGuGOnjia8_uMUQsmkD0fD1Mek3xV4OOeZyG2BPCTQC8P6kyspKBLsFRNfVdE-eHt-DztXjX-Ce6CEGMonyutGPrzW5c5njkfZXKE/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj43CRox1mMBx10-VZzIxG12uieOWCxlke0t7NQf7xL3B2A-dziGrMkrbckckLiBdF0Bos2XDDt8WItaoWszo_sohom50oenrVWyZsOWvYrfx3Lwn71Xjvb8upAPwyndKwUnGAseho3Q7M/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6th7UZUYqb_4WPF479vf-FdeZ6m2OoTPcZQ77ArZN54XqjE4umsZ8Ff8q4Gn6LXcR3jwkw5UA4_gxdm7WEoafTZtBoWg0UgjtgpmTr9oNIp2svsajIurRF3oNhT49uKEJqosIRbWJH7Q/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKCIGtmVGJQkDZFUHT1rLpSHLHeGyyuGz3rh8Eq7AqvDBwrxLHQCKe83rHKP2srLf8uhlyxpXaoLEpXfwvqbUKYRdXrSty_xcsPrcNFmzfXc3aThnMcG8PMS7k_AZqT9Bfk_qX4H6PzeI/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_vWX35kF0MRFDaWb4ORoG_LCEUMa_53HTiSRLhIhMan6NTSZXCByp6Ia5qV_daNxw7X2rQvrSC_qk_cy1H3hyf4TkKF5aOofwUSgopWQd1UngJKxNwUNRbyd2Y2Xg8nRQZIVALPjOkQ/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVyIwKHQOqwb2vIeKH9kSdWBgLGNyfwX9dESE9HRb-zM77eJWlJxHrGohiVLBHbBmgTWjRSjtOFCLYtsbJqGXD57dAXZE9_vQ8f8805G9BBFJ9ImQdhOeZdPb6kfHZl9m1krEgUUwL7-4/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp5dJTySP0_E8AZIjwKP4qyD3ZSj-3ze_sxj2KqMaCwuReczQqE8zNJBeOogZ9XDOUusD9npPtYb3dbNMjAJ0KdJAfjud7z1SYcfa05b687Z6EvYWrI1WVyHhdBxds9B_xInI0d3Xwfjg/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHce3pLASPmdhjOQKPfhijWd9kMsQT5H_OzWMyYLUIUIu00Lt8CXKhhNNWtu1TmtymvQRiSwg0xebTtV6dhyphenhyphen03uluILIdttrL9ptLV3uGPHzdHiyCsbq-XxAD_zu_31pRCHHj1gWXjCjk/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsN1O9GsyWif-hQ2SpWpLFqx4k48kBmpmYB2TfJ5Q49_3DkSoCT2xCZHFOgdj8lOOw70U73IVhHC1RYyIQRdEeITBgKpv29Tug0d2N3PR3vyzcVOhDHSx7U6IJmaSc3TT7XZX2-uKrypM/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P63sgd-UeU83X2edWcuIo0u_i__I77ej1OSClAjwV6woMdvYgV9Q-Oc1XwoNAMDo2LwNx9TZjb99Oj0QrxqgdZTK_j0nY4ZZzfBxBRJEcBZuYYZSJpuiMLMToKekXB6kE1O1evcN8sQ/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/AVvXsEhGHjBaEIk2StqXOEeI7Jqf-CZfjErthprW38yHKKn7sZphMBraIPfNKlm05YAHc7uP_9uXt23BUoRVWLQ27DylN5hHtEnTNuVNvg0V_5w7e-CIL9m3kMKjjr9MsUiR3GSekGzmvBwtrLg/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!