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!
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:
Step 4. Copy and paste just above it, this code:
a) For previous commenting system with comments that have no reply function:
Step 5. Now find this code snippet:
a) For previous commenting system:
b) For threaded commenting system:
Step 10. And add this code just after it:
Step 11. Finally, find this code
Step 13. Save the Template and you're done. Enjoy!
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/AVvXsEjV52ZAtMBTDvudTTEZ0tHp1lAbqbMu4n54aKvP6BikW91SjK_S37USxumOI2TAVFgktwrHkiEvJPcxva8__yyE_a5dbDfxS0a0SsJ38Tli-BameqWJvpqAVPJ6lJl3gvFqPVmDFr1-Z14/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoXMgI987IpM0IzvNfHmRhTmKp4iDuF_OQzE5uT6zDGR28g0bt0obzPDd_lxPk_AmlNhBdJvbdTxgdgzqS1O80Ty0PkZglHuVRa-Up25pTb5lJPUblNmLCyj0ZEeFF3w3lL4pekZMPLQ/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhePP05qVphKF8zIA8d9-SOc6atutiWbZ8G7EyxELy98zIKuyX6t_XaxBRJZCp_OoLxYqvyL-sriwa_gxvY8xxPK4sHqryfC2UDHwvTyfUqtnbrqlrTm4eaA2X_F_awdXj9WLsoT-h1nkk/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTFf5cprG_KRaT7zkwSqGYcHorAsfY4br-Yo-U7K6LYKJuphQsv8RbgxB-iDmRwjPQHfOxSoC1hAWC6RAMmcrBIb2e2wDQHQhuyvEtX8q_Iu6GWoebXctZO5m4uQf78Wv4TBgULDVU4E/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgVqzxBdCJGLhR3y8AnoCwJN-CzWcV7arjH1cC922UjrUgzXSOOqCXPfY95mm_73Kf4y4u04rfXYE96zK-zEql0oqeBWouh1ku7EAp7QQJdCulYeVdEAvNqs5OsZXBcu8x3yRe0VMv4E/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityKAudhrCJyhwgSQKpJcfKk8LyFFxAg9emg4R_anaAAPZPbZpRi-Pt_Gbk-YDlZyZvSz9ILVS6-9KxuuVkK8Mj33Vwgs2O_ArAaG95ZapIldyYjW-8ub3kvQi57w_AN87taiBZkdQEEM/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFcEbEdVdBJlQIyVoa4aOe-UT4RBofMu6Rs2k_Mbly6q5-7FZJjyxhpC7htb53JUTpMIf8lHDhad2Bw0bLanwb62FyAkblHYzOoFLOm4k8T4EqjLG9NerqIqmlaJSSDT0wHVVUs0KXQo/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQ_CkN1ytqtK4z_1cxsjq06Ya3xa8_a3mLxUFjo0jflU0J2eeCLO1YYhgCPzSc_5FjBR995h9yjfAkKPL73c6A6XIDEa04bYT68cHb_laRp0DYOU3ZeK4AJN9_6l3W_12bQQ9n3xp6es/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh60ZZkQE-rMwm23q9k56dhoCVgd9jeRVGw8B5TagrbUZs26I5zVgQJSWxdDsETCWLOoGfxoD_hUFgSCMPNaNE8T-o4bVsJTaHnZE6Mv_GtW4_35nVF6zdb7zsCj5OC-0kJjS96n9foA1s/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQGH5J4v9-v_EpcIGDlGSxKatG7Pf4xEuKrP6QL6MN7nAUdxl3HB7RY0rQ8jxbAsS4wTJNWLBNHJIn-MDu5soc6zdzEXWrGPipsUtFQHtfpsELFgu8eqp3ouyKiWYzQpaCAQSh48XeZE/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMtIqtP_7HztOvPMiuhve8tEWzJVMZBOqBHFFeOZOCvy-vjLbB0CVixdop8CfXjfEgp3OXvRfW-T8TKk0bvclnk49Wh26L2ovGmrB4lacWsfGw0pXG8ouqvkYbh8MRhub1l38z65r4AA/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVArRP92s7V67Hjr2EcytSpOet8Ty8wyQ-bL0Hvix9NYgQim5ZQSkmdNDCSE04ll51VDHMzSXEVjhSljU7dbyUnfqBOtxkEurSC9gb03YFcfqg4-Lwt_cl2uKT71STQ0q6LpRAzXOFIpM/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1ER0qiJto6jYkJAh_qIzUyrcuXJw5il9FyDGQUMzcUepeg5h3hE-WcYA282TJZ-6NEpc8FEgkGwdGO60D_cW9pFNy_DU6Ru1q9a2MIYGjQvX0PsX4pomNJiJQyZnPQ1lDv1DyJ3Yf9g/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT7jNIwLNwgY7VYWACFjMNjGknenBi68YDqSWo-xZbyEL8e_G6BfEUrhUyv1q5d0_3VK0qIdBRYz-KZKxCuQg_oP9WaI9E3zPw8XJJF-0wgkw0dOIWdEbVU6VhCX0ZicMx3uwOUb5LjM/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNBVAgx_4egjHnuZGEMiCTHN8BkgBVAXQtDNrfVh97tX2ay0-qFAOjRDqSBDIfEJlO9a-FY52p7S6uAmykbTt4xVTlNAzhKFGxZ6QXz5ymqg2j_UAkCTb0MFswjD393Ksu1JJKyiQKWHk/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8z8S1OfcwDJS_lCNJUmYWFGyK3hdYe_7mDVhizj_xMoXjhkQbi9eEijlt6jeWohli3VsxvcAxdqai2u0qE0rFFYiCieZ-Z8uVULPCkz3geb84HuUm3BxI60KQ3V9DkOjC56A7D9NBbM/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2X_x29qin_bIKgswZABVbfjBlhiom0NOFAtjojnP35VVJenAa-Vt4yruUOBQA3_WSzHsbU9gCBfSVrMsT4pNkptLKfgtyTLsuPs3dr2WViZSdUpPJ2Fh6NTRn1YsZKUlXdVnKvvzdGmw/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWr2kHgzLzwaNfv5ECAOGwwn7H8eXaCzNSGkmxec5yfsuiLhvM4C70H0S2pVUtz_zv97HhYy0xxlSeh-tTj-HYG7Fl-fkBOn6rxHWyrV5GCIKfsZ_wAwiDmdgC-yhdvDPU4Tino-Ob5qo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOkzzDlhiBBASkKs0oI3dWfp1CmwsPuo4QPC_eVXq0tL8y6h6uo6I8fP7itwLZuhlQ4OpMnL9FRG0Lghweb3hVIBX4klhLoO_flFMVdsYctERipruuaiiQW6_E7Nl-2D671lprV1dink/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtN5bK_NMkarlrpg-9EwDvDjFjoR7SKMEqGUr3YJ1sbH9EpPKNmQIKo_jeRLJZv5aKqah1tb7QV7lt5_7sw8E9Uq43q9ZkwFBc_BqmQxQ89vgRAtl5N9qcdRH_JhagXZnjtScId5UAf_0/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_aWUO2drmL7tBcJkW2HuDo2vfR0RytbNMsT8FHusx4SgpN1MoxhhbnBytsKL5deWIx3Si9AjPlF7VGSN034zoPZ7l5rmQU8udvKledSXLavrrxQOgvezCL5HRK2F3W3dXSbAU1jSIXHk/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZvkQmHajzmPeAqvWWXjh2nWMyjkfoE-2Hvqifl9jnTLggKgT0I9RaHOnG8WnOgnuP-dpksAly3spFH7_0dZ1enBGHyAZxa-IjuxcUge_NTct72_zd6DhRRHWTAkXjLjaLOuhk4zw_UA/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FQm02igmokO8oCqQIpFi_A4HhtuFssO93fmQSmfyJSKId6h4umeliGmTrDDXsTZ99_YIbxij1p4eiH1Y7iiTf78XQNvSv4hBopsXBe5TXiQzfV0ET95jNb7OZPx4cHyaWK5ZnrIkePI/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmp-mtqkLH0U8np_FP7hZdJCovmVDFzjeUZoNFBg0K0ccdAw-nPgUrVWre5WTSayGHoTkd_cyIXsIa-GCMMeezNHY68jmCArqCGlAlF6MTsOr9a2zRw4rbunp7SF3e01P8yqWFCldK6Q/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZ5vyOzkW6dNAMgtEDUSLXOQe9_gZyoEmKpZaM6EzKMSuvxKmNpgKoxB3OUBYEhVUeN3Az2aOFN54MhICOM9YgBrnt903hlGItTvKJpFd6Evd8kMK6PWdUwAJQWnERlX2nvE923hFkDE/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/AVvXsEjV52ZAtMBTDvudTTEZ0tHp1lAbqbMu4n54aKvP6BikW91SjK_S37USxumOI2TAVFgktwrHkiEvJPcxva8__yyE_a5dbDfxS0a0SsJ38Tli-BameqWJvpqAVPJ6lJl3gvFqPVmDFr1-Z14/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!
ConversionConversion EmoticonEmoticon