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/AVvXsEglvi3ARPNqn-5d5YgFzoWGU7M4UQH-llcGkNxFQcj9VTksJhRl1vByp-gtFLBPmjDeDgEYer0ZbK4CEzGfVNH6Pln8KaslNk0Dfx87RdtjpAQCxinIc-IsnoZ8iqVYVZa-wJrLpCsgWwg/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aa7l1StUILhNUnQTQZUrxmlD2RyfC_10xQu3g9lp0TkvmgvqIHou2QZgsGpr0Co_GYHt_deNZ1Z1gQlVrMT2bS1UulyqtVe0Rx4sv6hTK7KBFaUW7sffZt61GTf3Ijzbu_s3YZTIYq0/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPQMDKLtzLXGW5vsgmIykO3hYZJ39O-Fd96HVqKmHV-BFNMZqQR-NWrdJTpG7UWzDHvGbU4mCs_zoB_ahVFtJj3Zm771hwC40u1BRS-G0XR9nzfNGXVYamxH-kvFU_yx24szSauIE17g/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaOstHLsUlEOgsteIw_mJrNrnA9M6qnnC3Jkhg9SLuTkTPN5_sUMSWa2aAg1lGnD0KbHirJejz9ZrfahSu52h42JaATFwCQ1XXLcit39svTvMrOsPi17Yhpjk6TCDNqnBTBMy26gKzhG0/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjundnrdPBfD5GU19mLRVBFVixHxjpo2CjkCZAzgr61sODL27oSLqv7Qr-m9pSOtfPPtxrTxshz_ezTKJu9vxhx5hRzPPP-O32wdYWsEvt5FYwREq1VDeml2X7kO3QY-g_OUisOhQqCpgw/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEj8gAQsoAuECEzcJD6Uo1tmacb4LgaH0O2YbIlTkoV5Gnos1zhmfUCnhgtgmPCM_1Xcwut3qVsAWyQ1OoDDPfmNQUNtE2BMaVE09p30IO_oEemM7_LNmu6HUQu5o_4789t_msuGK6BIc/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugA5FCMTAx-CubvnS9XLI6qENx70QyrPG5A3qhrHvBKe_Md9S_1n2-zOdYiOn79F0-jlg1-_o24AK2cp8TUzNaQAI7I91QNgI52zVsAG13xLn7xRsg-d_6d_3sN1hh1PYKRgzlkmHp1Y/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLyK_8pcDQIv4e6jKn-4FWwdYdYT8sF8DA8Ue4TRUV5jZP4juvDj_cisDq1SDlFPVWJZpjIFUq36nVdkliUTCR3mtFPTkouajbRAT_GI9ZGzsroDaM_w1Nq_8guk-_3keV0JDFvUw4byE/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcqFYRRzRRWbEvLR5qtmV6C8Q8pjRT4go7qbC57dVtqMvPGX6UOhWGyQhI8xo7XZ_Vg5YbkOgDMb1d9ARZqFFzJK4-ouo9_mQExfbXmCgjh3_Oo6f3hYLovoGuwGrJW-WAS4HZhqiH42w/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA256CUegv2MDryvOVIWFnixUPdra3usYJ4tCKpCe4sgdd6MLDFU301eQ4yItAlwFQ-CWjgKU_parVgkHkFdZrylP22yF3Yxjj9U4wonSyGKWfX5tY0lnATyfktPh3CvRidxkV88rq314/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoi92nxKsxDBLz8ypgF9j_ZD3HSqaZ9b6A2Gcku82P9CNH0s0tdRRyxxdWWJCfFn4XlYwcw_3KcisUKSL_95nBmVIR1Vls9IBkmPGoX-Kaqc8af5POFHiu5EU4ydsO7JkswNHLYw9gBo/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ1isznFtROvdAsEUR1cE_LVNll0Qbj75c7PUdVRWKCj4CcO4zkc5kkRtXIXmM23J9KzcivGu5RzwYK5-RBduzEW-N14QItZhh-_uclQZOsfivy4QbFiYejWn-Ohc3AHtId6X8xp8Jve4/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESxjZbD1O-iAjV5IAGEf8EJHUghvnI5fIimnrXb9P3sWVL3BTwnvMeJZxGlLJRr-bEw-tkie1yBDYMNDXgqmfzBe5cbnCd8_FCunbRFcPLcMwaWXPROb9L2Db_eLLMaloJZFBORypTRY/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Y8XMTtw-lNkEhFDkXtp30-_elwcizyXlhFe5M1_qx8mvapygO4jgB_nLIqoGsB-oGTq71xa_Yps6z5R_J9vHWNoV2jW6rXsk-Vhnt73JJI0P9040aGzDjw4H2nu47V1RVeNRuYUaYNc/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlWG35AQCtsibwRhrPFrOGxa3_oPd2VJ1Y-G4TtV8cgKDyVlZdVhHchx3umJMuWFEW2rWP0poEOON8MjDyBLeqkPOwo_6MIiI3DcoAgnhTQsq0QFfS8YA3fLscHR7rl0W8i2FnfqLKUQ/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB79P3pAWHX03KvrBqspW3RiqKaarIVTl6BtVJFCWH7BgFhZjB45G4TY7d4PbfqqR42eylIMTBFa4GlD1ar9IAzkX6xjyD8DfHShc4FHUaD_jmoQI6FJ-j6qJ0Jwpdlu8_JSUJR3vD168/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdoiLEvIJYrtxInwkMiE9hGUW4q1EL6J1ga0pU3ZzZ3t5f_ERai02KqWZllEho6k84ttUEbp5FofYiAybkbzWqzYOEdWTl9xR6cUIDyck6VPTinuW7er2HOu6NRhbC_o5i8bvuf2kRSA/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBik6xGFii_IYCTNaa7kjxgfJVVQQSbKVt2twoj2HGOjcfkRCAwPiSmeyyWiDQfwE6CzsPGYXdho4TTVxlqK1EhPIo69Q-GgGqBkEzvjKdaLb0geiLCBeVjlVNeYJ6vxItwxIUmxrPlac/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6gk99vXxMhjRDE3A6JZV-ZlC2fVzpSBp6PtFlgzr0ch7XETPV_29OwlReKyMYqtj1YjOLcihOCBj-e3clTbFsesHXxNiCD90_6tTgKVVknGMDfouxOCmhvNczF8ohcURfT_6JHGZ40k/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEqwEi14YsiKe7B6OpwmhDZI3ddlOp1I06sr0wlZ0WO82VNCntOKmhfio7V1Zp-7HoB4mkPLk1fC9nZzFMhR-vg-VhKGpuQyMuTBjTd4fHnTftV836C8p6eumH23nSl7SP5IXudj9lFM/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghF5H3Yz12iwiK6qY0sZfO5s_IK0339lA0w6uYYOSDiyUaQZcpoAKyJtYw8btHilik7DcsWmBme8lw5KanahiTbodq7OJ59oMpvsbLGiYIJuEDx0WCS2__jgYnENpBy7D1f8hEaFMkC7E/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsrw8qOlq1SbfGsWNdyBjOzGfqHGjBiZT2KdPaNacTyaRnjh55Cc0sXTraSeoTH4VDVcG4hQzp-Tn-baR6ogiClkXge5iXlQ3Kr_FMbKjkVNg0BWFE1GaFQ3QQsDiz5nwcJJCFbARXH8/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWbKf4ZqAKNASI6Zy6jNed0VhobxxBDIaOZ-GiIGEfnSeVJ1dX9sBPh2AKMp8DgOeZ-DEDefM5NvrfkU-7z_36CvYruCUBlCrahzaww-lNFR44tplK0sx9wyChQCK1gZhAcvWC-GjlbKw/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0JFyNk9HAmVupcyhhwkx0m_aVzONkb8OLFEdc6jPtedZ7bOdxxtJOU7_wmh7rqU-sJ3zExXe8P-wFIU4J40mI7wDWUzzDuvctkzMzvqD4DRAUwD8SnCbXkGY8Aq5USaDcxjrkBEHkFJ4/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFKC6Q7_72blwv6syRdTPeKvQ1cde3cQevwndoulV1SQe3qF_36QiJc6pgEtxC2xHxjgZgjj83g5aqErnZN3YMKhSwodUXppw2jeFgzsc6WRk-klqiAYyVVz5qC92pILHH3ubLHrCniR0/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/AVvXsEglvi3ARPNqn-5d5YgFzoWGU7M4UQH-llcGkNxFQcj9VTksJhRl1vByp-gtFLBPmjDeDgEYer0ZbK4CEzGfVNH6Pln8KaslNk0Dfx87RdtjpAQCxinIc-IsnoZ8iqVYVZa-wJrLpCsgWwg/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!