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 HTMLStep 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/AVvXsEh3PQSckLE5qjA-ZzXzNPrIhx9ndmI0nfjEagvNQRigCOqkafcJr9ao_mfp2l6dpwxPsEOZpBXN6M8pCAE__xh_7vApWt0kUKzqAtJHLSfpQM2kRmJSyynhouddYAsjTSHPrvv7oHtwLuQ/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42gbfSMZ11xSYvqnxBDq0mujyEGwQZ__qpqJwm91n_a6w87aTNpaeKwpvg1OYFWfQEC6jglrelxnQC_PKVfCY4XV2Kl-MG4RXQtNnYltFNdC3xw3-9iULSy8NaL2K97adyIY7EYdcQ-I/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXGXg7c5qBsrrdZ_TQjnhBeTG5ZL31rQ8u5kCZLszMbmQdtST5OHb9_OpNd8agtg-EjJfEFIVBKF_SEVFAF9CGqNSQ-Gq1fPrPpp8IRV9CCU8HzX0J0evw-wCkLP329R6TXibn5NzQJg/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLdJgUgMF_cz87rlZexOpR7iHm_Hw0yWQSuTJnZHmJusl0yHEjzurd9znCJD18w3gtQHSG0vfyBEMn35vdxC3kvLmfPFPEjeaQhxDpxhgI3QiU8-oNq1JOdlxHg1k8vZXyrCywFWXvDQ/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3Lawl8K8pLyqyrInRKlBtE-ToUew5Fcco6v77YkgixtfFCoA5HtNy47iRXg67cgv2u2iv5aQsQk787CMQ-c4sM0Qy66WuiwcnAdJnARnru3dtcJuCSaJpH8tIyof_nEP27RQ8rrX65M/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKz7yguWCVz1ePtZUHkaDWydo30e0UdHwY2_bKXl4XAzo6DY9JGcfVZzSj-6tyJdTtEGXBlZWq9a8ZnG2wzKXEJkSB2SUkXpaRxaFOzrTeOjNarrzfuiQOrPRzQ96B5PwqnpKoMk1G1o/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61Gh5zLUeoZ5D3B0-FMTJ6ZkViIbQnzVnKLqUMrV6Yl9Ks_6iDoyZP1l46wL_lFvX-VU1t7VNtgfmEcQUXmVpN1wZvKmDqVb654qX18z4GTgZUmi5UIg0k8qMW4qZRyOkZp9I7YH1SQs/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidAR6vnWQYB-1xZGIed2zx9y_ygZ7Zl7Vql8ME4uxkT2FV9jRNd0M5bopNVY1bbJXZnWVq1ViUhau2ZO9MS1hUjQWJrzpZ-tSojp0z3ltb9XQO-BxRomJsMUQruNfa5LnxxMn9AkYUBKQ/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgA2xlVqKMkJBullWzQy-Cys4pkwO2BoSt4Pz1yokuUmRcFyqFqj0RHDo4c3UKmM8ng7WygZov2h1JOjiSq48SBTP_URzSEFywkcs54a_KJnyT97w-88i90P1CfVRGLolHAZ1KyluVwk/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicl6NTc3qTdd5J6040wNVaRlt5TJZa_82NC80znEYPBKLY-FNWCqpsbGKxKHQ05ur1OL1wG3su0moi6_r2zdNYZj40JJLpqSO4PuCN1vXZy4yDsdLG7lU9L0iYZkFxXW_vU9ONe6m4iuE/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrbNk4JXeWZ-cFlBMhVofS-a05IXkm7nRK_xXsz7ipbucp-FUZHn0Dp-2F7Eq5kc8-ViwplUF-LMVTbwfBDF9rhKMUR4Ep-WqJ93TgAwWb5iFJA-Eu5JimXbesgfjwBYcD06PdTUaQq8/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPIfTGgEpLNKbIQ_a-GIEfCVMbm8VUBwcw0XtMjhXMi8p5aFZftilIvWMWZpKeMoGFZJQg0_Y8zPCUD_aGBPx0fF_nzR6XtdWHcb2Pf_ZgDyV55pXGb4h2GNjNTP8OPKksBZiHbxKj-4/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-tkMmu3xcYdWq2Sl69FARgZVgQR9hy_8yNTkMD2q79MjUR85d-X7EZ-yWcyCUq1gfZVk8i-k089noadoQVY9uxr9i1JHo-LxofqV5E9suS3PbcjfIFRpdpeP6MZH2OX5cIAc7wjE9y4/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3oBbqwUrOps1TS6QR5wBbzhh208khOagBeyQ1O4F27Ab3L0aFNIJ11wwxDVQaVCNV9yOCju2QzjwFdkfmNowpNvefPr31Q3NgAoGgBvtqGJCNY2HaaTZ3oVDPm4wScdVH1qVbtK5bGQ/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUYjQe3hrrRAkw48J06J7PXs01eFkj9GoPIWit9wk3s1haGeeyp2MHOGpx3lgWCahqA9MR6UnjdmprbFQCeM66Vj7VNHoWnXvi1KtRPoSzFG9uOovjVE3Y5A1t240J5kNItOnwxg9m9Q/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnh4XX9p46m0YF8CpAGrxgGk_RmZ3UaYAVhP_0FqTZpm4HD6bA6QkE4NjCTEls0V0rvg7g_Vg6m2jIfgPARsluY4MxSqlP1gEb0IGM4vvWZfQsMbPskxMD5BggpMmXwwiA58BAPQydyNU/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Lslnim4I1wOYrxrYk8tImqVI7TbDfiV9O3cnrAwN06JlQihlHKhkcQPVOxr-JAserk2yjdNRI0-HdmeHDiRNLFkp4xA1PkLvFlHdr1m-_8tAdjh9QEz0sL4NFis9-jXxePZfzMgEwc0/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsaux-YW6EblKOopa0i3zFBISTtlSsJHQcJbXJst7QNGp7ohhjx05qGYzt-6vVeM5tB2d25lIvZpeMuIjxrvgJz7qRF2rDhytmjEcofJJG5WsYOGOZw2c1mVFr0ZpM8wdCAtbjX3eMfvo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-rToGzkl0Xri-IztaIE7UtQ0bVsgMbkcuOgQO8PpCSIVQjobKt9kHrK5AVJN0rhQfwbeDsGW-iDkg1kiJHXEBNq9vPtG49ri_GtZJ9B2tdZGGYCnstVnRnaQ3bdlEdmHDU_p8ytZ2So/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2ZBj3J2WyjR81wwPU-uhK3A0Vg-Pu1T9pySBMhTg-SoEDkmtQRg6D8fcZgrsn0nxArEAlt23tqwNHS19YkGrY2H4HYg_bUBU6HK88iXgiLU8yuJiZLws2-LlQn_ExKj_OP31FhtQCH0/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWoi0Syu_Eox9yNVDv2lienu4ce61Qrss9Mkq2rEZKiQLOA0dH0C4b_GNs7-P-YK2WS8T2ntOY45XlHo02NrP9zUJd-Y8OkTRm3P_JArPe5KxQWZM6fvCXHFZonyFV20FJqhJZkTGzXsQ/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUndf-3dwtBs89-mF9mca8UX_PaM7QpIicNm-DUmJtQNOi9syvCu8iw_wN9ACIU8t3LEfq6AiIAmIGg5mfgyqZvaS5ZKAigjdhNkm2f62wa-CIpNPbz1vQrVp399D2weGKy7r5VitCcZo/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3U3IUD-DpBH7j4HCA9vZxHiXaiq6RkSoyNYKzdQq8NYiHViO4QaqYWl96fUF6t7kgGLwSsktV2mlBHQmJQfqKT0XQyjycM_St6VxqP0OBFc1GZuOF8iwhmxzDlRiR3sZBlFlNyjDyqgc/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk41GKNegzv21muPo4gkGH47_Fiwq_xQW04x1W_H7_TnPijrNOlPH1N29kjZfmkMAx5XsHUGhXIpWi5ldT8tvC6lnEeP8cf0g8n2K3gFT5VkWLwJ1bWX5q3DdSWTznnFkBcLU3BZb_vNw/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilneJaGXt76K-R6xT62L28Lg1ZLuIEuZWXIhKQUEMR8M_osVW53uul-d2Nwg_7_cg9E-b7XfcJUorZBLtBothAa2RhDN6YTfx84WOSJzWlusZWCP3j-SybE82BLK-U759nopDapUOQqHY/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/AVvXsEh3PQSckLE5qjA-ZzXzNPrIhx9ndmI0nfjEagvNQRigCOqkafcJr9ao_mfp2l6dpwxPsEOZpBXN6M8pCAE__xh_7vApWt0kUKzqAtJHLSfpQM2kRmJSyynhouddYAsjTSHPrvv7oHtwLuQ/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!