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-->
<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/AVvXsEjKnOtACIsuqA7mrjbVmvT_o56k3bgltmnZ0Kc0LBrwQOJmLsXk1Zm4mJ4eXXUQh6zcEZsBU2TQsXv4szMnm0eQopY72zDIA4zltBcI7WgDPdgLvLyYUIc3pK5g1EZS8mZ7VqY6zD-rsOU/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1joLqndy3Rr-LwQr7tjAazypfpebVRgoTstX3uNP5dZVDzotX7aBYGG2tSuq62UnAHox4g1RzGtyzsrtRp_MXWhLUdx_3wn3nw5hd4xfqsNIM1PeoAZdBFrNFssxxrOR3CnsXNC14wU/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZ3_1kYnPyOzr6cKYKUKTo5o4BRynqAKFZICUcN8jSiKlRa4yh-UdoDzqFIpVU0D_1jC0_jqYnt-RXscEWQij061sMUxGurjKH-xIfPi66pJVm3o2dCyZYHz554VVAZJw4XkeBVVpVPI/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQqb0pWnan4yWcZAB2784KUHgc7j7ewW5m3H1u5cM5de7GdLJJJohAMllk8ON2okdbDk8coga_QqH3E4rKkMcDpOP5IiOqkQzxgmW939ZbwlmH6QmbSt9Sf8eCIcaE_QcjlHE9YjA38QY/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIw-winDMsLTDYUiOicVHbqghuCTjmIysTzKGEdzsHhpw1AXHqKHLpzANZNaUzb0x2YAaMJ2TTaZQic9Cmr25-kMLwwe06dz9H8WD7MbLOScxxzROygQirHhKM84m1zJciuE7ZMrtPwDo/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCzqqQqYTC2CiZU036z9wf5ygOfpPEzY4LhDtB1IQ6AVRZ-mkCBvlY2DaTO42lCLdMDZXmKFAb5Mbr1L6Jd_8slAru6wH9YkjNlRrSly8bFEGHrZ3pEvy3Y36n7XbMn2iGJPSkLtzKtAg/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYJnX5Ab3AVEVAAhAk7bAaBDu4g0riGPJVs2yWEan6OYGT0qRlhQOzLmX3HJEGeYJhvvUPMrR_LbbVr45D_YPnhzLZzeS4cPanwFHPf31j0iPgUZ-YYaEPhtbjuTPvkCUoMJKz3Xitk9Q/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDHEtSOSk6lwDSei2yajPFLiHW4K7OvhGRPx5SNMHXvDlZmks6DcV6ZKmwBzy3MswRqDkA94xzJZva7hxiExIqhoM7-EcNhqvSyFqxiHMx4xbOMuBQkc4DJITEmpTqXI2-QMjdH4Vjl4/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtrasI7tZAhsNKg7o0q71DjmCisZ62pHi63ULCGBMw-fYBwxszoLNQDqF7gcZTX_1PzQhlQAwI1FKxDi9kEQVYH_WAAq9niS8d2dbbxGuCBqXbc2JzuHKPeu86w1BCqYxoNySYznr0fqA/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7-fyDRMis0ymbgK7ahkVXS1ovCLHtKWgAZcXEt8uUJ3MGwMugtrJbnCJTev-FI4BUlM0dFtKMQsjZHhpbsZuUAwNccfRUnogPMfCBaYFDTk-Z-1hq8rsJdOA3qutfGu9gOH_xUEYjUOs/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvir1Uhgi7ISd9lBVaWR3l9wAo7uufWkuBTvy8D4A3-aI9-TWgZn1YN3ewZYw3EwdFXr8EsGUtZKf9iDeDYAIsbmFg-iAicpGXr4pFeyc9HllcBbPvdUwsKqzx19oKVOnAIVB6ymrJSLI/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBC8sl5tlhrOQqDH30QciUbVtaNpWXt8DG3G77jJKk87ZSz-oUgxvV7ZtRPOcr6rKSU8iTHgNbmqWq4v2agljbpRtcJHX1Jxo8TNiqyu-K1ky2D4i0rkqHRXBHkja-GlolNSTuamMs-JI/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKSULNo50KGPx5atUWcVm75HXqHUs3eEX2eb5jkOwW3N-PPzfMGNMLyWx_NmpF__WnWQCMT3U5eiFrNcyvEmOS5J3bPbKBp-_-5UoE3CtzZZoPX3Eefnx5sJQGJFLwC-XtCbnBS4_cmU/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdKZOdS7j7oJqomKRKHUMxsvC1j_4-Nsc-KD7wXUExhWyAH-Siwqr1XHtlnXVqLfubKqB3RhcyBKfE-RJELlTlhe0AX0S92DLiFqoU4BkPvC2lhPP7e77ncd4VeIW0dPg3g34sZQk-dM/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3X6Uzm9GLrthOMAQdzp1qsoxxprf9fqD4SNdkF3CUjtDTlABhTq0Y5GByH2e8UN1FSO1u8s3uAeG2wZwKl-jbDFIOfxM26T-eMALg9wMB6vMMLQDxLf-HBoffjMb0R71KKuNwZyC7cXQ/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFg6bPlijVN6Nc9AUB-QYw1ZLKdjMGqZgmZy-60L4nIRuX6p50ZOi_CtsAoLpJb_6fow1Afgy9kmmyrBwuucxpWllzhe4LbniCbwPPpnY98AAOOYsyXcx-OsyGYLg-MHLZ8jkiuQPxXzY/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWjDiIG1KkjnFbvR9jS6jYqYxDWOVhzabL21-YFdQrQf9e5DxS1A790ixHSiK6OmT2eoG7k4V8nuC7hIXgOfpQKy_htEE4VtNKiyWpBP4-9VHNFL0EP6-4whOow_ok2d6DTPtVvMUZi8/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGh8aLj08vhsR-cTdH06ve4ufl5ijxz6_u_m3JXLR2QjjoJ3_wjqS1iBhB-gNzfiPUxH7Bli5YVUi7pCs34NWnDgRdq9xxqPhcBfs5ibsOY4zjOw2suInSdCTxoBpcpRBrv9hFg5Cdik/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCUZVqpV-excXu4m8hZlCd00FEcHYXtNbVPa_fOKyI7Sdex_u5MKI5YBszVpI-nMgKsOxViXohHCAkAlZ1GEK_Uup-IOcRbPJ9OeG6f4drcVA5oKYv8OE9rB3-hk-K25d-ctJ5WkWal4I/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhu0vAqBqWVs4ylMfqet5vGV96vHJob44onAd5VoEto9yEGQkYgY05mVQ1b3BAqDldBBZmXaEXaFVxoUG4k1SE5RG8_wSzPqNxcVuOtMkA_84p2atc_2qsu3uK-ASKQ8_f4HwvdAzahU/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuqssDtuz0xQCE2xy_AWcm6fl4evk4kRrdDz2QNQl5-5Bru9E8QagcEYUZWmCitMU7Q7icGlJ21vZPXxQ5kzPdqN04_7e9RiKyMQ_B_oUON_v4_0ZjAm0cnHJUIiEbzA7y4MPwAa9uDKM/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBH0XE_R1G-WJSgHgfU0FLjtSL4dnPdLIPdNoNtF_MsKs_oimf4qgiT6h97WmUJc_0ezhoDM1ISQEFw2nRnVFVcvliZ179BjS-gTW7iZDmFLDCQjMNqE1HPBRfSKQrYHAXewE7SCXuIw/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhor2yH0PWZfum80ZeeVrENwLfhRSWF4NnsrHNjGxRc9UV-ptDjRzL_UmRgVkEDrEC1o_GDV6jaz-feHu7oc7kEWRXuJe_TBIgkaT64MtXF0jBJnU6ORh8ZyP6dDhmXj6oJJYia79FdU-0/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlksQ3Pz6lhyphenhyphenllwv01VGmNv4gjP7BqusVOxtvQdqBmNwk7mOe752amSVPoYa-kmSf_ZS6cXDsfQObfsOvNvvhrdT_qXWOCgt4KF67WRvBp-LPpzWka2sEgKzJffKVfN8R1H3jWWn5ND24/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SPX58veWeZ06c7O2RsTV89nDUJ6kbCgGLFYJdhfUSljbsDBd1vbJDm5q3xDxn4QvhefZL4WnkjTpDpG1wLDK2e9IeF74Pg1WuvCnCSO09JS9kjgRN2a4DJdcWBLEUqkaPU3UzbUBvHs/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/AVvXsEjKnOtACIsuqA7mrjbVmvT_o56k3bgltmnZ0Kc0LBrwQOJmLsXk1Zm4mJ4eXXUQh6zcEZsBU2TQsXv4szMnm0eQopY72zDIA4zltBcI7WgDPdgLvLyYUIc3pK5g1EZS8mZ7VqY6zD-rsOU/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;}
.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!