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 )

112 comments:

Amaranth said...

Very nice smiles:)Are you curious about it?

Registry Cleaner Reviews said...

Fun! Great ideas

jamaine12 said...

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

RooYo said...

Very nice smiles:)nhie

Chat Free said...

Cool emoticons, thanks!

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

Sriki 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ı

Simple Tips said...

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

myspace graphics 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.

uk online bingo said...

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

online poker site said...

good work techy

erp said...

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

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

tomoko said...

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

tomoko 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~

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

Mark 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!

andutza said...

thanks ;)

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

mogrika said...

nice one

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

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

Lina 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!

acey said...

nice one dude thanks!

angel without wings said...

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

Æ áé âê äë(:My name is griffin:)ëä êâ èà ĔĂ said...

Wow they are : ) )

Kaber said...

Thanks

arisa miyazawa said...

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

Anonymous said...

It is somewhat slowing down my blog.

Komara 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

A Woman's Journey. 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

1ceb0x 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.

Mr. Leon Turpentine 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

ᶊ۴ɸɨɭ ۴ΐᴻﻼ 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 ??

7on7 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 @ Azhar said...

Why it doesnt work on my blog ? isk~

T-T

mary said...
This comment has been removed by the author.
LOVE 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!

albanaT said...

not working

/ o m g

Black Griffin 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

Rakha Kanz Kautsar said...

Works well :D

•¦Amy¦• 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

LOVE 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

jules67 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!!!

Amanda 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_~ said...

ow yeah bro thx man

Cat Gunawan said...

Luv it! you make my blog real cool :D

J said...

Thank you very much!

.:diah:. said...

thanks for the info.. :)

grapefruits said...

does it work for wordpress too?

Sifar Anel said...

:)

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

khaddu 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..♥

basiir aeman 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

Nurul Anissa 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