How to Add Chat Emoticons in Blogger Comments

Due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. 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.

Why to Add Chat Emoticon in Blogger? 

Action speaks louder than words. Similarly, 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 commenter. 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 Chat Emoticons in Blogger?

First of all, Sign in to Blogger and then select your Blog.

After that, you need to Click on Template From left bar and then Click on Edit HTML.

Now, Press Ctrl+F and then you’ll have search bar and then search for </body> tag using that search bar.  Ones you found the </body> tag, then paste the following code above it.

<script src=''/><script type='text/javascript'>//bloggersmileys.init();</script>

That it, after adding the above link emoticons can be used in comments. However, if you want to display emoticons short codes to help users to use them efficiently in their comments, then continue following the tutorial.

Again in the Template, search for <div class='post-footer-line post-footer-line-3'> then look for </b:includable> tag and just above it paste the following script.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src=''/><a style='display:none;' href='' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Emoticions</div>

After that, you need to add the CSS coding of Smileys in order to make them look as appealing as Whatsapp, facebook or any other popular social platform. Search for ]]></b:skin> tag and paste the following code above it.

.post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;

Afterwards, simply hit the Save Template button and start using those awesome smileys on your blog.

We hope this article have helped you in learning how to add chat emotions in blogger comments. We are sure it would have been proven helpful for you. If you are facing any difficulty while applying this, then lend your queries in the comment box. Any of our team members will get back to your queries.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


July 10, 2015 at 8:23 PM

Can I use these Icons in my Post?

July 14, 2015 at 12:38 AM

yes @Abdullha

January 21, 2016 at 3:48 AM

Help...I tried, it doesn't work =(

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.