How To Add Emoticons (Smileys) in Blogger Comments

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’/> 😀
<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’/> 😡
<img alt=” class=’MBGsmly’ src=’http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif’/> 😛
<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=’https://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.

Contents

Paramjot Singh
 

I’m Paramjot Singh, the creator of mybloggerguides.com. I started this blog back in 2016 to share my real experiences from the world of blogging – the wins, the failures, and everything in between. Originally from India and now living in Australia, I’ve spent years learning how blogging, SEO, and online income actually work in the real world. On My Blogger Guides, I focus on SEO tips, blogging strategies, product reviews, and step-by-step guides for Google’s Blogger platform, so that anyone can start their blogging journey without investing much money. My goal is simple: to make blogging easier, clearer, and more accessible for beginners who want to build something of their own online.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: