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!

How To Add Kolobok Smileys Emotions 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'>
<a href="http://www.blogtipsuk.com/2014/08/add-emoticons-smileys-in-blogger-comments.html" ><img alt="Emoticons Smileys for Blogger Comments" title="Add these Smileys in your site" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhxj3lknprs0zpgiV0w5ODTeGeUGLB2ZD9QD0-DV502dbjAfHbLvPyoPDH-CrGs9rWsfvMGi5cv0oVPkzZAe9jG8qZEi_F8SzqbcqC3m1uLP6HZTuD83zMnY-0cNEbgYNhPHxbaeWQmh2/s1600/Add+in+your+Site.jpg" height="20" width="100" /></a>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlbI4avFLA44WjxASeV-LwrW09tOa1AN_2vxTKI0E2UlAJk7UCmxKOt1fChXG04OFixsTS90vQ_5ucRWSDq0oeA5bBdEZ09Xr3qVpaXk4OSD7K3ImWmAMyzfjQmfXr87JemrcqKctilI/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinks4PLYJa_Mvkc-WXn4H3Qw1DQux0BxVimb1K0I0A5N3TJTkYG9lQOic7aqRhmovBAiM4v95_ZXeYlBOaOQD8vL9cbBjRjpB70VFSIeIOMYc-Xhyqs-3tEMLkJvkX0NRb635KGijN4gc/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Nux6I2jEFIOTjSvr6WMIxjeh1qsPSk1vsM2e27xCiw5GmwahIVoUIKg7-Ek_dPh78AEirDCe-eVjkOVCLDzVwjR8uZKEm2w4y-d4RiLJ0IjKhGEE1LOgHn3MhbhwM6TdoUnb3Py9Y4Y/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN7OaPHa5qbyAoNr86svPJ9s5rjxp_Yoar-lJN6gczj5s26hOACFYPAyyf7HSLywyJJ4B-nVnr1SZI5mwSQKGuy0Nu5Ec3yBMuwuA8fnx7tTUKY8lmgkiQO7YFaqgkpX0oKUFm3HafrWo/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrjeXmTm96CsCOtyhCA7xx72NGe4S2dJ8C4Ch4iuEuSP-nW9_HGb2h6R1vFstChAO1ha7TJykl-aEQF_sG0ImpDh0-nPpBuX5SCNFrHUBadIHhrOKRFAbIDnF3ZE73YsI3QQrifi3OnDQ/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHs5sVgVeK4SnlnWG92pisyYqi1Kld-AVSMPpOzyRtiNaldlo9bbdQFNv8U7HSFihercWfMWNY2kOaj2N9268puvwwe9WveK-P2ftgGLl2LMbb_-5oIMaTPtQDktP0NH15GTmCT4dK0Zs/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UF7R39bB39-zvvsouBHqlUYWTaGR4urYYPCBpWfAmJ6Y5wA7vEecFNQkijUERO-NRyZ_6EJUak7hQuZab3L9G96Ka81kDePGeYbmmwGD7nXxJVJKDVJTH3RQYYoEmiis5xHZgoJDgeM/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybjhzmuTr8-2HOZ2abc6rB8y5s9rDVsj7hFBQ1crKNy5hLiliflO6AcwkZxlzqZixUDVk3N1sUW95UaM7x5gCaGxlkgPIvSzcwvo4p5LvOT-4vxAcH4waXL8JShqABOoNuWQyhbCNxqY/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwW8r9uF2GITmUSw6_d18l6dkqXjw7u0H-V69FIBXyZXuv_6xUU7PKvBzCVgSZL_LJERiqotr1SUavwuecsE1zIH945NbgucIIhjFVhyc4bxHzvMFHuCBZdE6RBs-2hozpUy11RqhYFFs/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpC5x6IAe3wlE6xqxxpwzl2bCHfLZKYwS96gY2mD_9U_bW1oMOXenPbZLXXWemEGuortptTUIQQoomW_xNLLFF4neLRlQ0AJ2DPbkl1BC2x_dG5Y_NTCpAxO3rBgA9fugyekc8sscjbQ/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bR08-PUyj-wOSy4C1Jq_Wj8Ain-3Jk5skZRA-YvVl3YGDavGJkA9HsdKuP1UCSHfC4VRKAdMYQS8SMM6K6Zu0KdoROOIrff76fCAazij-I5B9hnOoYyxoXiuDOcNxiMSbeVSPWftc2A/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieo2hyphenhyphenKVBppvXUaD_vKkhdb0G6sxRAXfyFYdmVsqXSCPyFMrQKxnBKoorRGXvGh__KpXBxLPJNZBz6p1vFSX8e7Tk7wty_0ZkpS7Mj4nDLT3njmRkdoJxKXOoTgU1F-EJvnax_s_XWp6M/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrsDaaVEU1sDWqvO22sx46oDFIhgq2_ECO6BOIIc36fiMWhtczLOQzDAFAPXhThDt5XEQZWO3ihs_gMARpWwxrck7CSzzOJfDRrJyyb_53b2e7IU6LCuNh3IrfCVgs-EnajmVHVSZ9JQo/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4JgqTjyrGkp0IzfAi6pMfP4ja1Y4MBKZbP4h79_XDwYIG6qWHAtdHvcAkAKdUcogujDbzHCDtTEsZFs6pKdV0lXF-rQ-37Q2U9c6hNquyLHeeImMgRkkgSgvlW4llwF63RykgbMrP_Q/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0a6KJOf0GWtuycyhklopBesGtd72fSBC-NsZsuwOSJCvsjE772R5kCw47Vrv0j6JOr1thAygSHdo_qSKWw6zzfE3sybQFakrX-Y9_ZjW8eIsUkLurhRDjbJ1aafVtnoCbG30XkrN65r0/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7p8ekMNjIADltr4g20OFkO3obO55iVey0S47HExKxRYSq1u0IwjHVfes1IUCsdGAesMi5xEB6zN2i0XE_XtntyTiP2OqtFwOlQrBjVQg6OGPziqTQ-p7mUJLjiBtqYldYi7SF4oQ0Q6E/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9S24-K2jTwxChrnrQPlK93EJGJ5xZJfNQK8yB1zXTsUqqmlvHeCqfO48hiNmN0R-fRKej07ShcyM7HtLIXqE820yrQL-Wp3UcdY8uxPoQ1vyCBlwZefgouJSn5A0P0yVnPRuy8uzmSQ/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XW2hqg30gBt6z66k4cnayOQKawS3Laym899zRBpBBvr2-3m6p0KvQm9NwVqNBdKY_wq96z0zinNBpBcd_PCVUKiYP1uqKGJ_OxWtNkXQXaj6I6O5hrGZycJJgzp-lsva8i9-ERx1tJg/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5ltgry9VCZbppekQcrEdgHhnwyfsjkNpnJ1xrJeaWf27P4j7PWbVN88_FKfkyO9yDZYFwqgsCgp6_eRtdVDtIFFjWjYwGEge9Z0OwXj7GPjZ-3Z602L4-c5O9j9reXKV7FtZS0vD80M/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzyLNo3Zq2Vhxf6v5oJY-q1lkAyjxxi3qG6PB0Vh4382yj_Sl5Ua3OHWarMe9k3QLOMTmtUz2wC_GiLa5qcNll7tZGip01AA_FRCEuAhrvGvAu7ZQTO5Rlynvj2VQ44iX7AV-d34-hsx8/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeT8KD5bH-2zKLF5gF-yZKUZlp3IIwk_HmoLL4dzobHUDLoFUO1TQx5ESy_6DUFo2s8DoIgvrrwv1DfAQYjA4UVbBXDy8ZY5G6HbZjbscQNtnVZYUjJItq6Gxz6esUpKyj2gmkQqFhHw/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhep2F2NE7_jrsQABwXfhf-2GCIFVeX7XizByLnuaHlwcuElxuI67C7Ph0GZvznooZCB3GvcHuZTkE4UYMvaxU6aQj3LMGjTbRQkLXjiD6X8QSYmTEQYukJ2mXe7t1Nyf7FpYjtVqoQ8/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaXPs4yS2RMnR8VNnH7EoCjBBvFZ_NSMgOn57o-orsS_w_8spFJoXt4l4Mns8orFEyLvOiE3DQGFBJg8kuK4iIwZ9px9qSKq8tKhQT5gDXDTADQ6-iFEYp1Oo8m6xqxuAXjNpXABJOR8U/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxHhlvPZohPSwl1ts4qYvLH3vkTFn_1_U_aTGLqtstenfSrV9O1TZeBg73Mjg4d19ktSuSYe75g7QUo9UzL2iJ6u5CQes5_3Q-Q4i6Ss6MsIJrs6RDG201mNT18FqFAxOYVbXMQt1oSA/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqWqV-jZ70mKCbCZ_ls1XmlgB4NEA_-EHrGi1LfI_bAEOKSXFzo_RaM3jVrDwmKixxogXGN1sLKBfvnxwUjhjGoerMY0esy527hp9hTWUIsiCu3dvuV3S6Um4pg_FDPW4E70Avpq6h63Y/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/AVvXsEgzlbI4avFLA44WjxASeV-LwrW09tOa1AN_2vxTKI0E2UlAJk7UCmxKOt1fChXG04OFixsTS90vQ_5ucRWSDq0oeA5bBdEZ09Xr3qVpaXk4OSD7K3ImWmAMyzfjQmfXr87JemrcqKctilI/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!