Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form

If you have already enabled the comment-form feature in your blog*spot blog, then it would be better to add a list of smilies too, which can be used by the readers while commenting.

The comment-form with smileys, will look like this:

Or you can see it in action [and leave a smiley-comment too], at the bottom of this post !

To add these smileys, follow these steps:

STEP #1
First log in to Blogger
Then go to Layout -> click on "Edit HTML" tab, and click on "Expand Widget Templates" tick-box.

Now find this code :
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Now right IN-BETWEEN those two lines, add all these lines:
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

STEP #2

Now find this code in the template:
</body>

And just BEFORE it, add this line:
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js' type='text/javascript'/><noscript><a href="http://bloggerstop.net" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Finally save the template.

OPTIONAL WORK:
Although the required javascript file has already been uploaded and linked by me in the code above (in RED), but as a backup, download and save this file on your PC:
Download this File:

Smiley.js ( As a zipped file )

And upload the file (smiley.js) to OpenDrive

Then copy the DIRECT LINK (streaming):


And you may use this direct-link instead of the one used in the code above.

That's it !
Now you can see smileys below your posts...
Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »

550 comments

Write comments «Oldest   ‹Older   401 – 550 of 550   Newer›   Newest»
Anonymous
July 02, 2010 3:16 AM delete

Hello sai,

i have tried your emoticons hack but it is not working on my blog.

www.loveukolkata.blospot.com

please help me out !!!!! :((

Reply
avatar
Anonymous
July 04, 2010 10:36 AM delete

Testing in your blog.. :))

But, it seems not working in my blog,
This is my blog :

the smileys above comment was went well, but the emoticon pictures doesn't change the smilies. i think some code of the javascript should be changed for my blog, since i had followed all of your instruction, but it still doesnt work.

Thx for your help ^^

Reply
avatar
Husz
July 04, 2010 4:48 PM delete

trying this :D is it work? :-/

Reply
avatar
Cik Siti
July 04, 2010 11:31 PM delete

it works!! yahoo!! thank you! :))

Reply
avatar
Anonymous
July 19, 2010 12:36 PM delete

cooooooooool!

Reply
avatar
Zaffi Zuhri
July 24, 2010 11:58 AM delete

Hi Divya, It's me again, Zaffi :)
I've try this code, but it seems like it is not working... I don't know why...
Can you check it out...Thanks!
http://iebol12.blogspot.com

Reply
avatar
Sai - Blogger Widgets
July 24, 2010 12:11 PM delete

Hi Zaffi,

I checked your blog, the widget is working...here's the screenshot:
http://imgur.com/THe9A.png

Enable Comment-form in your blog and then show those icons (STEP #1) above that form.

Reply
avatar
Zaffi Zuhri
July 26, 2010 11:20 AM delete

Hi there, I need your assistant :)
I successfully added the smiley emoticons to my blogspot, but I dont know why I have to form of Post Comment :((
Here is the link : http://iebol12.blogspot.com/2010/07/two-years.html#comments

Please help yeah, thank you ;)

Reply
avatar
Divya Sai
July 26, 2010 12:59 PM delete

Although I'm not sure, but go back to that tutorial again and UNDO step #9 from that post (that means delete that code from your template), and save the template.

Reply
avatar
Zaffi Zuhri
July 26, 2010 8:08 PM delete

Thank you so much Divya!!!! I did it :D

Reply
avatar
Anonymous
July 31, 2010 3:19 PM delete

:))Just want to say what a brilliant site I am learning so much from here

Reply
avatar
Riyas - freebie4 india
August 02, 2010 8:36 AM delete

I added it. But not working . Pls help

Reply
avatar
Amanda American Girl
August 02, 2010 2:36 PM delete

:)) testing thanks for the tutorial

Reply
avatar
Riyas -freebie4india
August 02, 2010 3:43 PM delete

Its still nt working. U can see ur comment in my blog

Reply
avatar
Yipi
August 03, 2010 1:48 PM delete

use one image sprite maybe better then a lot small graphics found a wordpress plugin called Speedy Smilies but how to convert it to blogger?

Reply
avatar
Anonymous
August 05, 2010 4:18 AM delete

Hi,
I like your post and i also publish your tutorial on my blog. But there is a problem, before this im using community template by Bie and this yahoo emo work on my blog.
I changed with new template n find out this yahoo emo no longer work... I've try to follow ur tutorial once again but its still not working. This my blog add: http:www.lunduzextreme.net
Can you help me please??? :((
*Sorry for my bad english.;)

Reply
avatar
Sai - Blogger Help
August 05, 2010 11:01 AM delete

Hi Maey,

you have to edit the file "smiley.js" and then upload it to www.mdn.fm
Then change the link in the code with the DIRECT LINK to the file from mdn.fm

Edit it like this:
change this:
comment-body

with this:
commenttext

and this:
owner-Body

with this:
commenttext-admin

Reply
avatar
Admin
August 05, 2010 3:41 PM delete This comment has been removed by the author.
avatar
indi manthan
August 05, 2010 6:13 PM delete This comment has been removed by the author.
avatar
ReyLia
August 05, 2010 9:28 PM delete This comment has been removed by the author.
avatar
Unknown
August 07, 2010 3:17 AM delete This comment has been removed by the author.
avatar
Unknown
August 07, 2010 3:31 AM delete

Hi there,
I need your help
I successfully added the smiley emoticons to my blogspot, but I dont know how to make it horizontal ..:(

http://gurlalush.blogspot.com

Reply
avatar
Unknown
August 07, 2010 4:09 AM delete

hmm how about if i want to add more smiley ,what should i do to make it working?

Reply
avatar
nedi
August 11, 2010 10:37 PM delete

how....???its not work..~x(

Reply
avatar
mizzOdamm
September 05, 2010 5:42 AM delete

could you please help me I don't know where to put the scripts







/* Posts
----------------------------------------------- */
.post-outer {
padding: 15px 20px;
margin: 0 0 25px;

background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;


border: $(post.border.style) $(post.border.size) $(post.border.color);

-moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
}

h3.post-title {
font: $(post.title.font);
margin: 0;
}

.comments h4 {
font: $(post.title.font);
margin: 1em 0 0;
}

.post-body {
font-size: 105%;
line-height: 1.5;
position: relative;
}

.post-header {
margin: 0 0 1em;

color: $(post.footer.text.color);
}

.post-footer {
margin: 10px 0 0;
padding: 10px 0 0;

color: $(post.footer.text.color);
border-top: dashed 1px $(widget.alternate.text.color);
}

#blog-pager {
font-size: 140%
}

#comments .comment-author {
padding-top: 1.5em;

border-top: dashed 1px $(widget.alternate.text.color);

background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

Reply
avatar
Martine
September 17, 2010 6:13 PM delete

Hello, ist works on my blog www.mama10tje.nl but how do i change the smileys into my own smileys i've got?

Reply
avatar
Tejas R
September 24, 2010 12:26 PM delete

Can rhis option be availed in wordpress.org powered blogs like mine? Please let me know.. I would love to put this on mine... Looks cool actually.

Reply
avatar
Naradakochan
September 26, 2010 9:23 PM delete

Thanks for the information :))

Reply
avatar
Hetty
October 05, 2010 12:35 PM delete

Hi, I can't seem to get it working on my Blog.
Where do I put the code!?

Because I have an additional line between the two codelines you wrote above.
I tried both of the places, above and under the codeline:



But I only see the smiley's above my commentbox.
But in my comments I only see the symbols I used to test the smiley's.

I hope you can help me.

http://verwoertfans.blogspot.com/

Greetz and thank you so, sooooooo much!

Hetty

Reply
avatar
Hetty
October 05, 2010 12:38 PM delete

Seems that my codeline is gone now.
I will axplain a bit.
In it, it states among other words: allowNewComments

I hope you can help me.
Greetz, Hetty

Reply
avatar
Hetty
October 05, 2010 5:07 PM delete

I am so sorry to disturb again.
But I tested in Firefox, and that works fine.
It's just that I work in IE 8, and there I can't see the smiley's I type :(

Can you give me directions in how I may make it work?
Because I do see them on this Blog.
But just not on mine :((

Thanks a million!

Greetz, Hetty

Reply
avatar
.:|kamaryeah|:.
October 06, 2010 6:32 AM delete

b-(
thanks for sharing....
really loved if you could come to my blog and comment on improvements...

Reply
avatar
bt4u
October 16, 2010 4:52 AM delete

This is new Facemoods Emoticons For Blogger Comments
check it

http://bloggertricksandtoolz.blogspot.com/2010/10/how-to-add-facemoods-emoticons-for.html

Thanks

Reply
avatar
MissionGMAT
October 20, 2010 7:34 PM delete

Thanks a lot Divya for sharing this :)

Reply
avatar
Anonymous
October 21, 2010 7:43 AM delete

how to add emoticon in my comment with a simple click, not with copy/paste :-/

Reply
avatar
Anonymous
November 02, 2010 4:09 AM delete

test now :)) he he

Reply
avatar
Anonymous
November 08, 2010 3:37 AM delete

thanks man...at first it didnt work, after read the previous comment then i find the solution...yeahhh i really like it...now im looking for adding onion head emo on blogger comment..i so thankful if u can post tutorial about it... :))

Reply
avatar
Orange
November 17, 2010 6:03 AM delete

I am testing..:p
hmm..is it working?... :-/

Reply
avatar
Khairul
November 27, 2010 6:03 AM delete

hai.. i've try this tutorial.. but when i type the smiley code, they just symbol appeared .. :( do you have any solution?

Reply
avatar
Sara Yasmine
December 04, 2010 2:22 AM delete

HI, can you see my little problem

http://naruto-ohayo.blogspot.com/

WHY ITS NOT IN THE COMMENT ??

Reply
avatar
Sara Yasmine
December 04, 2010 2:36 AM delete

This TUTORIAL is to Template only :((

in blog is Blog SKIN~~=((
Where should i place smiley below??


[td width="515" id="main"]
[Blogger]
[div class="subject"][$BlogItemTitle$][/BlogItemTitle$][/div]

Sharing is caring :)

Reply
avatar
lowgen
December 04, 2010 6:48 AM delete

help me, I have read your instruction, and of course I have read the comments, but my template is too strange, please help me.....


www.lowgen.co.cc

Reply
avatar
saljihitam
December 04, 2010 8:46 AM delete

it's really working ! i love it. but I would like to ask.

It is not working with pop up comment setting. what should I do if I want the smiley in the pop up ?

thanks a lot :X

Reply
avatar
Priti
December 07, 2010 2:59 AM delete

:X b-( :D i like it thanks lot sai

Reply
avatar
Derrick Brother
December 09, 2010 11:33 PM delete

Hey Divya Sai, I kinda of am facing some problems...I added it..for other users, it works fine...but when I am responding to comment as a admin, it doesn't show the emotions...

can you take a look at this page..http://ourworldupdates4u.blogspot.com/2010/12/latest-updates.html

& tell me why its not showing up for me :) thnx!

Reply
avatar
hary_septi
December 16, 2010 4:19 AM delete

;)) tanks....it's work in my blog..!!!
http://emotionmyself.blogspot.com/

Reply
avatar
Anonymous
December 16, 2010 11:30 AM delete

Worked for me, thanks!

But, where would I need to insert this code so that I could put the emoticons in my actual blog post? (not the comment form)


thanks

Reply
avatar
Sherman Unkefer
December 23, 2010 9:23 AM delete

Great info! I love smileys! cool trick, just tried, and works perfectly fine! :)

Reply
avatar
Deepika Vasudeva
December 29, 2010 11:02 AM delete

this is what i find.. not what u said...
help me plz

Reply
avatar
Sai - BloggerStop.Net
December 29, 2010 1:11 PM delete

</body> has to be there in every template. BTW I have checked your template too.

PS: It will be SECOND LAST LINE of code of your template.....just drag the scrollbar to the bottom - the scroll bar of the html code box.

Reply
avatar
Deepika Vasudeva
December 30, 2010 1:57 AM delete

yupp [body] wala mil gya.... but i still can't find the [b:if cond='data:post.embedCommentForm'] :(

Reply
avatar
Sai - Blogger Widgets
December 30, 2010 1:59 AM delete

click on "Expand Widget Templates" tick-box, and you'll find that one too.

Reply
avatar
Deepika Vasudeva
December 30, 2010 2:05 AM delete

omg... i could do it... thanku sooo much.. its working :D

Reply
avatar
MEDIAPLUS
January 19, 2011 7:25 PM delete

Why my blog can't convert the code into emoticon ... ~x( please help me .. http://teroponginternet.blogspot.com

Reply
avatar
Isabela
January 25, 2011 11:36 AM delete

Thank you...
Only a test...;)) :)

Reply
avatar
Unknown
February 01, 2011 9:27 AM delete

nice, but i just installed a comment widget that doesn't support emoticons ~x(

Reply
avatar
Janet Gomez
February 26, 2011 4:27 AM delete

Hello Sai,
Smilies not working On my Blog :(
On My Blog im using some prototypes for LightBox,
if thats the case please tell me
My Blog Address

http://xnys.blogspot.com

Reply
avatar
Vijay
March 06, 2011 10:43 PM delete

this is not working on my blog...

first of all the smiley are not shown in a proper order..
secondly, text doesn't change into smiley...

could you sort it out...

Thanks...

Reply
avatar
iroelst
March 22, 2011 1:27 PM delete

why doesn't it work in my blog? only text, smiley can't showing

Reply
avatar
Anonymous
March 29, 2011 2:03 PM delete

Here is a test: :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Reply
avatar
Anonymous
April 11, 2011 10:16 AM delete

Thank you! :D

Reply
avatar
☆Shahi-chan~★
April 16, 2011 9:27 PM delete

hello,, that is really helpful and great explaining it ^^
but i wanted to change the img of the icons,i wanted to use my own emotion icons,, how can i do that, coz i tried replacing the link and the simple to make it easier for me but it didn't work !!
what should i do ? O3O

Reply
avatar
Anonymous
April 17, 2011 8:07 AM delete

:)) ok i will try it!,.

Reply
avatar
admin jhenny
April 24, 2011 6:31 AM delete

its not working on me sai :(

Reply
avatar
Anonymous
May 20, 2011 1:39 PM delete

http://us.i1.yimg.com/us.yimg.com/http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gifi/mesg/emoticons7/104.gif

Reply
avatar
Unknown
May 26, 2011 5:37 PM delete

this nite, i've start to use it for my blog :X check it...

very thanks :-*

Reply
avatar
shan
June 20, 2011 7:54 AM delete

Please help me out,
I have done as stated above but smileys are not coming in posts after writing the code in front of it.
my blog is
www.satisfyingreviews.blogspot.com

Reply
avatar
M Sayib
June 20, 2011 8:14 AM delete

Thank You,it's Work To Me..
http://sayibroziq.blogspot.com/
:) :D =) :p

Reply
avatar
Anonymous
June 30, 2011 10:43 PM delete

:(
checking why if does not works on my blog and its working on your blog :(

Reply
avatar
sahil
June 30, 2011 11:47 PM delete

hi , i am sahil. i am confused in b/w two things...

where ACTUALLY should i put smiley code ?

after that data:postCommentMsg bla bla h4

or in b/w
b : if cond='data : post.embedCommentForm
b : include data='post' name='comment-form


(sorry tags not allowed here)
??? please if u can. visit my blog and consider it. please.. smiles are there but when someone write :( .. it shows :( instead of smiley..what went wrong ? pleaaassee help me.

Reply
avatar
Anonymous
July 01, 2011 12:07 AM delete

ok ok i got it.. its done. thank u.. i had to follow same steps... just the prob was i was skipping (in copy) < script > tags :D its working.. thanks a lot :D :-*

Reply
avatar
Jan Plähn
August 10, 2011 5:28 AM delete

:)) ;)) ;;) :D :-L =)) x( :-* :-/

Reply
avatar
Anonymous
August 19, 2011 9:39 AM delete

:) Thank You - yours icons is the best :)

Reply
avatar
Anonymous
August 19, 2011 9:42 AM delete

:) Thank You!

Reply
avatar
Anonymous
September 12, 2011 6:17 PM delete

Wow, cool trick, just put it, tried, and working perfectly fine

One question: Do you know how to make the icons clickable so when clicked they write the code direcly in the comment form ? Liekin some vBulletin forums..

If you dont have it, I dont care, you done enought with this trick XD

Reply
avatar
Phinuss
October 27, 2011 4:54 AM delete

not work on my blog.... :-/

Reply
avatar
Anonymous
November 14, 2011 5:05 AM delete

http://us.i1.yimg.com/us.yimg.comhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif/i/mesg/emoticons7/35.gif

Reply
avatar
bugserm
December 23, 2011 9:59 AM delete

Hi i,ve followed your instructions & paste the code at my html template but it didnt work..
Then I tried adding the 1st code according your 1st step after this line

h4 id='comment-post-message'></h4

and followed your 2nd step.
The emoticon box appears right above the comment box. When i type :) the emoticon in the comment box doesnt appear. Any suggestion?

Reply
avatar
Babbu Singh
December 24, 2011 4:45 AM delete

thx dude its working fine .... thx u very much :)

Reply
avatar
Phlashback
June 20, 2012 11:51 PM delete

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) testing

Reply
avatar
jamesmitges
July 02, 2012 3:45 AM delete

hahah nice Spammer of the month :D

Reply
avatar
Niele
August 01, 2012 10:01 PM delete

:)) Trying as well

Reply
avatar
Pranjal.
August 15, 2012 6:57 AM delete

Hi sai

I am a newbie wanted to make my Blog lively & your Post Helped too ........Thank you :) BUt i need your help dear. in my blog Smiley counter is visible immidiately adter the post :( how can i make it visible like yours Immidiately above comment window???

Pleaseeeeeeeeee Help :)

Reply
avatar
Unknown
August 30, 2012 5:36 PM delete

Let me test it :D :)) :-L

Reply
avatar
dhave Tombeg
September 15, 2012 11:07 PM delete

:))

:|

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif

Reply
avatar
dhave Tombeg
September 15, 2012 11:23 PM delete

hi divya..

i have a problem with your technique. i can see the smiley above my comment box, but i can't see the smiley appear in my post comment, like this = :)

please check what wrong in my blog http://catatan-dahve.co.cc

iam sorry my english not too good :) i hope you can help me to fix my problem.

Reply
avatar
Unknow2012
October 27, 2012 8:58 AM delete

sorry..but i cannot find these world on my blogspot




thanks

Reply
avatar
Dianne Sutton
February 18, 2013 8:45 AM delete

Ahh that did the trick, thanks for your help :)

les mills pump review and ageless male reviews.

Reply
avatar
Sandra D
December 03, 2016 12:41 PM delete

I tried to follow your instructions, but only the text is showing in comments. I tried to send my info to your email address, but it is full. Can you please help me?

www.sexysandrad.com

Reply
avatar
«Oldest   ‹Older   401 – 550 of 550   Newer›   Newest»

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon

Subscribe to: Post Comments (Atom)