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/AVvXsEjhKebubMlOoBovejrB3o_FmazoQFORMFkqHyhxNFH-kUclAyvymlQ-tfETvnNET1FGihqac5YDlK1Clc_mg9A9U6d5pt4xp7xDUzXK7oXLzB822h4N1ZjT_ixQ7XO6Nfebqz_Wy0g4zTo/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBScnzKYTACi2mibChvNBAxDhtc8PdwjEebqeE0BjV7faMHzXHKtA6_1UgO1Zx9IeIZj0uzQPo7pLLnbj15Ed94jHgOYKeMtbARgSEiVxloqFZ6W7cGdoZktEvARjmM5sOgjHmP66J0Ro/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7eKc3WAQFYWvHabTYLb_8xzGhrtydA14vg-4timM5lkran0eRVZiuEdhOcpCBakkvKD4e7tveKcGDsFevCWdNT7gGMA3Bbn8iDGXYJCi4FnQZ-6JC6yc47JrHMWom81j5HjFDYUFIXc/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvndu3QuuV4-gQB7V88L-IB6yZ1yYQWdnHRgwBH5_HgJrt-Uc3COwR7Yaqunvo657_UJEc1MvxMfekwCaIasUMS9kT-ErfcCxXwduuSueUHSkMSWrnK9PIfhUhCwOF-crU6VhbLmqOg-E/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKkJwzVqF5QCImCi204oyPr1F08ytwipYLnGlIo_CUGH7JLAK2Zpk2xlvmbufAzdzbI7DgOpD1JzPeGfxJzsi_FEtXLSTpDwe1Se4Z-vlJgs-uMnwKwgLsn3KXD1Xl4l5ueaD_2aUTB6k/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj63X8DwUod93khyFcnouBaHxVFOhMJXbKhsqRQQN2UafhUhDRjE8O7oMqH7VE7I5sQMJYhxVfkRVH8uEOgwM3i4Sl_mfG_yDRwCRnH_bNig3-7ANEvM4GsTAtbldD8YGDZFP0a81tq0i4/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bgJpbFSbAwbwDJxdzE3dLfdMULmY8ZbjzMAk38G_0ibp5Rq8RFFFfSUp60Opwl7r7Qa-MQHlLz01QlxXnRu3CXYjt81P4qdSXdjdgyTldnJFp2os1zPbp9Rd5ecOhGv618dyj4CUoOY/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaN0pFpFyxhn4Gd1X3qXRMxGGLHi22oVv32po0yXftqTtOwdpyJ-1bEQVbbRXeJfQ6z3o-9vDtgjaq9CDdnVyxv9yzVUn0X6XyOew33jk2-uBHeYxuqD-a68nH17Str3KVrN51DU67Ds/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIqLzrsPF36_n4nZzFsnB4uOk3iarQ6GptAnK0lWkXtvE3MVoh4wMEUahIPxYyryVn_kgAskFDRJ9NGFO3imbmclOurYu3LJifH6biGhAwKNBdrCKL98h3Zn-1uAwr2RFFnaelDdCEa0/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1E6Jk3hET3y8MMLJ_EBsAPNJVCTNeC8Z2xDFFkn9iLgYU0jHiyRVMg3duD-rWI8g3qs0YzCEInHGXEUIhPjU0mQaquc1TMKCm8qvQ0pHHnaxSiLv9mAykFTvt7Tf-gJ1VZec5iQ2An4k/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mks9HBmBpF8Z9zqHKrFQAcYe4Lm_JkKfJlw7H4mhURRNs-BMugn_MUjcieZ3wWr5yPeykthN0R7slUAhFHJsjgDOoqlbcl0LAbkOTIhnR1Y-EAB2Fs5DLgQvE3i2gKFpSk5hZMiHY5w/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUfPnF7FB8P_IrZaKsGEzNo8ChuwshRXG1B9MH9A6T4XI_tM1NsaScA-NGYZBUq87tlfVXVaj-bQrcXpJKbgizyIv86lxK06XWEGc2cJSMlwp2Rn8mzXy5BdeqiA6Ggnfd9Zq6O_ms_w/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXGObWuA3sFJcYaLBVOM2oXGKIUrXFkHG5Mi7dx0rpAB3px9KnswB4WPAk0_c1zXG9ZkcUa_4mIYzsWAk3H2o6FPUUtb5nQxeJ_nrmJl_JUaEVp8xVRG_4-v7r-oWKoMAi36i_odVVJM/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX8Hf0CeEmegeHL1VZ1N59DZEUOboIVRhNMOZgYzY7lo9I3quuTjjpe1gRBI8wmXn6CGgwK-IQfKfS4421IXQY284rCToYwM-2LcWhRLfkpkhDj5DYRXvRXYa_Tn7aN8_lPWcHbhVKT5Q/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_gxT_EnzDnKSRKtGN5gndfecI3Y9VjiHvETnFUb2Dw4UynwmvAVPdsN7_eFKheMwcA2qjvowo5LjJ4RO_DE6UWZnMv_NIDH0bezbzGh5rFWoZDjpS4BOuUdYAUtEUlNWXZ8BXzfcdmI/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxdcTfBBO-By1x3Iskdo4rRbHgkBpOaUCVs4rtjKQs-xw8Xh5Pr37BM-NZJYLG_b4gtyoW2mX_EsFXPp9vMV0lh5GBpYOX5wrK8pYc1pD91Q77neF5lGg0HAdyaLUJaLWH0grPXx0I4I/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8__X0BaW1aFOHl91ALKyAHA83qaRvCnrV6nTa4YDiKDWIrOY6QpysYIGT-yurmbW9Hl8JoLa_FzzNy_TM9hJM28i1fQ4TBo-rVILMjWn-NRxpHRvn2zF7z7VYAjm-iFtRE_Cimfaf_Jw/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgazgJTVqIWOSjbhUYOVUuF1meRLukv09ZyGsDYAQ84CQiGrda8xx3ijdeZw4fdv2qcMnx4DJ8ukoTkq9yJIAl8cghVk_ddev4jWT3dK2528NtH-Pa9GexLpAtx6xRN79PzX_DzU0aolvo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnC31n07ui78sKbcBA537bmmr14izXUbW3mBhNYdvaLxOBUH0CXjW3kNuzlDxo_GSSoHz1U8rztE3F9fRLsNk9LJkqiaTjfOeYJGA_tRXjxsFYwIih5Z3m8bHXtrNjCzm6VJtJXi62FC0/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2tBMxI5HzFYhMNjm2ekUOdVrIOCGEEbsN02VJaeDqfr7YkA4SLBzuf4k4VDcabqjhyEdUP7phxYc6PcKbom_P-oGvxmGNGc2bqMdj1O8bGLcp-mwJJZe7HUQep-8HYVnE_2n-2cmKRkQ/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAubyO4puR4isuCS5_x7i8bxUj-wImfIgbnQCfYL3QZvXoWT6G5jTtuir3sHn9mkTPyYROoA2r6_e6Q5Fcpb3DbP3sPivSct56cwOkfVg5BP3FgFB7O3bHM653izGWisn69DLU1lJ1L4/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVnsCHmI44oH4MzpNuXakSQJAy0tZjSeeKCH3qve5Ria2xdMhHWuioFIUWFFRPewBmQlTtSKGybJ4E1LnZgYlIMuNyjs88tEAw-iCQkxRI2AYUWmnqg19_AR_6E7-BZuNOwzDsHYv35UI/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8b0e6sy1NjVLYaiQezXqWJ_7pnypkuRPGnKIi_I8VoKp0H2gfTSDdhk47z-_VvHu6QgTPlhEcTLUdWajVyJl9i7M0vHEF9klBw5_p7QfJy2xKDPIWI6B9QVDJNXHur1AQPgOkBIws_5o/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSM3aNi2M7vb7WzRPSfH8YWgM5l6kvx3ltvLyANvYO21onGcV8YF-mGfHygo3SFJYkRpWv2KcunZXrVrRratJ5oV97h_lDZMKtFXhP8qpV1tduJvJUWZIRimtfmoWWF1fUhnoGrlLrlio/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnZ_aQfDVaug7_tsNLszkW9sgIO6r53CnRHRf_p7y4nvay_pGgxdRLyfAcOHjt6yCGoVAKFznaHfNGr8cN6lU2CbkDU1ZRLOXznpqJSOrwCghhd4-SwQ1gGrqobKrVl9smJjvsHABxD9Y/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/AVvXsEjhKebubMlOoBovejrB3o_FmazoQFORMFkqHyhxNFH-kUclAyvymlQ-tfETvnNET1FGihqac5YDlK1Clc_mg9A9U6d5pt4xp7xDUzXK7oXLzB822h4N1ZjT_ixQ7XO6Nfebqz_Wy0g4zTo/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!