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/AVvXsEi_jj7kdq0oUt9ssmvio64TIialER5ane5zad7USLiwuMNzMia8hGO60XPoQ20oeQFY7QDzdMMYTpJU-x7AP6-gXchtqrYKd0jsxwSd8CfbFTyvUdnOw_lx-TDgZVIiIN1jv6XBLa-PZmQ/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbp9Zg01iOloeAAS-kxozDpz9kuaY2yHmKjhW19s0hyJn4PhQv3wchrLmHoPJrf3tJ1BGTat15SClPh_iPck0LlIkNZzpT5ebzjZE2xQ_PbWznMG8h1LmmADamM84U80QxzsmxnfWSi0A/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplkZbIzlDZG36DLcu3H55qACDZDTeDn2LJBEKGX0p_zFDMCijYCcv_wRphJXxAXdc8opzFzf5tIZNiVWCrLV2VDny9wfEIBvZW1ZdNNxe3sQXPMS-QmWDn0bbObJ5qgTmI71tkRF_xt4/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYd3pSU3lVGnwB_k5j_-cYvFEVIll1X-0Ic3BPgvDSWureA5o4E1Dnoilv4fYRRQel8VprG7GcRxUGKqjxTCVarRREJU_PQSfW2cGmuruGPEcgllZ1KYTVAezfA_DdnkX5QR3QTvbfjI/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vFyd5XGiYBQcTqvRKtx4II-5ZFrK32yHZji91Mqo6IAQpbE_bpdgnok2VX9y5qbyI8DomjMZo3uKR2EpRklpAHnCzmm6EXZ5vgbkdU52XskVXoFxetMavwn4tNLL3f8OX8CsWxrq9qQ/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3U4Ulxc3CAh4RzwAMb0Cm3UNcfnc48ufPLwpHJe4WPxXfGKF_1pIsVMqy6BDe161pJ1l4e4NhMFzAnV4qvSHFNmkca_bFVu5Tqx-2PlUFl56_qQ3IN0-cNx2R-8wXfSUvjCh6KwpB4M0/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4pQc-itz5R4PpCiEe4Ud-80AzTXPyn4y45fN1f6Wb8yxCD5RIuoSZCXRdy_OdskzAUwqY9yKRO97EPZOvz_PCIW3PfNvns-r6PY-_ZQL2iuGVpYFKCiY2YKoYE08lleRDQaST5zpyag/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNhvEGMyTGWwWYqLsufNFoUDbmbLdb84xAqb9eYMO0UG7FQZd06VDnlyXE4NpwGrHn3CKwW06woprIbDTPBI_hfh_wi3DGhEjd9WNL2hq0L1378mCooBeR2s8g7TtJlpMNPkMjMKRZX0/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_qHJiuQeUAsgOBuHXOjPzRk2QKoTIpZOGmlCQ_7ruM28d0kLN1Avqi8ljLg89IQZE92u6FXFFZHUGyEsmoZACWZPa-YSZsBb6_WlhsIkviiKb09dsEXOIIf4TRBG56lcdjXuWpAxBHc/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKsXHi2qY6gsVsYvBZh71IdaMApPkNtWjlTt0Z5hzt9uxrkZl6Q8vG7dNtNnBcQLT_PzkANTPz724OLWfdvQG1rJAVeGIxmrhanXyMfypCAAT2VMm9wyCaNhp4LIRb1k95HsD_m0O99c/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3edMoM19K9daBQHuU8WsbiMBk4otrBXAYSAzhuCIp_QnOYLMZ36Smh4jFmMQrHrfVFZLcBBhos08_xd6XA3JSk2rTLy4Is7NkChDFdWRbO7LM9PAahs09qOTN6zOkjoPaC-GaXgtPYM/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0EhUtZa9wE4x5cDkV5rLOL3V_ih6kaGKSClAnr2RAtn25Ypus3zgBmbTjJD7QKq6tclieWIrESQPe7pGkrKFpkd1QGEzZU-5TilvlEQ4t7UGQqRHpTYTTa_hWZYrbr20iQfXSXaiBWI/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuAike4Qvg0Zunwrji5RSUtP0awR8NGBPf-NUgf8wTjMl_Y20Zgkugu44te05-FwwAMbTE5cbk6Wfzp3R2sEEkLbjGoxK01XExLmb9T2_WDwxrtigG1pXAMlOfgpBcmfFDp8kCVePJQU/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLWAwAr5BvS1lyQZnfBkjWj8V61eF8ubSC5qPWVNw8uc8TEbu-fxMT7AxNgKe374zLlcsOJfInyGA-_vDOVqZXKac0mb3Q8hl7hutW72G1KgJsN75tt-ZQJn91SaOkyZo_KYKcQYiD90/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtx-IfOfudNkml3DK18qhI-9TYK93qNJjk_FUIfgQqACRvC1Zf3LvNtL4sciilOx7TmBJeBXagwSDoSkHCu6i0hGXNcvIvErsJK6LeZDjh8aGA-9QrgTAlKxpIvWDhe0lRrsr7SPm9J7o/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6NBlxhOWZ_x0DgxP2kPciY7oU1TrD7Dw9HggjLDq60uNx8Imw8cbrMws5A_Js5aoYvQS5Q5z6vGneBQ-URw0tVbEvyifNFvtL2ZNAk_QKkXKlx4jIKJ84uJg9SCNMJXmcOOT1-l-yhM/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUaqu2vAZm2iwxkm87f6vgBX98VJPxSBDrUdbCcyPwsEbmkX9w9ajENVYSHKI7cls1Ayxlr3T8cMuq9PiG40Sj9Kn6Yn4o_FrllBzZKbsF0M6dqNT3geu3m1fUVaB3g3U1PqsPdtfdJBQ/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2unlHURe4vycsOOP5nZvfe-MZ4fEGmUkNgK5_SyA-Q44abzvprZ3jLCzTFYcs1yOfaFg8xUg9e5t72jYllffQT38W_RWy8rNoEKBtXuh0pC8CTwnvY2jXCqbjGmobYu9K45jC45w-HeQ/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnye1Gyvq7Qk2ZGSZjhFgCTiIp-CyX_gOEiIMJX0WvQe_6kq0pBHbZJ6BuPudlNiyvYemTHBgMi-04UNlsc7VeZVUml4c_5tn9LcSx6kFrSU_mMYpA3eSnkk9JZGUUYp557hCwo7E_zA/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDs1W97_hONTooW_9R0ufdUiXQbLY6zb8ha8BaRwQQ1Pe72BEAzpUHPNAsUaMm6XqCYxYYMDLfpyhP4JfqacqgTTCzFPCF41loGuQGdWwLLkhHMjhfs8bduxC7qzFdGxP5LuBe3gGJ4w/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj050g7Vk7EMlNLhzuHMS0e42M2VSdyoMDCdDJnKqfscJIQajoN3ql4Wz1DtBrUCwtIJaPeykRRRrIp9dDDhDioMVEXd_HNfWjl5LOpft9-1gDvwmDbQ0YXUs_ZBoB0H1ymRhocYHMxwgU/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUJR3b_J82KWZYEjJ9r-zh5c_2HrNREqgJ9_t9CZqBswmyOkQzMxvh0aRJBGcEcMRM-gMS7kSPrhcuaMXZIwhnqEhaLm2xtaWDH4DIe7vWAZH4grvDCO34K7ZmH_j8PphzDQ15ikTTG4/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitYbhAUxkVEM6l0wjQxAKtfwblG-ToG5gUpFW6MKEP_zoHOWOX1iRNG9bXa2nqmV0Fka9Z-N6hi5Evmkrojxgcb7_KlqpteOb0y0M0wv-5ClbSJac_6IgyLCHDvamR5Ly7pNaHcwrvWsA/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbyfrS8REuJVQpwmOtBFUROksW9AECPBLvp-Com2PYstq8-j6EuGtLwSK3aGj3PE7GnBaQ68G4nKhwxTZ4izeOOyJUG6RD2sFwMohUr6v1wrwrx4pt6Qj0hRKQQyTIDkflY_r04R98pfw/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiveZyEtA832OxXUnyaaAPUx_iDnQ8xzk00P9mWLH1Duv22XavxzoS6CVSjxRWsxw3EL1gEXsJFqicD0E4F1HAUotoM9EDAuInT8FjIcGybJr3HBdVXo7BXtrRxe8ujvPCy2MMFaFImDQQ/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/AVvXsEi_jj7kdq0oUt9ssmvio64TIialER5ane5zad7USLiwuMNzMia8hGO60XPoQ20oeQFY7QDzdMMYTpJU-x7AP6-gXchtqrYKd0jsxwSd8CfbFTyvUdnOw_lx-TDgZVIiIN1jv6XBLa-PZmQ/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!