Have you ever wondered about how to add Smileys/Chat Emoticons on your Blog posts/Comments sections?. The use of Smileys/ Chat emoticons alongside comments on social media platforms adds more fun and color as well as increases the level of social interactions among users! Smileys and Chat Emoticons have a way of helping users express their emotions without having to use much texts and comments.

Whenever a user leaves a comment on your site, it’s difficult to know the mood of that person when he or she posted that comment, you wouldn’t have any idea about their feelings. However, if Chat Emoticons/Smileys are available on your comment system, every user will be able to choose a Particular Smiley/Chat Emoticon that shows their exact mood at that point in time, either Angry, Happy, or Confused.

Also Read:How To Add Post Breaks on Blog Posts

how to add smileys

Most Leading social media platforms, now have Chat Emoticons/Smileys added to their comment sections, just so you know, same thing can be applied to your blogger blog as well. However, today in this article, I will guide you on how to add Chat emoticons/Smileys in the comment section of your blogger blogs.

GUIDELINES ON HOW TO ADD CHAT EMOTICONS/SMILEYS 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 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 wonderful smileys on your blog.

Source:http://adielem.com/2016/05/05/add-smileyschat-emoticons-blog/