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/AVvXsEhfyJ6cfOSpYpa1Z8BibOYSJ06b9r95tTCOXZFPN4rPT6gRQYbOafahd-DtOnvY-KhaX04NtZ-DAWOjbN2dMFop_v0dHtrCZ91rhaUfNyMwI9jHsXiofwCcUnI7NqG72AQpb-bdrjq456A/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTHDxoihRdVc4hLcIIEdgMIk2WKSy3tVc4ifLUUL2DVfNG7O0aJzQCe3KcgLPjPNxUx_0mqlMTb-QTD7e1Si0wZl0DaNZsuZsIa0pNnK8oSJlA5eVl45uuEyDPZBKotahNgI7w9AfPKg/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgHG6LjMvzaxoFfrIuNiYfwU3Qbu0AAoOUXERgl2kksFlF_xkW90WEhiFdyNbRYIJ7WkivhTENj8nkwtE62SeTLWpMYykLUner2wmBln6rytJPBz87AX5tNfWjSu-o9yCQ9a8cCXZVJk/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlAgJ3zNZs09n2cyEScmJdNTVCZAKUsBOstGsLPM6I-H23d3ig-pzMAAgImW3iglaU8xldix4KQlNc5TMM7mGfcvN6er-F9yEImfOU9QJoO3k4PFirHE4G1u7_1qlXNFjZTgMdITsZTk/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7IYwAbDCxlqfr59HEO3xfBZC2D0JmVhfxP0Y2XA9Ak8Vwslj7ice5PWbsi9RxETLMuld6-_HpHM_Zl3xdhU3ErEiqifpv6GcGyR2AmYtWHbuGLIClGvrjv0wX9dPiJiD52Z8oKYfmBo/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8NGtjKkbNAXnzXaOeJB00HbudBbakQ3UxcV0Cv63mmiwOFOYEi1kQc-ymqwzCAArWnjOMEXNoK13XNXo0DyAZkf37_aGlPflVrRFcPszyduG2D_zEofN7UEl8nIM-1BypyQX_zIjDlg/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9dKVO38S7ifXz_RRKDmzjQt8KC4hZOEx_hXKxUPZeXDLSU_F6W1c1yu1EXhkrolyWdZZxPuyTvnEMHqvYJhIcBEm5G01dw6y0swLuM9RQGWTVbjWoXJRIHTFbqemAKRWRse5UfyzlBQ/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrZUEX0mOU2xdbVrUa3ZE1KBE-XV_JCJt14QXyAld9ZHdg6plEeWxnlnGfiQtnXwwqMPNY08KrjP29601stBErAUHV0lXBvPT5dlWYHA0wEdu_mrEfVYAjdGtbyZRwPEb6Flgy_FxuE4/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBf4LIYsV4pFG_yeup_hLdNaQi_KLxFcCuK-NDgHfxLk-UJjOXmiqUcxZ4smYcAmxcfu6NQb4vYHWDyvBbDvoHYV07f55JWTmY6O-NPLm5vkNbSI58-QK_-ZlhhDJYjpAq_xYqxAjq4g/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-gvrV2jzT2nXfWjjpaBVTvLJIS_fTP3X-QycnEqug-2KhaOo7gNhYfsLUpHFzSXklZYpdOmMVUO-V1ZZ8PTkklNbcokETqF3gNJ6lvbHwjHbvonpfKYbr82eUPUhRQCeUCABA8ak_MOA/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGclzyBfmpy2FprN3a6Y9Ai-GTjZ1omb13KQ04uYfA508AtRnfJbH8TKSDf9Ff4sbI4-hXHlFu2EBOpVIkZ5dwwcfq6XoI9aniEd01cGQIrzx1nw-tQdUljgQe5_HkZJQudgIfD1NyZKg/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQGGhkC7s-vMy7FQ8SGT_vlS5uo7EBasAxhABwoZUJ4gn0vFr9KKzuk_CwrE48jvtiNlh3XajN-w4YZfvn9EsxrpvOZRTw1dYb5P5l3qBDEiRbs7a1f1OKFzQWdjKKy7Lu_R068ohcTs/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvp7HJmlv8mTa3uYZ413msyS8EMSGU608fdPutrrbpntXQkmzHSjrRCsBWi-hiLfJID4mCVXaWlkILOnsuHVihXC_qOwp7Fqa6PJmb2p5PV4tn4fRAGNmd9uoeGnFR2hbU_56NjyYAWKQ/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09RSkB8AkY92xDK2_V71yQch5FUdncyrVNo-NloxFB7mYH0TsMoCeM7tvaRYB-O0UWzIkqvyLqHuekavycxUUgDOKECDgUJAeURt15DliMRcw8FNiV-d1PEz0NPxYvV5RyMHulKF27R8/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZUNL15HJsvA4jTP_flNSG8bDTZ6IT0AbJse5gmc6Qt5-__GTivbbvQC8C8Vz9KfL0HroFIZ_j8udx7taneR3JcE0s0PMT6YriJkIohox6a4TpUMbaq0gcEYEVgUgg5d308OhN7PP6d4/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2SCj0QFoI8W0C4fpFvRDfU65BGi6ZzAenVf1USvkWtGOPr1_Y2JtAbCKodnrUmCb7N3IBsNSulsLtSqnddU9AJ9B5hKQ39a7-qo8B-NMbfl7INyJ7ovPuReMExTA9X3jWoiaH5TSohCY/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZqxoTNyQ89j2nwQK1A5srlx21uzpaghWHtW4ow_zg8urqVGD_FCmVWlQdlni9xG0dfw5M1jjRUW_L3Anis32m-KZjT7cxSBR4x8caMC_RM2H8y5ejkHyXZCFvE7Qz5wECTjYomRSKJU/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYIrZqtHESdcWORDUtQ6P4YOVdshulIqcsASE7MB-CpOMlpqYKdW_mcO_Wc0-CPOeaa5sxFEfm9Ik3bKrjQ_saUzQPSfMb_3yqmJ7WfZqAF75wxmebEwWYgGttUetzPYxWFHvwruhwKk/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_3tcD7ykuHP5tGasIba32ed7R2rQaPyvMhpgrqmSAVZuPlKFc1BiI7NQZ6VeEP3HekQv8B6nAtfR-0gc2vlc7IN0FeMNaNmkf7_kel16CV-gMMZtjPwWNgD3pnSo9gLCVr_3C6BsavA/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXRXut7i2k4ZgoMBllLbiWdyyeybRRSaZFI7wZueuiX-AkpO-6xFNI6JklKrqmRhlmTGy_pZEvUN8PrBOQ-H7Fyv6GtfQn0xkln6H1Nouxf4pPVXooX7VwDV9ajK4ZdtjJHBgKUVEHj8/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9_pPq7huM4IAh4BcnQS9LXoIrKel18sakBUaL0P65pctZabQ6Oxj6bcVs360TBVgigjY70pzt6KQkLs8yCa9-zEHtl-2-VHkCXxIVpfqmrnsjVexOJ71ozOEwt7KPaV7ZwFyMbSktVc/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEive6OP7XsA126KKXLYKNhcQ_6cfae-QvgIdvEkdxklyno4cn3ZwgDQuS-oY-u0rH2fEEIMgHDPsCerDl3H3ZVwobqACDNUW5KKqRApDENFZCQyW7qgYFrAsszmYRJMrIB5sAZ6mvUCGdk/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuvhDuzWFC8D3EBDpRrkp-8iUq0fkoD4AtBmJVNdCJpp1UMlmPfdTuEuzMTE1Ft6YKzqw65YT0v4xzF9rB41w-Bpt6CdL9eB67fgspVKP8fblKdBSsve9D7z2aWG2vO9B6ouYF68idXM/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMavuxlMwsnYhBKM24J9P5xk-GsXBRqP6wuc2N1ju04EVfDU-3VkxauFiTlLXnBNuXgZYDxJlK3FDLcFXI-gHZCNQQEQx1xMQyYJHPj_9oKcpwGL71HMYrooLgdloIB31iJ8KDSYzLHYQ/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv7Apf9178JoIcSElm0aAZAXun2687vcfPFoxzlTZ77loH9wAlWc7i32x_Wy16mG_vnrryqr2qMiu-5_E7HKqXU_BRjDPvrudo_ybgafzpIsxru5De9HY1mUgJ15ihoEY1IVXrS2Ymq00/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/AVvXsEhfyJ6cfOSpYpa1Z8BibOYSJ06b9r95tTCOXZFPN4rPT6gRQYbOafahd-DtOnvY-KhaX04NtZ-DAWOjbN2dMFop_v0dHtrCZ91rhaUfNyMwI9jHsXiofwCcUnI7NqG72AQpb-bdrjq456A/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!