Jul 20, 2015

Add Chat Emoticons in Blogger Comments

data:blog.title
Emoticons 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. Though is pity it is not provided by default in blogger. But sure we can easily add this emoticons plugin in blogger commenting system. I have made this plugin very interesting and easy to use.

We have also share some articles on template customization. If you want to read then click on below links.
  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

Why to Add Chat Emoticon in Blogger?

Emoticons are the combination of the word "emotion " and " icon " which means the icon that is used to express the emotions and " icon " which means the icon that is used to express the emotions of a written statement, and it helps to change and improve the interpretation of the text. 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 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='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><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='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.netoopsblog.com' >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>
 </b:if>

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.

Conclusion:

So above guide is about  How to Add Chat Emoticons in Blogger Comments? We hope this post 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. If you like this post then don't forget to share it with your friends. Thanks!

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.