Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » How To Add Chat Emoji In Blogger Comments?

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.


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
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;
<script src=''/>
<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=''/>
<div align='right' id='close' style='font:bold 13px arial;margin-top:-14px;cursor:pointer;'>Close [x] </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>

10.) Click “Save Template” And Done.


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.

You Like It, Please Share This Recipe With Your Friends Using...

8 Responses to “How To Add Chat Emoji In Blogger Comments?”

  1. Taufeeq Umar says:

    Its really amazing to add Emoji with blogs, great way to define. Thank you very much for sharing with us.

  2. Nice post dear . I like your post thanks for sharing .

  3. Enes says:

    Lol this is what i ve been looking for 1 hour. Thank you very much and it finaly worked 🙂

  4. Sisoft says:

    Thanks for posting this, I looked every where to figure out how to do this. I could not for the life of me solve the issue on getting emojis on my site. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *