Show Onion Emoticons in blogger posts

onion-display-pic If a word can express thousand emotions then an animated image can express thousand such words. Emoticons give breath to your posts and blog. No one today enjoys a post without pictures, videos and emoticons. Finding good pictures and videos is pretty easy today with image and video search engines but finding good plus different emoticons other than Yahoo Smiley is a tough job! Below I have shared some of the innumerable Onion Emoticons created by Onion Club. All of these emoticons are animated and 50 x 50 pixels in resolution. you can find hundreds of them at Onion Club.
Some of which are shared below,
3c68bb64 154218d4    big-black-eyes  byeCome forward baby   hahaha-2 hahahahhahead-down-oh no-cryingheheh hero-hi hey-you-son-of-ahi HIDING-sword-at-backi m deadin-lovelet me thinkmamaaa-lyingmama-running-cryingMay I do that punched  seeing-resultshocked-red-arrowshytaking-baththk you thk you-big teethwhat-question-markyeh-big-nose-geekonion_gifs_emoticons-25 onion-head-emoticon-26 onion_gifs_emoticons-13 onion-head-emoticon-1 onion-head-emoticon-3 onion-head-emoticon-10 onion-head-emoticon-11 onion-head-emoticon-12 onion-head-emoticon-13 onion-head-emoticon-15 onion-head-emoticon-16 onion-head-emoticon-17 onion-head-emoticon-18 onion-head-emoticon-19 onion-head-emoticon-21 onion-head-emoticon-22 onion-head-emoticon-24    onion41 onion68
Methods to add Onion Emoticons or any other emoticons shared at “TNT by STC” to your posts
You can save these images to your computer hard drive by right clicking an emoticon and then selecting “save image as”
Now whenever you want to add an emoticon to your post, simply upload it just the way you upload an image in blogger and add the emoticon as an image in your blogger posts. The good thing about this method is that it’s pretty easy and even a newbie can do that but the disadvantage is that uploading the emoticon using blogger will make the image still [ blogger editor don’t let the image animate] So you would need Windows Live Writer, which is a best editor for writing your blog posts in a more professional style.
Upload all of your Emoticons to your Photobucket account Or simply to your blogger Picasa album (I mean create a simple draft post as a backup for all your images). Copy the URL of each image in a notepad. Now whenever you write a post and want to add an emoticon next to a text or anywhere you want, simply use the code below,
<img src="URL of your emoticon"/>        

If you want to add a title for each emoticon which must appear on mouse hover (Hover your mouse on this emoticon –> fingure-in-nose) then add the code below.
 <img title="TITLE of your emoticon" src="URL of your emoticon"/>        
IMPORTANT:- Remember to replace the text in green with the required detail.
If you want Search engines to crawl your emoticon and bring you huge traffic! then enter the code below,
<a href="URL of your emoticon"><img alt="Describe your image here" title="TITLE of your emoticon" src="URL of your emoticon"/></a>       
IMPORTANT:- Remember to replace the text in green with the required detail.
If you think Man that is pretty hectic! then Jump to Method 3
Suggestion :- I prefer method 1. Use Windows Live Writer to attach emoticons to your posts.
Method 3 is a cool method I learnt from Kang Rohman This method works only with Mozilla Firefox Browser. Don’t have it? Don’t worry it takes seconds to download and install it. 
Follow these steps,
  1. Open your Mozilla Firefox browser
  2. Install an add-on called Grease Monkey
  3. Once you have installed Grease Monkey, restart your browser
  4. Now you need to install a JavaScript that will cause Onion Emoticons to appear in your blogger editor. Download the JavaScript For Onion Emoticons
  5. Now Sign in your blogger account and go to Settings > Layout > Edit HTML > Click Expand Widgets > and search for ]]></b:skin>
  6. Copy (Ctrl+C) and paste (Ctrl+V) the code below just above/before ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
    7.   Save you template………Done!
When you sign into your blogger account using and not, you will see Onion Emoticons appearing in your blogger editor (In compose mode) just like this,
Onion Emoticons
I hope now your posts will look more lively bye
Please feel free to ask any question in the comment box below.

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. wow great! It worked just fine for me and yes method 1 is really easy compared to others.
    You are right the emoticons dont animated while using blogger editor but works just fine with windows live writer.

    I just stumbled 3 of your posts and am so much excited to learn such great tips and tricks all at onCe.

    Keep up the good work !

  2. Wow! Now This is interesting..

    But I am using "disqus" comments on my blog.

    I think I cant use these cute emoticons!! :o
    Or can I???

  3. @Zain

    These emoticons can be added to your blog posts or sidebar only. Though Yahoo emoticons can be added to your comments. I will be writing a post on it soon.

  4. Ok thanks! :)
    I'll be waiting..

    Have subscribed to your feeds!

  5. how to make onion emoticons in comment box in blogspot? could you help me please?

  6. Well I can surely help you and it is pretty simple too. But are you ready to twice increase the load-time of your page. Yahoo smileys do not take much load time but onion emoticons are heavy in size and should only be used occasionally. Adding onion emoticons just above a comment form will immensely increase the load-time of your pages, which is not good for your blog success.
    Moreover they are larger in size about 50 by 50 pixels. If you add them to comment form. They will look very bulky.
    In short I wont encourage someone to do that.

  7. The file for javascript not found.

  8. Sorry for the inconvenience. The JavaScript Link is updated

  9. hi
    it worked but it didn't work in new blogger editor.Do you have any solution for it?

  10. @sadr

    Friend the new blogger editor ( is a test version of blogger. So apply these widgets only to the temporary fully tested version i.e and not

    I hope I was clear

  11. i already installed greasemonkey & followed all the steps in Method 3. it seems to only give me the YM emoticons on the compose mode.

    how do i put the onion emoticons at the new post form? pls help. thx

  12. sorry sorry.. i think i already got the solution by reading the tutorial in Kang Rohman's blog. thx again for ur lesson above. :)

  13. Hi there, I've installed Greasemonkey b4 this and have Yahoo smileys in my editor. Next, I tried to save the Javascript for Onion Emoticon, a download attachment window appeared and I've saved it. What should I do next? Unable to see the Onion Emos in my editor. Pls help, tks in advance. ;)

  14. I tried 3 times using the greasemonkey app.. but nothing seems to come outta my posts... I'm using another link but the emoticons are very limited..

  15. @Love2Cook
    Log in using and not

    If the problem persist let me know so that I could present a new method in my new post

  16. Very good script.. But i think u should mention that this works only with the old Blogger editor.. Many people wont be knowing about it.. I tried downloading Live Writer but along with that a lot of unnecessary stuff also came so stopped it... KEEP UP THE GOOD WORK

  17. @ACE Of BASE

    I am glad it worked for you :>
    I have mentioned in my posts that it will work only in old blogger editor. I am quoting those words here,

    "When you sign into your blogger account using and not"

    This quote appears after step#7

    But I will still update the post and will write it clearly.

    Thanks for pointing a correction.

  18. know about Kang Rohman too broder...
    cip cip cip ...

  19. hai.. i try to used your emoticon. it works. but i cant seem to get rid of the red box around the emoticon using the html. i did copy and paste itjust before the "skin" but it still there. a little help?

  20. @JT

    Did you add this code,

    img.emoticon {
    padding: 0;
    margin: 0;
    border: 0;

    If yes then you should see no border across the image. Are you using Method3 or some other method?

    Share your blog url where you are implementing it.


    u'll see the white box around them. only if i change the border colour to black same as my bground then it will be gone. but.. the code wont work

  22. "4.Now you need to install a JavaScript that will cause Onion Emoticons to appear in your blogger editor. Download the JavaScript For Onion Emoticons "

    look,i do all the steps but this one is impossible for me!
    i take the java script,it appears me in notepad: what to do with it?
    i don't understand....
    please hurry up for answer..i need it very soon.


  23. Hi

    I have follow all the steps but the emoticon still not appearing in the compose box and I'm definitely signing in using Please help, thx

  24. @happy

    Have you installed grease monkey? If yes then it should work out. Clear your browser cache and restart it and then try again. One more question have you installed the javascript?

  25. Yes, I have installed the grease monkey and the script. So I tested it by creating a new blog and amazingly it worked but not on my existing blog. Don't know why though. I think I just change to method 1, but the background of each of the emoticon is white, how to remove it as my blog background is grey in colour. Thx.

  26. @Happy452
    Thanks Goodness it worked for you at last! :D

    Well bro unfortunately the emoticons are in gif format with white background only. Further animated graphics often have white backgrounds and this is why white is the basic colour used by all designers while creating templates.

  27. salam

    i tried sooooo many times and still,its not working out.

    monkey sudah di install.the script olso..the script for the emoticons pn i dh install using monkey.olso dah copy paste yang dlm HTML tu

    img.emoticon {
    padding: 0;
    margin: 0;
    border: 0;

    i mean this one..

    but still......adoi

    im using me :(

  28. @ayin weeweet

    I didn't get a single word :p But from what I could understand you meant Thank you with TQ lol! :D I hope it might have worked for you.

  29. ok but how i can add this emotticons form my system comment for all

  30. not work man ? Aj

  31. Wow! thank you very much for this!! really really helpful!! :3

  32. Mohammad i tryed all the steps.All! i use too. But for me

    img.emoticon {
    padding: 0;
    margin: 0;
    border: 0;

    is completly useless.When i aplied it it appears to me bellow in center on my blog. Doesnt work for me :( and i dont know why :( i actived and install all u said :(

    im so unhappy :|

  33. how about method 3?
    im getting confuse about it

    after download the javascript what i should do then?

  34. I did everything:
    installed grease monkey
    installed java scrpt
    (and it is wriiten that GMonkey and the script are on and working)
    But when i login the blog and press create a message (in compose mode) nothing appears/ No emoticons at all....
    I tried deleting all the histiry, cashe etc , but it did not help.
    Could you please help me?

  35. Hello! I am trying to use this tutorial, too!
    I have installed Greasemonkey
    I have installed the script
    Greasemonkey is enabled and working
    I am using
    I am in Compose mode, not Edit HTML

    But there is still no sign of the emoticons...?
    I hope you can help! Thank you!

    My blog is abc-lolita.blogspot

  36. Update

    This Script does not work on the Updated blogger Editor. sorry for inconvenience

    I sat for 10 minutes just for you pal trying to figure out a way but the updated blogger editor doesn't seem to accept the greesemonkey integration.

  37. Hello...
    nk tye, cmner kite nk remove onion emoticon ni dri blog kite? klau kite wt post,bkn sje x jdi...x appear pom mse kite tlis post kite,gram!,plez tolong sye solvekn masalh ni ea...

  38. it did not work. im using too. i tried many times but still it didn't work.
    im using google chrome as my browser. since i knew it didn't work for it, i changed to firefox but still it didn't work. so sad.. :(
    what should i do? i followed all the steps u told

  39. @Myra

    Dear Method 3 no more works due to the new Blogger. Kindly use Method 1 and 2 instead. I am really sorry for the inconvenience.

  40. ohh..that's why it didn't work. by the way, thanks for these helpful tutorials! really appreciate your works :)

  41. I got same problem as asyieq2lieza...can u help me...

  42. Kang Rohman is a blogger of Indonesia.
    He has written articles on blogging niche a lot.
    His writing is very helpful for beginners or next level.

    And the third method is very great to me since it appears and simply click on emoticons to display them into our posts.


  43. is there another emoticon other than onion one ???

  44. Hey bro ! I want to add emoticons by your method 3. I followed your method 3. But the emoticons are not appearing on "New Post". Please help me providing the solution. I am waiting...

  45. in method 3 u should mention it "please do all th work in mozilla", i open ur website using safari n i do the editting in mozilla. no wonder i try to download javascript it become a note pad. hahah

  46. How can you use those emoticons to your cell phone when texting?

  47. Thanks :), nice info