Smileys say more than just words. You might have seen smileys in comments of WordPress blogs, but this feature is not available in blogger blogs by default. Luckily here is a hack to add yahoo smileys to comments in blogger blogs.

In order to get yahoo smileys for your blog, you must have inline comments form in your blog.
How to add smileys to Blogger Comments?
Follow these simple steps given below to add yahoo smileys to your blogger blog.
Step 1: Go to Layout -> Edit HTML -> Expand Widgets
Step 2: Find the following code (Press Ctrl+F to find) :
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <h3><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a></h3> </b:if> </b:if> </p> </b:if>
Step 3: Now replace the above code with the code given below :
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <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'/>
<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'/>
<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> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if>
Step 4: Now find the </body> tag and paste the following script just before it :
<script src='http://bandofgirls.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Widgets</a></noscript>
Step 5: That’s all. Now save your template and from now onwards you can use smileys in your blogger comments and enjoy.
Thanks to Anshul for this useful hack.
Also Read : How To Add Save As PDF Button To Blogger Blog
Simrandeep Singh is the Editor-in-chief of TricksDaddy and a blogger from Chandigarh (India).
He loves to write about WordPress, Freewares, Mobile Phones and Blogging Tips. Apart from Blogging, he loves travelling, photgraphy and cooking.
{ 17 comments… read them below or add one }
Testing smiley …. if you have applied it in your blog atleast… lol
I applied it to my other blog… will apply to this later
@ Anonymous
Added smileys script.. You can check it
lemme test this one !!
)
:z
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif
Hmm pretty interesting, I have added it to my posts now I wil try to add it to my comments area.
Keep up the good work!
Sincerely,
A blog of 17 O Level friends
http://qiyamah1.blogspot.com
@ Mohammad Mustafa Ahmedzai
thanks and keep visiting
Nice hack man !
!!
works with firefox but with IE NO
thanks for the great posts.
I twisted the idea a bit and created a smiley comment form that work in IE6. Take a look.
http://chiwawah.blogspot.com/2010/01/add-smiley-emoticons-in-blogger.html
NOT working on my blog
what if i don’t have that specific code. I am using the blog template minima and can’t find it. Any ideas? please help
Hi, i just created new smiley code for blogger comment. It do relly work!..
it has more than 1000+ smiley to be used!..
yeah!..
it simple hack.
feel free to use this 2010 smiley hack? visit here.
http://akunabel.blogspot.com/2010/03/add-1000-smiley-emoticon-in-blogger.html
why mine isn’t working…i followed the steps correctly but it didn’t show up a smiley icon.
could u help me please??
.-= gryphon14´s last blog ..18 to Life S01E08 (2010) =-.