How to Add Emoticons/Smileys in Blogger Comments

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!
emoticons in blogger, kolobok smileys, threaded comments



How To Add Kolobok Smileys In Blogger Comments

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)

</b:loop>

Step 8. Paste the following tag just after it:

</div>

Step 9. Now find this code:

  • 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 == &quot;item&quot;'><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='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>:)
<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>:(
<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>:))
<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>:((
<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>=))
<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>=D&gt;
<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>:D
<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>:P
<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>:-?
<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>:-SS
<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>:-f
<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>d(
<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>:-*
<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>b-(
<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>h-(
<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>g-)
<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>5-p
<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>y-)
<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>c-)
<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>s-)
<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>d-)
<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>w-)
<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/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='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/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!

If you have any problem and need help, please leave a comment below.

    Random Posts

56 comments:

  1. I guess adding some sort of live discussions to a blog is also a great value addition , visitors can discuss among themselves and that is much more fun than comments ....there are numerous such services available on web for free ....ex : http://confaber.com

    ReplyDelete
  2. It Works ,,,,,,,, hey Could u Help with Tht Link Adsense which u Put just above " The Menu Bar " and one in this Post above "Related Post "
    Reply Soon,,,,, Thanks...

    and Hey Thanks u so much I learn Lots of Things From ur Blog ,,, Great Work Keep it Up....

    ReplyDelete
  3. can i add more myself,
    reply to monu.arun0@gmail.com

    ReplyDelete
  4. Oh.. I failed. Template is unwell formatted :(

    ReplyDelete
    Replies
    1. Sorry, i think i wasn't too specific. Try to find this code (instead of the one from step 4):
      <b:include data='comment' name='commentDeleteIcon'/>
      You'll find the "</b:loop>" code just after it. You should paste the </div> code just after </b:loop>
      I hope it works.

      Delete
  5. Its not working :((
    http://clickterest.blogspot.com

    ReplyDelete
  6. Anonymous5/21/2012

    I'm a little confused, how it works?, the emoticon box hide and show correctly, but how do I to select the desired emoticon? When I write, for example, :X, only shows :X

    I need some help.

    ReplyDelete
    Replies
    1. Make sure you have correctly added the code from step 2 and 3

      Delete
    2. me too, and the emotion box only show when the aticle not have any comment before.
      http://custom-android-dn.blogspot.com

      Delete
  7. nice3 one.. i like it

    ReplyDelete
  8. Nice and helpful article.
    Thanks to admin. His work is really helpful.
    I have been reading this blog for two days.
    It is really helpful for me.

    ReplyDelete
  9. Thanks, it very good.

    ReplyDelete
  10. Can I use the same code if I link to my own smileys (changing the Photobucket links of course)? Thanks!

    ReplyDelete
    Replies
    1. Yes you can, but you must change the smileys location in the javascript (step 2) file also. You can open the javascript file with your browser by pasting this address in the location field http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js then save and open it with a notepad and change the smileys location there. After that, you have to host your javascript file and replace the js address from step 2 with your own. You can upload it to Google Code.

      Delete
    2. ADMIN YOUR BLOG IS SOO HELP FULL BUT CAN YOU EXPLAIN A BIT MORE ON HOW TO ADD OUR OWN EMOTICONS FROM PHOTO BUCKET.?

      THANKS IN ADVANCE

      Delete
    3. YOU KNOW WHAT..YOUR A BRIGHT.. I HAVE GO FOR ALL THE STEPS UP TO CHANGING THE CODE..NOW HOW CAN I HOST..HELP PLEASE

      MUCH APPRECIATE

      Delete
  11. Can I use the same smileys in my posts?

    ReplyDelete
  12. thanks for great blog Smileys tips. this tips really important for me

    ReplyDelete
  13. didnt work. It 'SHOWED' the emotes above the comment, but when I actually typed them into the comment and posted it, the emote didn't show :(

    ReplyDelete
  14. Follow my site, I already follow you.
    Thanks :)

    ReplyDelete
  15. Anonymous12/11/2012

    Good work!

    ReplyDelete
  16. thanks. It's useful! ^^

    ReplyDelete
  17. I've wrote a small script that allows to display emoticon on your blogger without any efforce. Please try this plugin at here:

    https://github.com/dongnd/Blogger-Emoticons

    Any feedback is welcome.


    ReplyDelete
  18. wew.. it looks like more difficult than i think.. XD

    ReplyDelete
  19. whats wrong with resize frame function? not work on my site.. :(

    ReplyDelete
  20. Anonymous1/06/2013

    Does it work for posts too?

    ReplyDelete
  21. Very good and interesting site with very good look and perfect information I like it.

    ReplyDelete
  22. thanks for your informative post now i will also add on my blogger

    ReplyDelete
  23. not working did this setup for 3-5 times....when i enter a comment eg: :(( it does not changes...

    ReplyDelete
  24. thank u very much bro...

    ReplyDelete
  25. many thanks.. successfully done..

    ReplyDelete
    Replies
    1. oyawa mata hodata dakala purudui wage...

      Delete
    2. මට මුන් දෙන්නම මීටර් වගේ ;)

      Delete
    3. උබ කොහෙද මචන් ...? :)

      Delete
  26. Thank you, this post helped me delete them! :)

    ReplyDelete
  27. Anonymous4/25/2013

    Works and looks nice, but how to move the faces box above comments box, and make it stay there, cuz now, when there is comments, faces box goes above the first comment, and when you want you to comment using smiley, you have to scrool all the way up:/

    ReplyDelete
  28. Hello! I can't find "Expand Widget Template" ... hence can't do Step 2.. help please

    ReplyDelete
    Replies
    1. Hi dear,

      The "Expand Widget Template" is not available anymore since Blogger has changed the template editor... so you'll have to search them and expand the widgets manually. For more info on how to use the new Blogger HTML Editor, please read this tutorial
      Hope it helps... thanks for visiting! :)

      Delete
    2. Ooh, thank you so much! It's working now! :)

      Delete
  29. Love you, love your site! Very helpful, I've had no problems making any changes to my blog thanks to you and I know NOTHING about HTML :D

    p.s. How come you didn't add the emoticons to this blog??

    ReplyDelete
  30. Hello!

    I really love this and it does work for me "as is". However, when I tried to replace the default emoticons with my own, it didn't.
    I changed everything where needed (including the javascript which I also uploaded to a domain of mine), as per your instructions.
    So:
    - "as is" it works like a charm.
    - without changing the javascript, my emoticons appear only on the board and the default emoticons appear in the comments.
    --Both of the above is normal!--
    - when I replace the smilies location in the javascript and upload the (new) javascript my emoticons still appear on the board but nothing happens in the comments.

    Unfortunately, I don't have any javascript knowledge to see if there's something wrong...

    Any help should be much appreciated!
    Thank you!... :)

    ReplyDelete
  31. Many thanks for this, have added successfully. Is it possible to alter smileys already posted to emoticons please?

    ReplyDelete
  32. Thanks You Very Much Sir
    www.jeetkaraokes4u.blogspot.com

    ReplyDelete
  33. it is a bit confusing, the blogger's edit template has number you should let us know which number codes are we to change. It would be far easier when you teach us with the new blogger's template

    ReplyDelete
  34. Anonymous11/10/2013

    I can't find ]]> plz help

    ReplyDelete
  35. After 10 thousand changes based on what is written in two blogs I was just rompento boxes because some worked and others may not, and were not as clear steps to do were a little confused! But luckily I read your post and I am glad, belonging to the fact that I am Italian and I understood the proceedings in English ahahaha: D thank you.

    ReplyDelete
  36. Thanks pro :D Coooooooooooooooool......:3

    ReplyDelete
  37. Hey :)
    Thanx a lot :) all the smileys in comments have come to life :) Yayyyy :)
    But one doubt though,
    I am not able to see the emotion list...Like what smiley to add all...
    Will there b a emotion container for users to use??

    ReplyDelete
  38. No worries I sorted it out :) thank u :)

    ReplyDelete
  39. Anonymous1/29/2014

    Step 9.

    Note: if you'll find it like 4 times, stop to the 2nd one!

    --

    What if you have 2 times? after which should we paste the link?

    Thanks

    ReplyDelete