Monday, February 18, 2008

Use Emoticon On Blogger Blog

If you read through some of the posts on the Cool Stuff blog, you will notice that I use emoticons quite frequently. While writing good article is important, adding emoticons to a blog post makes it looks more interesting. To add emoticons to a blogger blog, follow the following steps:

1. Sign in to your blogger blog, and go to Layout > Edit HTML
2. Add the following line of code to the head section of of your template. The best place to insert this code is right before </head> tag.

<script src="http://mltan100.googlepages.com/emoticons.js" type="text/javascript"/>

By doing this, you are actually adding a javascript to your blog. Everytime any page of your blog is loaded, the javascript will automatically change certain pre-defined characters / symbols into emoticons.. So after inserting the javascipt, you will use the following pre-defined characters to invoke the emoticons:
Most Yahoo emoticons will work with this javascript. Example:
: ): P
: D:-D: ) )
= ) )=)= D >
Besides Yahoo Emoticons, I have also added the following cool emoticons for MSN into my blog:
/ wa ha ha / hi hi
/ o m g/ n o
/ dig nose/ s w e a t
/ s h o c k/ f l o o r
/ h m m/ X D
/ b l u r/ b l u s h
/ no big deal/ p l e a s e
/ b y e



Please take note that in order to call up the emoticons in your blog post, there should be no spaces in between the characters. I include spaces in the list above because I do not want the javascript to convert them into emoticons, so that you can see the characters.

Blogger.com is one of the most popular free blogging platform today. There are millions of blogger blogs out there on the Internet. Adding emoticons to your blogger blog is one of the cool stuff that you can do to make your blog stand out from the others. I like to use emoticons in my post. I express myself better with emoticons.

(p.s. I have received quite a number of emails asking for helps. Unfortunately I do not have time to reply each of them.. If you have problems implementing the emoticons on your blog, try to learn HTML, and some basic Javascript. It should help )

111 comments:

Anonymous said...

Very nice smiles:)Are you curious about it?

Anonymous said...

Fun! Great ideas

jamaine12 said...

I love the smileys..Especially the "sweat" one..So cute!

Anonymous said...

Very nice smiles:)nhie

Anonymous said...

Cool emoticons, thanks!

Anonymous said...

Thanks for posting this. I haven't used emoticons on my Blogger blogs. Just haven't thought about it. This will make for a nice addition to my posts.

Anonymous said...

Thank you so much.I never thought that this was possible on blogger.That too such a big emotion icon.It's just amazing

Anonymous said...

i like these smiles thanks

çocuk oyunları

Anonymous said...

Wow great idea.. Now I can add Emotions in my blogger blog. I shall add Emotions in my blogs. thanks a lot again.

Anonymous said...

I agree with you. That is writing good article is important and when adding some emotions to a blog post makes it looks more interesting.

Anonymous said...

Not only Emotions but also quality article is important for makes blog post more interesting.

Anonymous said...

good work techy

Anonymous said...

I used to love the onion head emoticons but I think the monkey ones are cuter now.

Anonymous said...

I must be doing something wrong...I can't get them to show up /blur

Scandalicious Lily said...

Same as Kate....
are you using fire fox?

Unknown said...

i can't seem to be able to do it..
exactly where do you paste the code?

Unknown said...

oh i finally did it..
i had to close the html code u put properly..thanks! it's so cute now..and i don't have to keep reminding myself that there r no emoticons allowed~

@kelantanstreet said...

very very nice...thanks..

this one is so cool...need to remove my current smiley js..:)

really intesting :) ;)

Anonymous said...

i can't even put it in my blog...
it say i didn't close the link.. i'm new here.. can someone help me?

Admin said...

Anonymous,
Make sure there there's a backslash at the end: "...type="text/javascript"/>"
If you still have problem, feel free to drop me an email, let me know what error msg that you are getting. Use the contact link at the top.

Anonymous said...

hi,
when i paste n save into my blog, it did has a backslash in the end.But i'm not sure how it works.
can u show me where exactly to put it? and how do i know it works?

Admin said...

Anonymous, I put the code right before the </head> tag. After adding the code, save your template.

To know if it's working, do a test post on your blog. In the content, put in "/h i h i", "/s w e a t", etc (without the quotes and spaces in between) and publish it. You should be able to see the emoticons when you view your published post.

Hope this help.

Anonymous said...

Was wondering if you could explain how to add more characters like for instance, ^^
I understood the text part on the js file but not the ones with ")", ";", "*", "^", etc.
Care to explain a bit? :)
thx for the tutorial btw! sweet!

Anonymous said...

thanks ;)

Anonymous said...

I've try it. Not working /wahaha

Sekar said...

Yeah, I tried too...

It works once, but at the other time, it doesn't work anymore... /no

Why??

Ademog said...

nice one

i ussualy use html code to insert the onion emoticon, but thx to you its easier

Anonymous said...

/please

netty said...

Thank you very much for the Emoticons for my blogs. I have been looking so long and this time it worked perfectly. You are great. :))

Anonymous said...

I use Yahoo messenger and have never seen MSN emoticons before - these are cute ones!!! Laughing cat is awesome:)

closer to; said...

I was wondering if you can just screeshot of the codes so I can see it just to know how to do it? I hope that isn't a lot of trouble, but I'm a bit confuse

Thank you for sharing!

Anonymous said...

nice one dude thanks!

Honeywfb said...

thank you!! thank you!! thank you!! :* >:D<

Kaber Vasuki said...

Thanks

cajua ajeyin~ said...

nice...it works in my blog..
thanx a lot~

Anonymous said...

It is somewhat slowing down my blog.

Anonymous said...

Wow..

Thanks for Your Stuff !!

go said...

hey guys...chk these out..they're gr8! v gud fun
http://www.specials.msn.co.in/chataddiction/sunsilkgog.html

Tipsy Tricks said...

hello! thanks for the tutorial ;)).It works!

Chrystal Ocean said...

Will it work on comments? Have been trying it and nothing. Doesn't work in posts either.

Anonymous said...

do u hav others onions emoticons? I need more... thanks

Dragos F. said...

thx for this man...really apreciated:) it's on my blog now...very funny, very "lively". my blog gets more life this way xD, cheers from romania

Registry repair software said...

Thanks a lot for this, great emoticons which really do liven up the page.

Tom Walsh.

S. Alistair Douglas said...

this doesnt work on comments does it?

closer to; said...

I was trying to get the emoticons on the post, I did what you said to do, but nothing happened... I wanted to know how was it suppose to look like? How are you suppose to input the codes to have the emoticons I want?

http://img20.imageshack.us/img20/6458/emots.png

Is that how it suppose to look like?

Sugi said...

the emoticons didn't show up too.
i think perhaps the problem is in the javascript file.
why ? because when i copied all script into script /script tag in my code then i was unabled to save my template, it says that problem in xml format or ..blabla...
my blog is : http://ganeroblog.blogspot.com
what is the solution now ?
thankx

Taylor said...

um the emotes wont show o nmy blog and i did what was said D:

NoLimits said...

yep, it's fun but it also destroys my word links :(
this is how it looks now: " http://noreallimits.blogspot.com/%3Cimg%20style='border:%200;%20padding:0'%20%20src='http://farm1.static.flickr.com/166/409434720_46d32dda83_o.gif'/%3Ereallimits.blogspot.com/2009/06/earthlings-sau-placerea-de-trai.html "

in place of " http://noreallimits.blogspot.com/2009/06/earthlings-sau-placerea-de-trai.html "
(non English pages)

so, it results a combination of my address and a MSN icon: " http://farm1.static.flickr.com/166/409434720_46d32dda83_o.gif "

I shall disable this code 'till I find another solution :(

sharil sulaiman said...

/ X D

ridwan said...

whew...
thank...
how to make that script ???
may i know ??

quangtrung1789 said...

thanks for your share :)
it's good.

web tasarımı said...

I love the smileys..Especially the "sweat" one..So cute!

Anonymous said...

Thank You so much. I have been searching for emoticons for ... oh since I signed up a few days ago. I hope you don't mind but i linked this on my page because I want to spread the love. /bye

http://livinghaunted.blogspot.com/

Googer said...

This works well but executes very slowly as written, freezing the user's browser for larger pages when the page loads. I took a quick stab at optimizing the addSmiley function and simply avoided all the innerHTML assignments by nesting the .replace calls one within another. At least on FF 3.5, this executes far more quickly. I don't intend on leaving it there for all eternity but you can grab the rewritten version here.

ZaaRz said...

Why it doesnt work on my blog ? isk~

T-T

Mary said...
This comment has been removed by the author.
Love2cook Malaysia said...

Great emoticons! My blog looks better with them! Tks alot! Cheers ;)

Golf Reviews said...

I think this is a great way to add a lot of character to your page. It's always fun to be blogging and make a weird face (via characters) and have it turn into an emoticon. I likes! Great Post!

Unknown said...

not working

/ o m g

RR said...

it's not working... help!
i've put it before the "/ h e a d" tag, but nothing shows up when I type / n o...
help...
my blog is antiglobalwarmingheroes.blogspot.com

DDN said...

thx bro nice tips

Unknown said...

Works well :D

Anonymous said...

I put it up...but not sure if it's going to work...
I'm after those adorable msn ones. haha.

will they show up as emoticons in the post editor or do i have to wait until the blog post is actually published on my blog to see them?

drop me an e-mail. it's on my profile.

Anonymous said...

I need help i can't seem to use icons in my blog /floor

Love2cook Malaysia said...

Hi there...those smileys r working fine on my blog.
But, I have another prob..my blog hangs awhile when I wanna open it. Is it due to the script loading?
My frens finds it difficult to access my blog due to the hang. Any solutions? Tks in advance. ;)

Sylvia said...

These are seriously too cool! I started using them and it has really spiffed up my blog. LOOOVE THEM! Thanks for the post!

Cigar Reviews

Nik said...

cool

Anonymous said...

i added the script but my blog stops from loading with the script pasted.

rily said...

I've used this script for along time now, yet i've never said thank you. So here i am, saying Thank you very much for this small & powerful script :)

Best Vista Registry Cleaners said...

Hey thanks a lot for these!!!

MyLifeMyWorld said...

Thanks so much for this, I'm a total newbie to html codes and your instructions were so clear even I can do it. I have smilies all over my blog now and it's got personality!!

Thank you!

Ari Sulistiono said...

/ wa ha ha

Bea said...

Thank you so much! I just added it and it worked - quickly, easily. Thank you! :)

Evilbou De Vebio said...

ow yeah bro thx man

Catania said...

Luv it! you make my blog real cool :D

J said...

Thank you very much!

Diah Alsa said...

thanks for the info.. :)

grapefruits said...

does it work for wordpress too?

Annael said...
This comment has been removed by the author.
Sapi Says said...

very very great, thanx for this mate

Rock said...

Nice... Thanks for share...

Andrei Dmny said...

Many thanks !

Adrian said...

What a nice emoticons. I wonder how to make that on javascript. Personally, I need some usefull emoticons for my blog.

Justine said...

This is a very old post, but I give it a go anyway.
I tried adding the code to my HTML, and it works, BUT, every emoticon takes in an entire line now.

So if my original post is
"haha this is funny :) watch this"

then it becomes:
"haha this is funny
:)
watch this"

Do you understand what I mean? Any ideas how to get rid of it?

Shino-d.A said...

thanks for posting this stuff.. it really help me a lot, ^_^
i've been lookin somthin like this, (with non-complex explanation)
do u have another smiley??

Unknown said...

i added it ..thanks .... :D !

Honeybun said...

Great tutorial, Thanks!

Aila Frances said...

It doesnt work i put /wahaha it still doesnt work

namz said...

i want to thank you 'cause of your amazing emoticons...i just followed the instructions and pooof! made it! now my posts are so cute because of those emoticons..♥

Unknown said...

i don't understand......
please help me.......

Anonymous said...

i don't understand......
please help me....

Anonymous said...

i don't understand......
please help me....

Anonymous said...

< i don't understand >
< please help me >

Habibi said...

By using emoticons, writers can easily let their visitors know the expression of something.
It's more than words.

Nina said...

awwwwww...it is very nice, thanks!!

porn said...

Great Share! You made some decent points there. I looked on the internet for the issue and found most individuals will go along with with your website.

Free Porn Video
Free Porn Video
Free Porn Video

tun_telani said...

OOooo.. that's how it's done!
Thank Youuuuu :D

hassan said...

/nobigdeal

Milque Ho said...

thanks x100000!! love it

RCB said...

Thank you VERY much! It all looks great!

Claud said...

Coooooooooool!

Iminent Emoticons said...

[iminent=573NYbgUWfOB]
With iminent you can insert emoticons (and more stuff) everywhere.

Para Nasil Kazanilir said...

Your article are very impressive. Thank you so much.

Anonymous said...

Intresting aricles you got here. It will be intresting to find anything more concerning this article. Thank for giving that information. Olia
Kiev escort

Anonymous said...

hey thanks for this lovely idea,,,,i am able to use Emotions tomy blog but i have a question here, can i use the emotions while poting my comments to other blogs which i follow.

Please Answer my query. & give me the solution.

Jana said...

Thank you!It gives my blog fun! :)

Arie said...

great.... i like it

Anonymous said...

It worked NATURALLY for me /XD

Free Chat Rooms said...

I love those emoticons, since we cant really convey the emotions we feel when we are online chatting or what not, emoticons really do a good job at helping transmit how we feel.

driver updates said...

Great list!! Thanks so much for posting these. Bookmarking for future reference :)

Huini said...

OMG!!! this really helpful!!! i was headache for this already around 1 month! because before this i used and worked too!! but one day, there was no more smiley!! i thought it was my HTML or template problem.. and i even created another new blog to get an original HTML! may be which i found the code is wrong! arhh! finally i found it again!! thank you thank you and thank God!!! :x

 
Copyright © 2007 Cool Stuff | Privacy Policy