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/AVvXsEjiv3tHDPIUcestlGz44A20peK6wHLW9giyc0ACUSK21knJeJJWsQvrwIuutPDUytenlHGRiPeD3wqKRlNU9ILN5YVriu0MeoDfkor7zEjRm0Pp_C9I0TlqDKL0koLvYCFZTJcjVXao0A0/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZrsVJPeiMPSikjnZkngrizJnKDuyCbvGPwL2kUBdTG1L702JMVGCToh4jORXWtcXWijtJG-xSz-dmt_PF7TeSXxmdt44rZuPfRFA0nclkYfR5rgX5Uz13finKr-Q4oHVFu2WO_qCJho/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiUlcRkoEdxelG8eOxzKA8B5A2W_HjSq-AzyOHRc328C8tWtYTM0U38P_8OpEiY3pxLDfW4oAmXp0CUuiwu5BQzUDsMCY0Wgk3ak_IyM8758jUyZNac_Pm3-NQ-WFokDFY1STdN55f_s/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvFK6YLkMm5Sd7NWpOwcO35wsFZltZlf3UAyyFwxK2cAJfJh24Dvtglca2ry1cglnNf4cjGS_nq3Y6dER1Lzqz60XPQHLzcJjvmVDgEwFukC7EkMMpkEK8WXvcaPtHrbpH_tCmUR0m5w/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2KFs-KTRopMKYUmDCZgw4JWEhAMgjfVzW7CNwujOR0Pnjw9Ftci8caIhpzda85v6VLDCc8UNa03Q7NGNPJnnxmyNRHRO2c-rnfVLqxxy0mVWWtDvX6wZsbiH3jZ9yxzdpTemiAe8HE4/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzbd7TP3T-hwp2mVubZ10Yz9pQJ52U9ZFt0r8wvNwHFaTP6Dw8aK9tfcqIe0DdC4AzCKRDGeJGM9xuUnxrWYaAlk87xL30nfCskGTsk1sLIG8W_-zKqi4BI6ung0VrIk_Xhx9AIrMWQA/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCD7N2ZL-n4vvEwtcCcd_dzfGOxgtKKB3bDSyQ5vzQhijBBvnDjbjZqwGSvk1Z9-BPpNrMtRJBteAG7Iuvu69sko9DncfRORaUhiWpqmYCg4pWLGr8ifj7dtBmoOX6GSXejh_veTEOhc/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-6h0Jai7_b-SYt0E2YYSUt02OMP-2K4YXDwxA8fJubTs1LMIYSF5rSGCGzG7KRicajqR1M1EM6VM3WNCEcU0qGtuA3FA9tHzFiHXRGL9DYle6fy5sCkzCLKuc17Td5tJ6lS_NS_qOoU/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij817mRApE77miBwuABhi1rObsLaLNDqbZqDvoJKJnfCQZ8pNSHn2gUA5x23Ktco7bfTrMLm3RjTATcUXiPVrbFHNihJuaOB67XyketOPJWwURjTnrj2dWCL3uBCNPQU7q3PYgswFQA_o/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFIh133b8TdUIOU2PkuR-CZ6-5ZHP1pd0jDieB0_jC5xUH8j6Ao9CQxglxHjWS0q9PZMmWr3XULoekkV_abWmjGYXLmLNRrDolWqVYPEY1Ct7F5oY4dsjwHIsfOVKDaWy7RNhrpK6KN0/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzg9zsY3RAOHBX6zHZQ0SbsY8thvW-C1AW7RcG3AVbuZzQ61HO2MNlNuxqlte6LxIp2uKcFkdyve7ehEXmTizm8Coltp0gdYtRtLht_1_VFKRaG4Wbw98sI-fhxAjAHNhCq2_pJfecssY/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_uhM6FRiDoNVZhZtGQ5GrTH7Ai2Sa4fQ_hwXwnBKHrrsRbkbiSInuY3IsfOa-NFwB1eHuG7QE1j3bYMPws8qAPdIQnz_K8jWjwT8oquMyMlqDJ9xsWGWtn4LBSiiAP0coeXdH90zD3I/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cOpx7gMPfFrxllO0LSW3Evgczz3jOpUW0vqOpg7uJ_EAfrtRdZcN9oupxE-DGtSsKisFck_jPK4pA6i6TcsAySyABAbMSf3C5p9U-Sa3RfZBTsGCHOhKUr1lAx7fqVIzmpBgpVZV7t8/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXNTwwXAbsb8hSRaKn4K3tmRb4x3ZtEkyDA3ACzfYMJTLN8iWA1IRUo5d0eSPJ3vncXaQZGYLVpsAGSZNhJ34FEGpeNMJ0LFy-n947mBn0XQ3k0kVe1OfrZTEvqwYzAoEYwJkgUy0BpEM/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLgsSBQ6SdH8e41FNauVNlGb9rG-41Ixop7xnXowMzXXsIewrpx9tlH5l5PM3WX6KdVPcF3abhdRkcRCWlWu92hEgVeUzp5V1XGPlkKuxhQGKVewgUzV9eib9rJNwEjik3pSmJhr_kXk/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBHqf64MUsQHXSI1IzsFjXg7dR402SG7YCHRG7J-cH4ofijlHFeT__16CR0BxBNKDuN5uAZEmWtvKhUXACvN_PMIJRc1CofnwN0XQo3UDqp4MrocVbEMHyv6-XJXxErjd6lP6kDUZ6l4/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFRqZPeveH6pK4qZv57Cj1vGZRwMWvCSzFHbf7tXg4ftNbkf3JE63MV9BmqY8Jqqtb-Tl-nJNpVtM37dFPtYPEFrvt42prIgL3_d50DukTWcmZgzM_SKvMhz-1gWddLmNx211qUx7588/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQ5F6SmF-p7FwiLzhmObWWJTecnrxxB6qD2vExNuC6YNXNZWu9jAVqXXeTeuMNkTFuzl25N-3cu1xmO1bVah2o_LZod175_WQvTl9CmIkoGc-gTOVddySY16pfz_zGJS9v7F4FezMnD4/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCM1NjH6p1Gr8FUXNWtMhaS-axqTnwiZ2Q77Oa-cv0gGL9jO4lll7_9J5_BPPDscavbvhyphenhyphen-GeQLqL_pZI3rG5pYjuwjFJISMqTDUJDTwy7KZFYW1rW3EcZJ40hD_kzdZLX8jV3P7Fw_ns/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8BWg3zGUSQTJCgpmHJ7Tr1U9I-5CoULALdw5KWjnkLUV7oNIT_fCL31EQ0PSzAVNijfhSQuXaJKdNPOSn3NYxYjkEuYExN4YWb-7avWp9jUygT-Xc7K89NEMepbmvMfSQl6Tm1fcLdM/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJgzJqYffdCRnav4pCRYaoFcK_jvLYOJIp_Ys15nm9F-k25RrYDtV4yV225a-ForI3mwRkRpqdnruSF1NnGITeooQfaZA4W6sBIBoo217TAwmi1s9TYdmp7D6IuDSlSj_rv6KJS669R4M/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2X3eeGVNRNfE8FjhWMCXd43CfhmwQW_KYr7-uowMFlLS8xpnCP_wAox2gPCNPNo9hRUjd7ZCj-_pXjiDBzAk4xaqhi7wTPw-HE8Wb2dM3jdwxN7uj41WW4s_loIDnZDOAQ_h5cRdJZY/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDdXG-_HsJgT9L4VcLUCZgt3SnBcS7pna85EatTk2PP1Z6ODTaXDoHFlKDUnsn24umia8vzyqNVsFAEOTqAAmEvf0tnhxR-oaz4j0VC3T07LGyj_nX354buv6453hoyfOG2sVaASHoJY/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgq4tlqAduxN_J8T56vfyJaec6OBlnJgQ5HNbWMihbfOl1407TA20ydsdPLZhyGvu3OIeU8QoQyDL5ysYlMrWNqOQUJKVjCBRZuNqfoshVvXYZH5AEEvqQyf_0H8UzhRWUM8r1Unn4nNU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrxbW3YUe6BDGrnBolh0vw7fNldJpcbXEg06b1y85z7NB3VtD0UcyTpB3Lgt62LNp7S7qM67qgrXU-G3B1Duvg-RH9YjjnIZSzx3xjsJkOSyP6A7acYmr-wjdy5qPwI7TRWRrUMFc41Q/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/AVvXsEjiv3tHDPIUcestlGz44A20peK6wHLW9giyc0ACUSK21knJeJJWsQvrwIuutPDUytenlHGRiPeD3wqKRlNU9ILN5YVriu0MeoDfkor7zEjRm0Pp_C9I0TlqDKL0koLvYCFZTJcjVXao0A0/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!