Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.
Now available for threaded commenting system too!
Step 1. Go to Dashboard - Template - Edit HTML - Proceed
Step 2. Expand Widget Template (make a backup)
Step 3. Search (CTRL + F) for this tag:
</body>
Step 4. Copy and paste just above it, this code:
For previous commenting system (comments without reply option)
<!--kolobok-smileys-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--kolobok-smileys-->
For threaded commenting system (comments with reply option)
<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)
Step 8. Paste the following tag just after it:
</div>
Step 9. Now find this code:
Note: if you'll find it like 4 times, stop to the 2nd one!
Step 10. And add this code just after it:
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>
Step 13. Save the Template and you're done. Enjoy!
For previous commenting system:
<data:blogTeamBlogMessage/>Note: if you'll find it like 4 times, stop to the 2nd one!
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 /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
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/AVvXsEiYPiyJj0MA9L3cnpSyLymcj13pIIQgW0ekxXgX-_FgkomM59GlNsSM6vOdt_YIuiPnZr1NYRYwOMP15dwuAR1w4ceVgk9AFoy7NPw4qQYD3Q7N2QUS-BAf1SgfnexDdB7tYRQjUsMU4LE/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40aBPq67C7ldUhuU0Hcdo9YI4IuqGAKitexBECGvDDZoJf_xOIyR0o7oWFLKYfuhJUZAci-uqgleayaeP-dQJpEoeowIg5KI5OF5GgrC9NrU_jrBTKpkNEDgryw7mJG5Op50WDc0DwU0/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhSjU-7t55aC68WkH8KKwxw0oezfX8AXvBF0W_lyg1frtahZz0-GEuUQ2xvyLj_om5y_Gyz1LozFKy1ZT6m8ND__KbH-5KUj5-VNSTtPjYvkC22_s8cpO_ai5YLehId-5KpXhn9gHlVJc/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zXB17Du8Eaqo2hiHuVGfCsDS90ahhOgq-75eLncN5xdi9cB9U-FbWf0sfE_g4Jvo0j8H_dExYt_GloU70CJ11qekBGj_4dkwUKQQRRVITY5oGhDoH-hKp4ve6FblAKZBvoJDh7ywg1M/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgys3YCOXmDqtwoLXvCV_ngrlacVu7NASAqCUtBkiokknSvg8sJceuW9-Xe77ebZCJ6dLPgT95wHcUXgpFIvGWISzmhiSyE0xgfwYOY4EOZMLh11kBQBcUZmjdLzTPsdwLp2-lHo_k7t98/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz1gSgxLmmgP7T8GdnaPc5NuGeQpNjAwVANhMLox-wJ2wOQYAoOxRv_QHRNr4mRQhthhe8r1C-tdL2bc4jxeXFTGAc32cJIGS4JpgzW3394NLEprbEFz7yHngnMqvQROsqzxMJQWeMHGY/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJbB-FVirklPXTSKjjN7DeMayujlxaWrn0alNSR4DmRkVTIa1xRf3jEqfEZ6YSlOe-cgeV8PgaQK8ZR3zVKheOwciV4UgW5zYFQ_tVb87Tf-Rey8cFK6HMzsDmH9B7glsrEOuezHobO84/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25zYqde3C8XPgANEUXdx8Qk6KD0K3wHCE7LAv09swqRujM-InCJYNjIm6GKD7TdOrbyca4EkPE_9f9GVDmo_cM671e-JQKM6ieJvPhFaWpj6bpRey3fg-4YmHJ9QP3XeLUPKt-wkmuAU/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8h3scKNl-suMYTCGcZxPWyu5vh4bA6bm9x3KYZ4NvxVYQVaip-BRbUy1KAY5bPMvhpQpHiqQT5nwOGYRSj7_f3paeadawQKUNnB8v-4W6BvoYFZdX4T8DGRPDcne8H7IFy2rvjMZO2Y/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-CsncZhM35O7ho9xud-elbOqIZQS35g7m5tkTEItNh-17wP9XUkyVKPt_9QkOILJj_DhyphenhyphenhN7UurpDSLWhgYjOy8FeCzQWsBX3QdjdtlUHFteGc-mXd7zb0KV3bFgTwNmvnkcyiVAwxM/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHoCj5uoAHpDGf8KvGU9rRJ5_nCwwfne07KFHQulxyvd-aJWhEmqHE-WoLa86M9_m5BTKqFu6XjSbcsarn8LA0r0mIFvG8u7xLNqupeU7PTBMvlxht3tx3GUai_hRzF687GD5nw72Mbg/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2NhDMRA0OjCb6w2vvjFA_4Cw8a7gDgJtMkEy9reVlTbFcTQT_FyFvTtqaVIUg-9W8nY7HY9aI5nJx1-HiUJwEGWnZegsdV7YIgT94DJKhoxtJXL1aAq_C1Tj2ha-_1-9AgaCenLhnuF8/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOx2iekY3Zf4YWK2L6wfaxpi6A0HgVGv0JA2s6AhLFt3RsMIAtuACNyHafNFnZiJE3iEpWEov00ymDA6JBo3LR7uhjso6EZnp01hQVjgOryG1fduioTheTOrU89Xa5-uy8VUD827RqEZw/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIsqnRyRlHtPgkk4HXDG808GDTdPAVfQs3W7MZs93rGT05drnAvBYKDnmxkd9Oxv58iV1bdLjyU1yOWHDiABBo0H0w_PHS-UA1PMFIDGcdBouNlqrf7r6Clrr7AmPzZCcmZyDNpwb1CTA/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYLanFHeElIX675JZNFQprpJXce_1cocGAEjCg_NhqnDlIL5XFmPQJsR9uAkeHC8CzdXjwFM45BYqpGBU9tQSSeeSKk58qhzzd2RG49puONcztON7RjvJ7ylMa84an0ZohkMbV1NaJZI/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZUMX-2MAsHMMMLYnoX-BCIjyplm6zOykHk9sthMCb9GpkKdB6uHOsXEc0vQAWwGwKA-TMgvvv7tVwmv4BliWjl7Nejx13X1BDFkKqIxhqGsch6BdzgxlEGfKxWBrOMAHbtRqB-xjeP_U/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLXQbH9CCUjcKEuxNy7FnIHFDmHEpjl3rGeEs8I8NYeIy36ZNBGezC_Aut70fcoijT8P1AM-TZaM2qqS-DzyjcdpjyuOERixlGoKY9VmYyWsknygIGBc9Gbgy42oZwRpsWkqS-ByIX9w/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN5Dx5KHWoFOjCcX2GiuKh8P0soBq_5h_me9uymKU3_AXs4chLaDXptOdfQCypv8SM7VZmguiVP9_T8VjywC_a1CQpEPdstYwqJ-VdmtCMxWgz0J8DpikPiepajxatdJnfSoJQdQ3JgMc/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptDeiKjPqchRlAW4Yd8h-ZBktVLPwn4W8NN_JY60Uw4YMmv_1V0iJzu1VgLnIB3LWIDvWxeaqMELVQnOb1h_Xz2tac3lYH_PcfyxZsKAgVEh2msSj_AWGsPgjsveYfz8FPHpFBfKiFvk/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6mVtRcDKYnNRCZ7WVQPPyKoG98Z6XMS8PTRlmTmFtLebkwpu3y70IYoTuPub1y0o9GKIU_Olb9ItpXL3riYGaNzXtp1eYAVMoCQKpTsZ3JwLnGH2Mnwet3PZU4RyFg_G5TFKRsA27Ow/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETWrQJQQiUAQpuZVtxoBWFu_ef4IjKyownmeWoJANNubpvfOtJa5yQgmKMsOWVyRhqUY2IkaOUCgJ5lMegS7uVdvo3dHojGu9_Cj3TKiHOD82cYOX6nUvWgO_8oSe7f7sAHquf3LxKWs/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbsWGJT_B-vWBfqVP31wdxaWvLgAqC7LsnjthMvSudseuIOupsesXkE9nTYhzuecv9cDRV1SfuhUxXJ5GIFzoUW1aeGV-Dnsu8djRlboa3wztaS8FHr599XO0Op5XCiqRkZBLh_a1qNGw/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjhZ6skAaH4HM3uRTDr9sPI-H1S5sAMIDLojkQM0USnEY82l9E71mvM5YIAHA8XVzgZ8NmC3igJuNLWTkw8cp-Fy1254QWfI1IWXa8Tp2GfCpLWwaXkJZf9V6bV18FUaEICpEfqEK3bg/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFN6Opsp9d5ULVNWoVrGgAzsjnhMNEBP_fyTaD8UowM5nlbxn5h_SgmKD2Q-mRCz6zmK9NzZ_DoqmnXzmreLDi0IJD3r1VQQAeq5l0lnbPBRO_Non4Lpl8i_4TqNijdMjqnB7CiHLAUY/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc37KHTF2eQKjy3dhb10pe-iQyS5GkrrHuzB76PHsn2LcribM0lrmzutubADFs7NWrjbVNh94-ijMWGvfENE9n8CcL_eTgYY7L9y_YqOFsNSK9R6G1WTEhXyniAD4ZlrO3muaCFcYtjB8/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/AVvXsEiYPiyJj0MA9L3cnpSyLymcj13pIIQgW0ekxXgX-_FgkomM59GlNsSM6vOdt_YIuiPnZr1NYRYwOMP15dwuAR1w4ceVgk9AFoy7NPw4qQYD3Q7N2QUS-BAf1SgfnexDdB7tYRQjUsMU4LE/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;}
.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!
Working on my blog. |
If you have any problem and need help, please leave a comment below.
0 comments