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/AVvXsEgfG-C-ifOJmgG-NTgdTY2pZiFjePuRTwZLiV-d3y_rZc2PgAJxifweESYO22KkETb_ZKJQ74B097Ol1pH6mgYw1W2NxtJEbpyjMuD4YLnZtOCT9nQXtgPFbFKvUfgw54fFSjsGMbhKZO8/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRNcfL1SJJYXyh6hT-5UBg0rdW3RX-fIcrS2hhGTiXiF7OoqyILfIKHTgQYD7t5dGjfzDVETOcMffzDDO55WfSFkhgSFdH0MU9GqAq5lBZIfHEBbjsaDT9-CPpCZTYPVJOq_8GVtdziM/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_7ESktEICfTzjQScUyJkJJ_AQcv_ZxlmIQZ2omnzst2iQwzGFlw3Gh2I6t7NtzTOXD7ZuL_GR8RgzuubrHYwBOlL1lFBF0xG3YAGy6r_7CX-oSDWpOI-VKT5s4nveYVMfzBnU7n4ssU/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCXEbLAGMMLhUgEhybDBVo_3FpGAn_G8Z7xHm-7O9UIqmQ-G_a1GbRpRXObH2VtE44eEFBB_JoQlI4FNhyw-RBC3VoCpfJcLzF9rv0T2F1uwGtCxnXJYl68qL8qFYZTF_R9fWQfj23v0/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYN0mhHYYicH5l-4NMxz6rA4vFAnu6ubZI6Sw_KFnPl14MA2yJn3392uvarxqWJfd3dWrs0Af4hT8FhI_kjK3b0g2FN7EVBfiAQpHqEX4cp-7GyhR-gyfEaKMMpZpWZqQmwpP96ZHQeUs/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTD2z6b5HKjy3JmlGo7bs2biEiXagbWYP60-Q9_IhyMRX1juJrVuoXKqCDwQ541Jxj0jII8nsxXgF2ZtV7Q-VVylEEVO3kt4wcAx7D0j1qctwuOE5rRITDKePp3qoGi_YFe09djrTvlDc/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqsPYFUR2Zau9c_O7TE97yLkjFzT9Ytj3pVjOWw4M3U2C-Oh-_-BkMvZdWjWBVW6p8qsiwB9kKVi7aveB1jBc9n9yZ-2AZWIB9_u2rJ5h7bnrV-UdR8mfoKpj9dwiqLUpZuhpPChp_ADU/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisd82vBJZ7mJ94V7MsGDSXxfIAZ6hmEgjfWCqfdYb9P5yEfYZgCE72AMPWXtT3uYELI-K1YJFr4xYxGSSbh85etFgrl4rDn2QwAnFHJSNC849cbnpQUCqXt72NhMkoHqsIzZOrwj16h6A/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vvkW9kjHrJ8Pfoi_Wgwr51G_FqqyiGoeISvgOH-la8_ALzxmVs_zxyszToTnfjh1gUDXfB7ex0IXYRa4xIn-wBRDlGWBZpHOPgr_5Z1o6TXfA8-xl3CCa3B8vdDDe2C3ZbHFogFLQF0/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgQaTARwUEA4nFFx8Nvysr-Am4lTkxdyCPpX0vxrGiE9d1T7FjIKc-tNH_-bwgN4ryPnMsmMkPEkiNRsfP8FIDhTQWjwUS_mFGFU78_ushei5Lqwrb-TpeS3eJEYb5mjCP-L3zWU-TI08/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqkjFMV-RihW3QMSeiqjLKeJZxyxivRBm6pA5ENuMdNnio-f7ztkLl86IDxStXsj2zes_IW4AZvMiN1GfbrXXWzLvOILLw4n5X0PqlV7xetFdOLdRXCvJzQQSaXmi8crn4ZSLaSD_jms/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1yW77iCvIh-qpqPtTg3fIJrs1DwIzseOWx4D03InpjZKA3A5_DGnnQjWhxdcqcNnA0_aawXU5uJQ9n_Oah6YDhzw-qMxw4N1DrBVBnfiqB9QdhcMtLu4wjPTxZ2uuTVi71s_B45daYMk/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVRWXfErfLcoEMBvDxbAEwS1NH4xv4xDjRBKZnq-wQ7EkcS3qm6WtP4__roLEyYAxJlJ6q6LGWUG8kaBUisG5QaiTLZXF2BpStliUzduDc00-USOc-9p4ct4isj-b3y_NIex0xdKK4nE/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sPAlgPuKCoL4vKvWeq5VkyvVjPQ6FAwPkXcKyVYFuvDDuMJ0MKJDFDQ-b1h6e1wxoFgrv1ciVzp1QmgTkiH10LcNopfcxVZcv0HpNklxNJLOK_vG7LuAx0mwqioDnsVpdTqwl7H79Qg/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9S2avdhRWOR0AArpACOiYaV5Zs8CC9XJVaQ8evd4rKZdWBQZaR_mMvwu38jLBab5SSduK1FWY1xpNzmvyE6V1KZ2-XLvMqqdIPS1X36s_ERoVfHKcLWYKrOb067Kf76fmHDkikJ5gNo/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQBWfxTdApuJ9puao7CN0cZEonSGFHXYWa7GrEr1XJUDvdd3oYgw2ZF0eKtEY2h5rRffUAEEY5zcSZlOictwD5XRfCXmeBmlg3t7XadO6RUCXqaVSvx0lIOAJlNpDXbwz7iq2iSywpmA/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsK9H0RJRlTW5NPRcGDAruFHOhpNi_qfVfBhRLyeqRPK-yQ0Dc1jyQEzG-GYZKir7ghrOy9_cZGBjLzlVSuR2LHkOwRVM5RpE8ADw9RhfDkr7DZSBt51YAkOUrw_J6YlhH36YKXTocKc/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgoUc2rWW934tcZZgnReCUTh2h-hSz8b7PZXEZAJIcQKyeKqPeR-sRfd0Cti7xll981182PhTq-6RWCKDbOrDk08B7oGjBZ11W_KLN1NPXnZmcwCamh_w4ghPRXtv_dI8dT6JlIqUnCSg/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLQHZrHKm6yxo1CL9GDM_hdmypYON10h_SaIj8kSwpCbim3DfwVuSlr0E9rnP0PcUCGw5B9_9DwzD0_re377PAq_YypDHY67hcK1N9M9aME2D7HG5UZ1JsgawZtnq56PfyfrDzQyCzQQ/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjql1a9VOhuYdkYHlpIBMGCOPMXRw7HDr9kpONZzM2NVD-pG1RrOmTqblF0MiHan_I-FlHB6fg1AMezAOlKTAag56Lx-AYvyGblg6TWbIeAJve2nT1DZCScHkVHCWwyl4XIc_BT_TtT2ZA/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4AlI2sbEL-Uk7Quq3lc_H7tFQBGA4AqHTNKMKQo3jUuKFRK0ctFoSeiqMN_aGm3haMDNVFK-DUf3QhtrjHZ8EclC5Ilv0s35iA1-gxCu4kedYJrY398haZwyjjkC7zu0m2CXM0MFGgks/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPa672p0odHmbTi4jMAKBwIdCmmw0pNYSg4qYABoKHxx3wbQt5qFpIrS050oTwL9uGPZTm2xxypr-7zmGJuLPKEZkuAI50MOixauns_EXVAILhmjdsJCqVulvUSQD1Z-aD8oQ1yACyFA/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TEOUuOeO84O-5P-m_Hmf1X4tELxiQTWrwLsBUgr7Gb_QlfrjZoPlnvl7QKmJ6UNifLLrntOo3V5dNNYjJTPeNaBjCEU7cBtFRILaMQYkg6wErIDw_GfwmI5rhB_LVrM2QLSlP6sdWvo/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqg3lQ1QzPLD2xmYKSU-_UVQ5X7_-nrlygqlUDG0dE4irwoJgzXHYrImpP0nKaOUWoIzSZiMkwlARXJie71uPDL-Ive1FcuZrFfZAZOXXekf4SJgLlmdAHWyxPm50HB1yUOVyst3RmZY/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTO6P9PTIfvtddVAhyphenhyphenkZTVMEEvy0DwRUPTUbWG1PAqbm7665zTPJaBjNldxmOIc-4EtVuGsNtGL0-ivEaK6qXCnZ2SzKeP34jLz-7eVfs3zFO7aBuQ3Vf69JEIsASZ_EprleqNfYXCwXQ/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/AVvXsEgfG-C-ifOJmgG-NTgdTY2pZiFjePuRTwZLiV-d3y_rZc2PgAJxifweESYO22KkETb_ZKJQ74B097Ol1pH6mgYw1W2NxtJEbpyjMuD4YLnZtOCT9nQXtgPFbFKvUfgw54fFSjsGMbhKZO8/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!