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/AVvXsEgmcyaeHON8x82a9GpHoq8oEEjL704QdDyR8bj9N3zKMLPViuROMccsdAE65St7kx71Y5ye_0O-FnVJsn61vHfQWBHsOs2GEiA1WiPOhqhptHsprYraLwpgzBmZaeVmsmxFQfqpWkIBeLY/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5oxnnX8N2zpSrlX1rcmwBcAY7fsk_1geku3RwU8Zl2N9PK8lHM0j2aPgob2LnGBO2Dkikt_QeCC79XhUigxi-DTZjYvqD2wQrHQvIZ1qy2Wy_KF7z4SwtB69elZXm3swlKyvTJdhDFxw/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjhEP1vxIDMKM0Im5FvxPq4QyQYPezRwrzHHuE1yA-iyLqqoc752o_GC0Eja0gS0zQIIwOBTFj5IRnbfqPfFo9z0IYhP2ttB93Xlbcso04P9JfWm3jXPh4xJAumK5hw2uFTE6ycwP-qo/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXblrFsllbE-xc2J3Usx9kGbrPQ0VNB8FbgdZkpEkYCaNZx23KED-Hob7BIh3aRHqBSIUgOvAwh5BfD2HllMI2V9x7Lmh8dJmg6oBd6Yctynsoowklsn1uOs1wA-dfh6Q2iLkhPosz8Uc/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduNNhejd5Y_AW1OEaFzvBVWwsJiBg9CseFcl3zaSqMAMFf2TTKhQhH8NywrhjWEnyjNZZ9Z7KbWfL7UTHRTgQDRVImZO0zcjM99EamgQRzrIqK0pAEf1kk2BRipcy0fesUyns9pLTTr0/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY2JCHMjP-9jWrB3JzDWf-ouU5hgHWVxBE2QQXLJy56uRoXv7RGh_otZTns2ig3U5KGbctSU0rerbDWXS-xjbvH8vVZbdFIs_mxMJHlbT-DKzlkiMSQDnDEkCJVV55YY1yAkUEZ2i9m0s/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrQRZNIUCeOo5Tg3jjcbHInblsfapzyIvGBlw9F78IY8v8XSRG_WLm2xq75SImoAfiRzVXN7nINhJAQZKah_Kk6lRSR3tw2DC-cUHdYt6vBxlLGivZh5V5xHrtXSJK009fE5yVzIIOJA/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KriKceVkndiBTu5NxeAEIohqsv4cXJHi-gjekAeYF_l0Be_Ronym87Iqzq4TXf9ecYpxA3VG-0BZ6s3qN_KygB4gypw8m5Jq_NY-8dkJXmdTMPx9WGWOGL5PFeg0rlr4j_DCCGgVqdg/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2frbZcnndjYyC439Uq0sFgDKJnRNz5HFaXbvgFTj8B5wEiyRV6np9vP1D8rgf8BKGwhVY-Ev1hT_C24zGqZ9tIuw5e0s-yEpIHF9SJHERs1fR55DGG8ghJ-XmbAiP-Fz-jo0Q9f76cUk/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGI2VgJxTB_RrwWKanOjathlvciM1HDeZxszXKTRv9uNsHrqyg7AMS2MlNat31RBysVnsEA80UrgGyonBbnIqiZOJV5MVaX9ekuYX4-kGQJtbqJjmTHN0qiVpe2lGw12xstAVIiBtxQU/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUd9ue8Zu_0jojHX6p6ZUq_nvzVRJmrk3bP26T9_hDYlb33h7FnyC4TbAxan2uZCz38g482EjKaZSrs_cWUAbY5PJHKylX0m2wejAmqNQfdHkTL0EE6LmEIfJ9oQjTf4-Hk00SpQDubvo/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kL7amGjaxsQwJu9Uk4X-GYwhueP_wiuXXkL2aA49plo5Mw1HtqXKdg77ENs2O-sS-odTEsDWQE5hG2nMJVzx4APcA-v07hxZlVIVG0UTjpXktva0sxAtlrFgZn938tldY5edvwC4iAc/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MH_z6JZsIOkvBakR3i95MS9B6VmOSIr6vtbPkPaqOih1w15awYTkhx7gIowPzEi5uMU2fZezYCUwUPhdN0tMh7h2-ZQ3JnX3gd6rzt5Zqv5S29OypjBqCfCr94_206NGshzKmcKUHBo/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPjaS61bfGE4R8k_nMb0xJdR1VlV3yxTAwve4pQ_bvzlAvf1V_O7bh6IB7CU4G8C58UcnMNZOQfUUB7IC6BXQgzNO2E-MDi0dwrMby7TTsbuLez9iDJtbkUpJOeU6-fL2FI-TU4DxtPRA/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKUTs7VqUeoAEVhf4m2XKqKxOaqDqe5OOIAmZToetHQ08yTxynyG0teKrFvqs158s-K8CQLpAsnlWYpEOG0kkolX4Uq0Rb0ygT853MNQ9vZCVURofM4DTlj6_zJPFzFgzyOeNXfCvpPI/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTxkxp7SqUeVT2CYMwRqOEvw4p5gW3Lnq2-u74zPmTh7co5b2b2RuzlgMNGyqDHviWQYaivXHoFLq5SicTBJXAF7cfa8uLZbu7q913Hhmons4oh7AI3cCI66xr_gYJz9wCJ1sSSjCLTQ/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITPE0u6dzrdRQtYekRuwue8vtdN-kdUkOgEflHx0tZIpfUWD2WZCNUvHi_fM6na8gwJDz6qMMFtcolffSNS5czL8cvvXoQulmQRBXqiFU-jO-8COQl4pr-eOwwkyndSByGXjdauFMkoA/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6x9sWZP5r0hqPECjJc2XIc5MWKQcLNb1ic4Hq5npdkjEkSJS8uNhi-YYsbvhORzFi3FjwEk-eK31Y_xIph5ODC932f47fn7BM74vgALrbloh1hqdnfnuELQcP07O_5rJe_g_dXZ87Bs/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65trhUq3xfL46bLZ_ocsNQ6i40M8rutjMSuxcFUFmMzYbQY3_KIBOCM4qLgTQXa_VHYzzpylD1QZvugOEBSGm5z4wAV-I0a_rv3cuDxB4TPSpSQUCMB-l74ozL0pZQ9jObmoVZtSmfZQ/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-SKjmAD3iVbwDEPiBDj-0hutgNyBidsoKO4RLrSPRh4sQUbWESPGOrRr7zIy5XhDvzyjGuNd4REf0H18Cq5PTNLUxM4zEWxQMy0owbvJz94yfZrSXICOLy_982T3iJ5DouLtlxWBjnY/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYum-P4n2vyRBeOr5jpqUspUyTslYfuxQxZoiqR5vTP6z1G2WzTRGwd0XZMcIV8C9foeUQoyjKv0ZN6lxXpLkxspPT-X3MDQWzdjXJXoB6KzyshqlrwA8xV77fdpQxKyZUOt6o4d8mDI/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gkshqKyKt4PmxoOM8T1e0HlYuVS2aJJuHFTUyIUBstheyj-gecjldS3b6yp_cvaiRa2LTyg7J5yzozNAzrnhrQioSUilLc3YPdwmUCX9C47dLJd_u8Fnrd5q4j-2q4sYdH2CngH0984/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3dqKKLn8rNU8t4eky59Nwi4VOzDk3SY3OnFk2X4s88LR7ogaUFKDQKit_Si6l3tXoJA7x_ZWn-cVrXMwm2WjNzDtOVc7t8D3nrEtJ6jSgzMbcHe0OmH8Z-CSB6kHKgJQ6KniIadCP3k/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQENeY4d7PooBU9hDXjMqwx0INvT3XVyTWwkM0ozlybu2Pa9-FtSh2wNmwDCJ5nhYtVQ5-0xiBcKbVlNahyphenhyphen8LWnNzVlLD5kUj9TIu84BxlOANX53sOqPHlKAAHY-tNVJDzFUpc7jryHw/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhAyJskGlZKM4H-Z0gGe3qZ2oqPO-rccLDc9SlZHTtMOYhL8pVmfrX31Qr0g4ESvZAplPJ9DCZvwkPGn2IrE-BV6yHLSK7gJxV02kW8zTAmdyo2SVvDFxwUufLkZIx4Pp1BvI2EljEhos/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/AVvXsEgmcyaeHON8x82a9GpHoq8oEEjL704QdDyR8bj9N3zKMLPViuROMccsdAE65St7kx71Y5ye_0O-FnVJsn61vHfQWBHsOs2GEiA1WiPOhqhptHsprYraLwpgzBmZaeVmsmxFQfqpWkIBeLY/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!