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
METHOD 1
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.
METHOD 2
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
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 blogger.com and not draft.blogger.com, 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.

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 »

51 comments

PLEASE NOTE:
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 !

    ReplyDelete
  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???

    http://www.tips-o-tricks.co.cc

    ReplyDelete
  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.

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

    Have subscribed to your feeds!

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

    ReplyDelete
  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.

    ReplyDelete
  7. The file for javascript not found.

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

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

    ReplyDelete
  10. @sadr

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

    I hope I was clear

    ReplyDelete
  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

    ReplyDelete
  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. :)

    ReplyDelete
  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. ;)

    ReplyDelete
  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..

    ReplyDelete
  15. @Love2Cook
    Log in using blogger.com and not draft.blogger.com

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

    ReplyDelete
  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

    ReplyDelete
  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 blogger.com and not draft.blogger.com"

    This quote appears after step#7

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

    Thanks for pointing a correction.

    ReplyDelete
  18. hehehe...you know about Kang Rohman too broder...
    cip cip cip ...

    ReplyDelete
  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?

    ReplyDelete
  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.

    ReplyDelete
  21. http://duckandrun1303.blogspot.com/

    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

    ReplyDelete
  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.




    Peace!
    xoxo,mary

    ReplyDelete
  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 blogger.com. Please help, thx

    ReplyDelete
  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?

    ReplyDelete
  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.

    ReplyDelete
  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.

    ReplyDelete
  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 blogger.com

    http://ayinweeweet.blogspot.com
    plzz..help me :(

    ReplyDelete
  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.

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

    ReplyDelete
  30. not work man ? Aj

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

    ReplyDelete
  32. Mohammad i tryed all the steps.All! i use blogger.com 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 :|

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

    after download the javascript what i should do then?

    ReplyDelete
  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?

    ReplyDelete
  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 blogger.com
    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

    ReplyDelete
  36. Update

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

    @asyieq2lieza
    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.

    ReplyDelete
  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!2x...so,plez tolong sye solvekn masalh ni ea...
    tqvm(^_^)

    ReplyDelete
  38. it did not work. im using blogger.com 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

    ReplyDelete
  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.

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

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

    ReplyDelete
  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.
    ^_^

    Habibi..

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

    ReplyDelete
  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...

    ReplyDelete
  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

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

    ReplyDelete
  47. Thanks :), nice info

    ReplyDelete