Add Smileys And Emoticons To Blogger Comments




| 28 comments

Smileys For Blogger Comments
We are always looking for ways to make the Blogger comment section more interactive and in this post we will see how to allow readers to add Smileys and Emoticons to the comments they write.When you add the smiley option to your comments readers will see a selection of smileys they can use when commenting.A selection of available smileys and emoticons will be placed above the comment form for readers to pick from.This will help increase the number of comments you get and be a cool addition to the look of your comment section.In all there are 23 smileys and emoticons that can be added to the Blogger comments with lots of animated smileys available.

Check out a working demo here - Smileys And Emoticons Demo

To add the smileys option to your comments you must add two extra pieces of code to your template, so make sure to Back up your template first and with that done lets get started.

Add Smileys And Emoticons To Blogger Comments

Step 1. First we add the script that will allow the smileys to be displayed in the comment body.

In your Blogger dashboard Click 'Layout' > 'Edit Html' > Tick The 'Expand Widget Templates' Box


Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</body>

Step 3. Now copy the following code and pate it Directly Before / Above </body>

<script src='http://spiceupyourblogextras.googlecode.com/files/commentsmilys.js' type='text/javascript'/>

Step 4. Now we add the smiley images and options above the comment form.

Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)
Note - We are looking for a section of code this time so i suggest looking for the second piece highlighted in red and locate the rest of the code from there.

<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 5. Once you have located that section of code in your template replace it with this code :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><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>To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:<br/>
<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'/> =)) <a href='http://www.spiceupyourblog.com/2010/10/smileys-emoticons-blogger-comments-form.html'><small>Grab Smily Gadget</small></a>
</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>

With everything in place you can save your template and your smileys and emoticons will be ready to be added to comments on your blog ! You can find more tips to Spice up your Blogger Comments Here, Drop a comment below with your opinions or to seek more help..Enjoy !


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

28 comments:

  1. Thanks you paul, thank you very much.

    ReplyDelete
  2. Thanks Paul !

    I have a little problem... I see the smiley box on my comment form but when people try to insert a character, it appears always as "character", not a smiley

    Can you please help me to solve this problem ???

    Happy Christmas !

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. @ The Angulo's - Your code did not display you must parse code it to display in comments.The section of code should be in all templates.

    ReplyDelete
  5. I did everything you said on this post but when i click publish, i get this message...

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "
    ".

    ReplyDelete
  6. @ Julie - I looked over the code again and cant see any problems.Try again and make sure you get all the code in the right places.

    ReplyDelete
  7. I LOVE SMILEYs & they work great on my blog... I wondered where everyone was getting their Smileys & I just happened to run across this site... thanks so much!

    PS I also added the Reply button... so cool! Ya'll ROCK! =)

    ReplyDelete
  8. Did everything as you said, but still doesn't work on my testblog.

    ReplyDelete
  9. YESS I did it, finally it works :)

    ReplyDelete
  10. couldnt find the step 4 stuff in my html code ... its just not there , help !!!

    ReplyDelete
  11. @ Dietitian - Did you thiks the expand widget templates box ?

    ReplyDelete
  12. Hai Paul,

    I've managed to install an emoticon on my blog, but the problem when I tried to post comment on the comments, emoticons do not shows up only those symbols..

    Kindly do help me how to fixed this problem..:(

    ReplyDelete
  13. Same problem as Tania's..
    Not working!!!

    I checked your JS!! And the link is broken!! Please fix it!! :)

    ReplyDelete
  14. This is a great post, but I have one problem. When others use the emoticons it works fine, but when I try to use one in reply to someone it won't work. Also, is there a place to get different emoticons that will work for this? Thanks.

    ReplyDelete
  15. It didn't work for me. I reverted the code back to the way it was before I started the modification.

    When I modded the code the smiley list showed up etc, but when adding :) or :D the smiley didn't show up only the text. I will try again later. I must have messed up somewhere.

    ReplyDelete
  16. I tried this out and it worked! But when I looked at it, I didn't really like it and wanted to remove the feature. The thing is, I don't really know how to do that. I tried just deleting the long code and inserting the one above it but there was some sort of error. And I tried just deleting the code and not replacing it with something but they won't allow it. So could you please just give me a code that I could put in place of the long one?

    ReplyDelete
  17. Can you fix for new Blogger comment type?! thanks

    ReplyDelete
  18. Thanks..
    But i dont find the second code

    ReplyDelete
  19. hi,
    why can't I find this code:

    I can't find it, so I cannot apply the second step!! What shall I do??

    ReplyDelete
  20. I mean this code in the red:

    I can't find it in my blog!

    ReplyDelete
  21. I was able to put the code in but in my Compose editor, I don't have a smiley option.

    ReplyDelete
  22. Oops; never mind! I see it had worked.

    ReplyDelete
  23. thank you very much buddy..its working for me.

    ReplyDelete
  24. Hi Paul, I can successfully complete the first step; however, when I look up the code in red, I have something different in my code. I have tried to insert the second part of the code several different ways with not luck.

    This is the code I have when I search for the second part. What part of the code do I need to replace?

    p class='comment-footer'











    Thank you,

    Michelle
    Visit My Blog
    Email The 3AM Teacher
    Visit My FB Page

    ReplyDelete
  25. and why your site address is there,its not that i should replace with mine?

    ReplyDelete
  26. Thank's to Share.. it's working in my blog..

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us