Dec 3, 2015

How To Add Emoticons (Smileys) in Blogger Comments

data:blog.title
Emoticons or Smileys can be really useful to express your comment more effectively. This also make your blog stand out and encourages your readers to comments on your article. Emoticons/Smileys are so popular among teens and kids to start a conversations on social media networking sites like Facebook. Recently, one of our user asked us that how to add chat emoticons in blogger comments? Today in this article, we will show you how to add chat emoticons in blogger comments.



In previous we have shared some more articles on blogger commenting system. Have a look on these articles -
  1. Add Different Background For Author Comments in Blogger
  2. How To Add Admin Ribbon in Blogger Comments
  3. How To Add Numbering System to Threaded Comments in Blogger
Add Chat Emoticons or Smileys in Blogger Comments

Why To Add Chat Emoticons in Blogger?

In one word - Action speaks louder than words.
Chat emotions are a way to show your mood. Whenever a user leaves a comment on your site, you don’t have any idea about how he is feeling. However, if the same comment has a Angry, happy, or confused emotion image then you can easily understand that mood of the commentator. This is the reason why, a lot of commenting systems are adding emotions to there platform. And the same thing can be added to Blogger custom commenting system as well.

How To Add Emoticons/Smileys in Blogger Comments?

So if you like the way these emoticons are displayed you can easily add them inside your blogger comments check below steps.

Step 1 - Open Blogger > Template > Edit HTML.
Step 2 - Press CTRL+F and search for ]]></b:skin> tag and paste below code just above of this tag.
.MBGcsmly {
    background: none repeat scroll 0 0 #EFF5FB !important;
    border: 1px dashed green !important;
    font-size: medium !important;
    padding: 5px !important;
    text-align: left !important;
    font-weight:bold !important;
    width:100% !important;
}
img.MBGsmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}
Step 3 - Now search for below tags. 
<b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
Step 4 - Now add bellow code in between above two tags.
<div class='MBGcsmly'>
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :( (
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :) )
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :) ]
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='MBGsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='MBGsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
<a href='http://www.mybloggerguides.com' target='_blank'>
<img border='0' src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TBx__8vPtdI/AAAAAAAAAHM/DJscmXS8XFg/trans.gif'/></a>
</div>

Step 5 - That's it now just Save your Template see these awesome emoticons blossom in your blogger commenting stream.

Conclusion:

So above guide is about How To Add Emoticons (Smileys) in Blogger Comments? I hope by this complete guide you can easily add chat emoticons/smileys to blogger comments. If anyhow problem persist after following all steps carefully then drop a comment below. We will help you out of sure. So guys now your readers can easily express there mood by just choosing a nice emoticon and then adding it into the comments. Don't forget to give feedback. Do share on Blogging Communities.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.