How to add a unique set of Smileys/Emoticons in your Blogger blog

The ET smileys project kicked off when the Eternal Thinker blog wanted a custom set of emoticons in the blog posts.
After several requests from readers, I am sharing the free custom made smileys for Blogger with all of you! (These emoticons can also be used in Wordpress, Tumblr, or any other blog and website)

Now let your articles communicate more with these original cute smileys. The smiley set contains all the basic smileys plus a collection of interesting icons. You just need to type in the smiley symbol while writing the article, and they'll be converted to smiley images when it is published. Smileys will also display in the threaded comments in Blogger. ^_^ 


Main post content has been moved here

Note [28th May 2015]:
People who's been using et Smiley set already in their blog/website need to move to the newly hosted JavaScript files (check link above). As the earlier version is hosted in Google Code (which is scheduled to be shutdown soon), the smileys will stop working soon.

108 comments:

  1. Hmmm...very helpful post. Way to go Et! :)

    @Et I need your help on some coding. Will explain later.

    Toodles

    ReplyDelete
  2. Hey choco..and thanks to you!

    The smiley update was part of my early blog redesign plan, but somehow I got lazy at middle-way.I actually got the motivation to resume the work wen i saw smileys smiling at u'r blog. So thanks for the trigger!! :h

    n do lemem knw wat help u needed! :)

    ReplyDelete
  3. Aha! These smileys are indeed very useful. Good work. Need to explore your site for more such goodies.

    ReplyDelete
  4. Go on.. keep exploring..gud luck! :)

    ReplyDelete
  5. Hiii et, This is the First time i visited your Blog... Nice Blog Buddy.. & your Template is awesome

    Cheers,
    Kunal

    ReplyDelete
  6. Thanku kunal... :i
    Keep visiting!

    ReplyDelete
  7. Hey:)

    I've been having difficulty installing emoticon on my blog for a realllyyy long time,
    AND I STILL CANT GET IT! >:(

    I've tried following your ways,
    but I think there's something wrong with my encodding:(

    ReplyDelete
  8. @ dreaming angel
    Okey.. i looked up your 'smiley-tester' blog and saw why it doesn't work.
    The problem is that you put it before (head) tag
    You should move the code before (/head)
    ..replace '(' with '>'

    If you don't see the difference..
    There are two tags
    (head)and (/head)
    The code should be between these tags.Right now it is OUTSIDE them!

    I could've mailed this.But since i don't have your id..i'm posting here.Hope you see this.

    ReplyDelete
  9. So hey:)


    I know I'm suppose to put it before the "/head"
    but somehow it just isnt there:S

    ReplyDelete
  10. Hi ET.
    I found this website that shares cute emoticons for blogs.
    I downloaded one set and I am wondering how to use the ones I downloaded instead of the ones provided. Pls help :D
    Email: rening2107@hotmail.com

    Thanks

    ReplyDelete
  11. im using a custom template, so this isnt working.. but i didnt get wat u said abt the class n all.. i really need to place the smileys in the blog. please help.
    hw do u find the class names u mentioned..

    ReplyDelete
  12. Thank you very much for the smileys. After trying more than 5 sites sharing on the Smiley tips, this is the one which works :)

    ReplyDelete
  13. Could you add the class 'main' and 'blog-posts hfeed' in the script as I am using a custom template. Also, I have noticed that my infolinks doesn't work once this script loads up. I mean, those infolinks doesn't show any information on mouseover and even when someone clicks them, nothing happens. So could you fix it so that both can go hand in hand.

    ReplyDelete
  14. Thank you so much! Very cute smileys that looks good with most templates! 8)

    ReplyDelete
  15. dude can i get customised smileys matching my template?

    ReplyDelete
  16. @ DuDo
    We'll think about it :)

    ReplyDelete
  17. Thank you. I hope that works with me.. :D

    ReplyDelete
  18. Thanks a lot....
    You are simply great!!

    ReplyDelete
  19. @ Nima n Neeya
    My pleasure! :)

    ReplyDelete
  20. Hey et..I would love to have some of these smileys on my blog. But I want to keep my yahoo smileys too. Is that possible?
    Also I cannot understand the instructions. Call me daft. Help!

    :mj Couldn't resist :mj

    ReplyDelete
  21. hi et.i can put other smileys but not MJ.why? 'm dying to put MJ in my blog coz it looks cool :D

    ReplyDelete
  22. I have had the pencilling template for the past week now and it's just amazing :L

    I so love it..!!

    ReplyDelete
  23. thank youu very muchh ! muahkz ! :e

    ReplyDelete
  24. it's awesome dude... your blog is hot !! :P :e

    ReplyDelete
  25. Hi - many thanks for sharing this. I tried it on my new blog, but the background of my page is brown, not white, so your smilies come out looking square. Can you tell me how to hide the white edges?

    Many thanks :)

    ReplyDelete
  26. me too...there is border in smileys!! how can i hide that border/square??

    ReplyDelete
  27. @Dora @Popi
    Since most people are using light themes and dark themed blogs seem to be comfortable with the current smiley set, I haven't concentrated much on the issues in dark templates. i see that some smileys may need a retouch before they're ready to go in darker templates.
    I'll surely start working on a smiley set optimized for dark templates!

    ReplyDelete
  28. et, i succesfully can put tnis smile appear on my post, but why it doesn't appear in comment section? ouh..help me please, i want my blog's visitors enjoy it!

    ReplyDelete
  29. hi, i'm using blogspot, wand was trying to put the script into mine. But I can't find where it says < / head > .... what should I do? thank you!!

    ReplyDelete
  30. In firefox, or in most otherr browsers, u can take the blog source code and press Ctrl+F to get the search box. Search for < / head > there

    ReplyDelete
  31. Yea, I tried Ctrl F, but still cannot find any < / head> when I clicked on the "edit HTML" button. Is there anything else I should do??

    ReplyDelete
  32. Only thing I can say is, if your blog is working and showing up, then </head> must be there! Alternatively, you can search for <body> tag(which MUST be there in any case), and the </head> will be seen a little above.

    If that's not working, then you're not looking at the right place. Make sure it is Design -> Edit HTML in blogger dashboard.

    ReplyDelete
  33. Awesome!!!But it seems that the smiley is not working for my blog...=(

    ReplyDelete
  34. yay! thanx eternal thinker! it worked, yea, i was looking at the wrong place.... :)

    ReplyDelete
  35. I am not able to get smiliys in my blog though i have done everything but I have a custom template.
    This one.
    Name: Desktop Chaos
    Author: Klodian
    URL: www.deluxetemplates.net

    I can't find the javascript 3 lines code you mentioned above. what to do now?
    please tell me the way to use these smiliys.

    ReplyDelete
  36. hi et, i just downloaded your template and i love it :)
    but i should say that i want to deactivate the smileys set from my posts, although it's cute. is there any way to do that? thank u so much

    ReplyDelete
  37. @ arlene
    In the above post, I've menrioned the code required to Activate the smileys. So if you want to Deactivate them, just follow the above said procedure, but once you find the code, Remove it, so that the smileys shall disappear.

    ReplyDelete
  38. Hey et I am having custom blog template, and it seems .post is the class name for the post, can you tell me, how and where to call the java script??

    ReplyDelete
  39. hello i tried this but unfortunately, it doesn't work in my template.. can you help me.. please.. thank you

    ReplyDelete
  40. Thanks for this blog.. love the smileys.. :)

    check my blog candiceonloveandheartache.blogspot.com

    i wanna try the smileys for the comment part but i just don't know how to show the comment box eventhough i've embedded comment below post ... :(

    ReplyDelete
  41. hey really great blog, thanks for the cute smileys.. some of the smileys are very rare in u r blog. I am using this smileys in all my pages now... thanks...

    ReplyDelete
  42. I just loved what you published above, smiles are the best! I think it was an useful information and we can't ignore this kind of initiatives. 8)

    ReplyDelete
  43. Rahul,

    You will see a lots of comments from me today.

    So I am using your penciling template. Awesome template. But now I want the comment bubbles to have different background colours. Is it possible? Help!

    ReplyDelete
  44. @ Moumita

    Sorry for the late response!
    If you want to alter features of the design like the background colours, you need to get into a bit of HTML and CSS. Because for this kind of editing, we need to get down and dirty in teh codez!

    You can change the background image used for the comment bubble, and mention it in the code.

    ReplyDelete
  45. Cool! im an emoticons addict!! :r

    ReplyDelete
  46. Et, im confuse with my costume template code.. here:

    < div id='content-wrapper' >
    < div id='content-wrap' >
    < div id='main-wrapper' >

    can u help me how to change it?

    ReplyDelete
  47. Your script code is already changed and different with last version? coz my smiley cannot be seen! and I tride to add your new script code into my HTML.

    but still not working!! what should I do?? :c please help me!! please visit my blog to see what happened! :b

    ReplyDelete
  48. @Popi
    I checked your blog titled 'CINTA DAMAI' and found that you've included some other smiley script before the et smileys.
    Check your blogger code for this part:
    http://louislim2.googlepages.com/addSmiley.js

    Try removing that code and see how it works. For now, a few smileys are working correctly.

    The code I provide is different from the last version. But it is perfectly compatible with all the old versions.

    ReplyDelete
  49. hey i couldn't find the "head" how do i get it? and some of my smiley didn't show the picture. help

    ReplyDelete
  50. @woopsy
    Did you get to the Blog's HTML code?
    Use Ctrl+F shortcut in browser to get the search option and use it to find head tag.

    Not all the smileys appearing has to do with wrong usage of smiley symbols or lack of a blank space before the smiley symbol.

    ReplyDelete
  51. Thank you so much for the help on smileys, it worked first time!! :party

    ReplyDelete
  52. The heart smiley is not working on my blog :|
    Any ideas how to fix that?
    The others are working properly as I can see....

    ReplyDelete
  53. Hello et!
    Your smileys are awesome. :star This is a very useful post. :tup Thank you. :)
    Now my blog is wearing your batch of smileys. ^_^

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. Ok, it's all working now. Buuuuuut: When I activate the Website Feed and put the subscription gadget into the sidebar, the smiley list above the comment form disappears.
    Any clues or hints upon that? That's driving me nuts. I went through the whole code but couldn't figure out where the fault was.

    ReplyDelete
  56. how to take this simbol to the blog? :/

    ReplyDelete
  57. Could you modify it to work on other non blog related sites like weebly? (although I know that weebly has blog support, I want to use it for the website)
    :)

    ReplyDelete
  58. Thanks for your smiley set.

    I don't know why blogspot doesn't include a set of its own :/

    Regards.

    ReplyDelete
  59. This comment has been removed by the author.

    ReplyDelete
  60. Hi there! The smileys don't show up in the mobile version of my Blogger blog, is there any way I can make them work there too?
    Thanks!

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. HI!

    Great Job!! I´ve been looking for the way to put smileys in my blog for hours . The script works perfectly, thanks.

    Now, I have a little question.

    Could I have the code of the script? I would like to put my eyes on it and I´m thinking about adding more images and re-uploading it to my server to use them.

    Thank you. And again, great job!! :tup

    ReplyDelete
  63. Hey, it amazing ! :D
    Can you teach me the way to use my own emoticons in the blogger by using this method ?
    Can you please send the solution to my gmail?
    wincci.go@gmail.com
    Thanks alot ! :O waiting for your reply ~~!:$

    ReplyDelete
  64. OMG!! I was looking for these smileys, and I didn't know they were called "et" :o
    I'm so trying to add this to mi blog! :D
    Thank you so much for sharing!! <3

    ReplyDelete
  65. well. I'm back. A couple os smileys doesn't work on my blog, like: xP :~ :brow :kitten ... and others.... any idea why??

    ReplyDelete
  66. Thanks for the emoticons! :D
    These are very cute~

    ReplyDelete
  67. Hi Et, seem it's not working on my template blogger. Help pls Et.. :(
    I've been trying to change this code : div id="custom-content", but I failed to find it. How come?

    Thanks Et :)

    ReplyDelete
    Replies
    1. Hi feni,

      Your custom template might be having a different set of CSS IDs and classes. If you are having trouble finding the individual classes, you can always add the 'etSmileys' class to the <body> tag as:
      <body class='etSmileys'>

      Delete
    2. Hi Rahlul thank for replying, there's no such code as < body >. What should I do? Thanks in advance! :) :)

      Delete
    3. Feni, in your blog (one linked to your above username) I see this code:
      <body class='loading'>

      You can alter this as below and try:
      <body class='loading etSmileys'>

      Make sure you have added the smiley script as per the above blog post!

      Delete
    4. It works. Thank youuuu! :D

      Delete
  68. This comment has been removed by the author.

    ReplyDelete
  69. It Works..!! Great... Thanks...!! :-)

    ReplyDelete
  70. OMG! This actually works and they are sooo adorable too! Thank you so much! Finally I have found an actual emoticon code that works!!! WooooHooooo! <3 :)

    ReplyDelete
  71. How can I create my own set of smileys and add to my blog? Please.
    Or how can I put the 'Emoji Smileys' in my blog? :(
    Please , i need help !!
    Thanks, x

    ReplyDelete
  72. I do not have a custom template and I have included the tag you have provided. However, smileys are not reflected in the content of my blog. Do I need to do anything else ? Please help.

    ReplyDelete
  73. Hello, could anyone here tell me how to change the code so that a space is not needed before the symbol of the smiley if possible please? I would really like to use this without a space before the symbol...

    ReplyDelete
  74. i think your web very informative,.thanks for sharing information by
    Bisnis Modal Kecil

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  76. Wow! This is cool, unique and excellent emoticons. A great to spend time to read and share to my folks. Continue posting good article like this that really helps to make research easily get what they need.
    Mogicons

    ReplyDelete
  77. The latest 3D animated film
    watch and support they give me.
    thank you much
    Cartoon

    ReplyDelete