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!
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-->b) For threaded commenting system with comments that have the reply function:
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/>
<!--kolobok-smileys-->
<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'>Note: Ignore steps 11-12 if you are using threaded comments!
//<![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/AVvXsEg8UmdREtw3z9RvYjniovN06nUT7KxJ6ahtc_Auy91OergyMSQwlmMw5F1U2s9tocoVt-TzB0rdUhIhvMeRUWXaAep3P8oG_pd2QzaZM6WJtTAKGXbGWmFU76aC6pnNgADBo_7QnCxuRQM/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyA6myJHZwVEGdJG_mPIyT6pHrM-dRwW8tb354YonMXBkqolmmVcIOxhFktcW_-m8fAAizAZYPjKsO7T8DGAW_oUaV3ddWxNTK2iQBwBW7JSKsmgCG7aTd644bllEVcrCVUVsH9I4Qfs8/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZw7xoMh-3RxMFDD2lkXyWsheuJJQaM7qAgx4WHWuaaXtUeq9eDAr5aenSyOsSkxVKWKIYqBf6WUEdXskcnZI4xwqxgBAf60BrLJFwtnHSSf124p0AOSyFs6lsIR2dJnUPAr5PNBnUiO0/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPMwyhg1LRnmdEPTt_PKeE0REhMQhdTEFamK-X92KKsmQDyZqjZBcDKHKHOkHmPD2f_xyShvTZglXuEwULPfnzekX8teh290JPV8COZ1JS5uKd-W_xFQIjU9FmezrN1nQGn5s5uxOj_Q/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxL0nu879rx7uRbnaGucS9oLW2rnSJj-9OaZzcSgQOJinbLfer6y76P2B8cPXh-fzYDxpIf5PfPbSzKX0PJ9xUwY6py3cJv108w-OoJ9FS9xeHd8Z0QLXLFdLxu2_WEGT8x7Ubghm3tc/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDKrntAKYDdVX2lo1V6Umg44QUTs5lNxzMe7kgb1a0tobdj3NaKdJw5SFWeU_Rp9nGq0kF-QiZ8ocpfHgAKAco5d0LabgmNlbKtH8VufwbE1OQkCiDWU6Mt3ny2VbLVQfFhM6oZuOaoDQ/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9T-Cf_KxWV2Cev-JkOdbDXPhI7bolgwwuI5awTmNtm47r-2p7069rxfiNez3fxIaT5c3eq_EKfvKwdfy-t94vUihGNuLO1s_piC1ZvOMUvk7MujlPRjtwMCzDEjg-2waak9r7c3X42xM/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaX27cy9SE5vRWlKBZj1dmnz4Bv_BYhBjDFZOlTeAPHk_BDHPbvhlkfqf0os6wwj0fYXGGhW_7ps2b8CJZHec2bmOo6f35p8QO91lypmxHs2-BkdijMMUExYcqCvVfMSXonGwSPY4-HYs/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrGFLokGa1UGhvL7Y5Etuxh0djK0NRK43RHlkLCJnw-i84cwv8VKmYw4ifEmqo4AtWphzn5ZJyt8DEgSJSFL-E7e6oChmmhMKkPQyC1NK-9Aicv-7t7YHpv4eyDTbpYMK4ydszgTjVj_0/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVyAcLwZNv2VOg5ODEq785yS7RJ8-tQT3W4WABJEQti9bT_mAb6wK6EVcGJYAIbl67KO-PvH28hYFHqY97fFBcF_KaPK4ucCGNYiV5JZ9RSi15PVO6UvKC7WyEPknvXLW51eNTqPshz-s/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaXU1YB8JUC1VGW-e0UQa5evl-UV2uHFxahG6m6_90wt2MXjAAtWVVy7pdmSA6H3Afl66DHs-8YWuyDdaEC_yerbGMp3t-4A8pRSbwPVnGoFOXQBSpJbu7BvRrB7KztvacHNFLUa5_xE/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXM_2H9owpXLPLV2-4kBckvBk7bN6dt_7hn2wWXRirBOdVk48I6MGQJEKeeg3t5ZQYPL7Mpr11AnK5a5OsvJxbC1Dlgt4tNrHSUORfOZsZo2Qc3d52olIEckzgxRKilYfVl22MXGAQvw/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJISu34_1AyxQouW47krcloSMCTxzy_Afs-dQyu0qpubGv47pd-WVa2JvpZRcexqyEVk1eD7u5kyKWxgl3ST2Ed4mChE-61ubKVvIEWBUcrWmZGIt5w7-TzBM_sRm_XrGwQ_L6zwBf6Y/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp8SMh093pVAed6BRGqERFRhZvO7HVqmzxcipWeP1wYIpDkZmdF-mhOnq1hH7vf9og0o2BG3e9WeEOxENXwSH4jZnPFK7qr27me2kC7h_8K_z3pR5GqFbYU2BuaullX7Dik4RArBQYQwg/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsMXXuvnuahcBiJteQXG-ZE8yMwN0_euqVt-qdYTRXPmPnEg_tlcw8InS3-pcFKaDHVO6BVMrsRNU-_0weVydy1cm4zuE4wWdmzYz7nBlpPz8eWtpceVj0loh_z9DNYqLMO_U5pWiFy0/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKnuBajPtBlO6ZmXG6DAf0oc-OeMhOtLreH-_xhHlSk6Obtd9vst2fr25lyA5O6zgi-P-QbECZkNOCJFvHahLp1Oen67Xv5ShhLf2ARGPJ2lxM68kbBORnx5GmrK5J9VNuvPccG6IUboM/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIa7o4yU-lLgENhl9EGGnrNQJA7kv66u2YZv6jQvEkFS6yWefdcf0lYK8XeXQLHvnIvqCRgWw45FTuvgQjrN5vEiaTXyTATO_i2HUNXy2ip2j1z55YgZFnkNVbkmJcmS7n8rFdc-uIKQ/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFayrGSjU_h0pv5dI7h2dsgtkg-9xLqQWy6on_eteAm1XLjdeBmYz5q2QrbGcezmk9mtH4q3VB4uRtLrWp9yX-nGPOdFw9-drqjsALyjkuUNzMi35a7XxRQTQQnKdsRyv4MAzpNfw2Zo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZGhVGDD4Pff5l9L8kcQDvWi0dxjvas1vCRhrVfgMVxGCsnj0m0p6onZLPhmCpirOTmoF-UZu0smv8w-znVGczJPnRLXaESLcqQN9nTeVGAnl95blKqNuIg-F93J8F_75V4nB3mnd87g/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx230WQ2sn5_sCianGEDXNMbJShm603EoBkyuHim6y9L97sezW7MeIl9GDAU1Byju4rSkvlXv1SGKbx7JE5B9Zibn6tE_GnzQbOiC9uVTn-tTaIuq2KqCoxwbS48LQm6qISK67ptzz1io/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9STZZ_vg_OsKKvCKVIVtBQFmSGsPEc2KAQkQQAxWUhyphenhyphenUX2RQv5aB5Klnbc4Dv8ZnaLEU5r4UFGkmhdnUr_HkHuVviU9miQQwLK_yc_1v4HVcSjTUWKsq_vANYpekXbeufzLlTBcSRcNs/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUvKp8d4g-DkbwdTezGTCr7YAg3PkMJufUen7peAB7SFpQ4FqoueXld2ngzctUFkF52aaVblOe8MgesWSjBuwjHFMpK2zSrfi8S_GA2wqt71PSwnXvS7bqYxhR1nPGo64PKGbD_zKVo4/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggakwOnmLMg4BC4wiGLemMA_SxJ3xgkmB5nulRIyjCtIyNIlyDHL7sdnldLHWh4pk2M8RC8bBMaCV5YulU3Way7pw1JB3TriPZ8pIk65gJCxWNCzzD0SAjUnxZ50y9hteg9sdAxz5HkSs/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRA6ikcxU_6GZcpkNdjzc556JYb7riqfXwNX1ETp17z6BdTBTqVIbmd6PZAbbWz8lS48jxItRe3VriCtArkMtZwfIJYO2lEYZ_uwvE_ykSt97nP7Mq_8U7x-T7J9x0Mg7Nb1CPL6risYU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqFyxpgVtGljeyAytyvb9wzkvcELn2iDt4OcZZ6ivaEEznLUGQi3ZSqnOCETOxeZU9bEKZaCN9xgIdrioQOjkqFragprwWcsJ3er8yyazY__cu8ziRqKLacyxl3nVZaObtTOdQ0OsWf4/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/AVvXsEg8UmdREtw3z9RvYjniovN06nUT7KxJ6ahtc_Auy91OergyMSQwlmMw5F1U2s9tocoVt-TzB0rdUhIhvMeRUWXaAep3P8oG_pd2QzaZM6WJtTAKGXbGWmFU76aC6pnNgADBo_7QnCxuRQM/s1600/smile3.gif'/></div></a></span>
</div></b:if>
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;}Note: if you want to change the size of the emoticon container, edit the red code.
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}
Step 13. Save the Template and you're done. Enjoy!
Share story
0 comments: