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!
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 == "item"'><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/AVvXsEj0lCq6H95NMFyy82kLOXj8ZKrRufoz6Co-hBg9K_GIKx9Hjk4QGScDrqlubUlOkwVu72D-JZLbsMmmHOLvDbOqPXZm0U5eoxouPGMGYJywVHAZqKnH0x04S7cyN3LpZklfItFYl-h-92A/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinzO9LKbFbfxx1pLgCuW3iVczj633jKFraODDrweyPeb-osfvQwT0of4oEVuq_p2wPLr7pDetmyr64vp1o1hRy77FORgj3gqryRwsK5Qrz8GKLoNiqRU6l2fKKhgQmA6NI5M8DJUfvvME/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6qNHXt8uQfGuhIgipB6mKKwVqm2gZOpfe6NwCoCQge2u097Ud-cfnzbnDRVMvYGHrjW5xvEEqKJaGJTbMPpBGCuyvuta4ThrZsdpkq_IMFuczSbq_vfjC3K6DP_dmjleuNDVfmgg9qg/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QRN2GulZW2P_vJ35TWGb6A9BM2g91Rucs0a81lCyA5bHakXUCO6PHgJ_-Vb8lYuFm6zcfK8y_rjoNHcpG_sHFEGUly_oh2F9S60wYZMpdKWUze7rn9oX8stROn4AuGXPeCagXWvP-kU/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsKmbX3lIY599wBrBNZBaqSsgnTkegzUiOcq6Tb9PStFWbsHxGI6mERuywcpPMyCXcoKS1OmtH9E2-YhS0yvA3FE9KnXbmVBJMZtBacZvE7jKFxFQYCRtYi5emtWzSZKvAg76L6Y1ITE/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHhRAvL23zpThyphenhyphen7NTQWZ3x8zY7nzHAb7V9wyMmcu8hDNf2ed2d6-0LA2K6GFY3ibNBEZNajjFHqOEZvpx7AyNS_BhYHxKQBvBUPripnvghFP6rEJbwi9ClVIFokzn57in0Kr2aFX5a1A/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwq9xKHscssP4-7LcfaD3i8EckLhFePn9m0eoBdDgU3MUkbMSdJh_fAsVRI5GZQK440NylZEf_r8Jb9Hs0rbSFlALp1DkU9RUo_MuOS5XZMnJ98DWncbom2C0N0koqrHJt1h2bgJYChZ0/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrGLDUXnAhXl2V0off-rXq2y8c6QH4HgByzgrBMLsq6YmDO8JI871EifB8u3hGqPFRSmD6putlf3401hCN1Og7kfI7_Ea8R9WvJzdq1vV-R73cV8EMBG6vgs2TYS5-FruYE3N8ywCgwms/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZHI90oVMnb3d87n6L8OK9Gx0NGs6hR2n7FoMlJDOGi5bvxCca-oCfflXp7MyionwBzfsKOVgn-ZL6W_FfYYQq-TBwa_v5deUMtLuUNHN6kvo3ElmOSjZYr8caZ0FzfqTMwHEq9besNg/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJqvU33uO8fu2d2z62SS995LSj6qHkYbV95KsrJ9bEaFfh_J1VWtr5OJRLINSVGk3xDJNRbMHP6z3_clvjFuxOr-GBIxbT6Px-Qnig1q7hqbY6I4O7lHMsCp-1SIgQH1XWJaajSnC3hc/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGv2oAi3RQbH_crmlML8g1QngUQFzYVXg-qYvgn39cW_jNfih5ZUr-CV5OVcKZfwAaZeDZf-osBosvKkXv4mrSDPniYgLgX5h_-NARl81feRcbv_5kEY5Uv__g2Vd5fysn3UI15kzSzE/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQ6Mg4PC9eMevGVmX-QiPoRyDTfKdpE0zFJm9bthPpi_RylJ5IHLjmLJcAEDAoCYg0gTl8ZhZmecqenhux723m9QSwjEeFQG2vKDL9iIVfs2CMJpHmIhqkvxm-PkzR_-0VsrRNLN_eGI/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHajv6lKaOAUkNJeovrEuJhlZnLWUVtB5x0DqaKF_HRfjePWVRv3yb3j3msd1MdmcjQtlxYJoFPkj-OUDEpYkn7EZJn3uoZppuKnSJg2TwRT0ZHQlUBd2Yyqi6cvUBC9Ll2QI9-bHsDgQ/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYxIdmq_9A7maKEzqxl8Ie6qObNYax4SF8lt-PkbUcowCVQqRvtREWQb-Y3nr21QZKshyUizg3CQMyEnl96FFxUoJqB9fBxD78bD8sgBzUkYPxzp1DVEjLNEGEI9IruGUzx6YbcpJ6iI/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcdX223EjPgxfYh_nr-te2awO1uwgxrLiwPUJ5-CB50GxJHk2Y07O-pzl49ETFpUZ7TcvjeU-7lp2hE1NvuD6T2G8VVJjibitGxvO7MmCmts8t3Ep4c8OhCijIZyAO_An0jsOWl5Ajkb4/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIpT1XDs3MKlUBdVONbluE8wqcjD3Qt4G3VJtAZqf49dA0-75pFDkMjs181slvQeviVhWtJougwnGvOcv2nViSqcbs256BU-fFLAVXmwDqVgjG3Cdq3O3XA-ju3UEoMGIBwh8MoI8roUc/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3JrDhjjHPHq_g2hJ-k7apoqZx5PTlscoNvyEuSBH5sRQfe2tEpEXXUXhNqLP3q-5CREpevHGpEbZJdNFCcBm_gs8QQ656Ymg2LqYL3Mg21T1Fu0niGiIs2fUSFLJYiZiwZPprtOO4ZE/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuTQkV5xROU7Y6tF-Bk86nzcFXskF7a_K-ZOuPC7-0k1ssqu9f8qNt9Zpf3YpJ9PwBRlqXLdjQ3ORAvogsTgWtULEBi_YckYjn7PPXihsCAhEg0wDdzxNvMKjS4QLkIFZoK256HtvKCs/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rUt2Ny6pAnLoWUtq6niP80_85vaIIIKdB1MGfJIEXTN-3e_-G7tk5e-OueSMSpBmsjq80yHyajlIyIeoK4uaoHNv63Da8IYQ_9BJxZIlNC-9vSd-rj9snf9RvLs-Gunmn_foLfitHwg/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjik43dWGkT3eaa4dEMBUU0cN4ANKYKanr5RDpN3chkLaRab3TzNeWJvqezGQEQwY60VIjrtovYrvyOuqhxzywGgBXImif5l5PGAlETcRe48DGNxwKIrZuTiKWyRCZM1pxGAYjRC2_J8/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPljvqfFu-YOc0SHZ_uEAiO5laXaiO6rEJpwujFRR6gsEaz_0KDuDB_8wlWy-qe1Pt609Jp2l45H9dHIiYTZ_p3lsn2MGe6bB8lIfThvxrmZni6-OIYulfFH7e3iXgIJ7cKdP9Yadft-Q/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHrpGxkq4O4yg42B3_rplFVLjtjW6hPpSsEd91na_9sTkcHxGlG-dImuVcbQurHZYZ98YzLJidhrcsSns-VKex8GhRZdXelDvhhnxRaDErfmRcaOihq5Y-ZzQ74bX5aNqCy_eQ9eZakA/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq72q1VnHpma-tZUWBihocvjNZbDzvrnaPpUUKydRHn2DtqGduJLNH1EiVwpv_TMQfpYVHO4iP485ZXewr2P40E6Seb18tBnopxmhHDDgKq6a74fzgOurKqIEDPWq71cfiMY4JoHFvlHA/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1-vbTwOwexCJJ5E_643VSV74MlSF8OKWHKZn_m6ZudNeye5JY-2nLews-NrkcHrLtAKuSTMB7Ke_2aCp7kXO5NcyEozb7fhsNTuyxVLdmNXKkfahP1dhU6e85CkU-YC1HPd6Wd6bBAQ/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9rzpaOMoKXuYGGXvlS9_KiF1oQ1nEI4JXdkXht36Ozqr-_gHKDTxB6u8xMhzFTrBuV-qlFxxb9IPtrMtLne1QlihDWXyQ7dCYdm4CtYPxuOefnobserLLUtNMg9Q9a_K3ZpZGSXyr2KI/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/AVvXsEj0lCq6H95NMFyy82kLOXj8ZKrRufoz6Co-hBg9K_GIKx9Hjk4QGScDrqlubUlOkwVu72D-JZLbsMmmHOLvDbOqPXZm0U5eoxouPGMGYJywVHAZqKnH0x04S7cyN3LpZklfItFYl-h-92A/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!