Show Onion Emoticons in blogger posts

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,

                 

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 –> ) 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. Download Mozilla Now! Click here

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,

I hope now your posts will look more lively

Please feel free to ask any question in the comment box below.