Why To Add Chat Emotions 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 Emotions In Blogger ?
First of all, Sign in to Blogger and then select your Blog.
After that, you need to click on Template from the left side bar and 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. Once 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's it, after adding the above link emotions can be used in comments. However, if you want to display emotions 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 == "item"'>
<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 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.
EmoticonEmoticon