How To Add Chat Emoji In Blogger Comments?

The Whatsapp/Messenger/Skype is the top chat platform that enables friends and family to communicate and also it has been on of the best. Adding emoji and smileys on blogger posts is one of the best feature that every entertainment blogger need to add to their blog to enable their visitors have more fun and get attracted to your blog.

This smileys/emotions are very powerful emotions to express our feelings. We know even Google uses the same pattern, they are using this flat smileys in their chats. Let’s see how to add smileys/emotion on your blog.

Now there are many snippet available online or on many others Blog and website but every one is not able to optimize your blog or website so your need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1.) No JQuery File Added.
2.) JavaScript File Added.
3.) No Extra CSS Added.
4.) Simple And Fast Loading Flash Files.
5.) Can Work With Any Browser.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now “Copy” The Below CSS/JavaScript And “Paste” It Before Upper Code.

<style type='text/css'>
.post-body img.noops-smly {
padding: 0 !important;
margin-top: -2px !important;
}
</style>
<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/>
<script type='text/javascript'>//bloggersmileys.init();</script>

8.) Again Press [CTRL+F] To Search <div class='post-footer-line post-footer-line-3'> Code.
9.) Now Look For </b:includable> And Then “Copy” The Below Code And “Paste” It Before Upper Code.

<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'/>
<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>

10.) Click “Save Template” And Done.

Customization:

Edit your CSS if you are a pro and want more customization.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article.