How To Add Emoticons/Smileys In Blogger Comments

how to add smileys emoticons in blogger comments

Have you ever visited a blog and you get to see this emoticons just above the comment box and you ever wondered how to do same on your blog.?
Then this post is for you.
Emoticons is used to express your mood. As this gives you the idea if a user feels happy, angry or confused about the article on your blog. Today i will show you how to add emoticons/smileys above comment box on your blog.

How To Add Emoticons/Smileys In Blogger
Login to your blogger dashboard and select the blog which you want to add Emoticons/Smileys and navigate to Template > Edit HTML
Inside the template box press CTRL+F and search for tag using the search bar that will appear at the top right of the template box. Once you found the tag paste the below code just 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>

Then click on "Save Template" and Thats all. Emoticons can now be used in comments.

If you want to display emoticons short codes just above the comment box so users can be able to access them easily then follow the below guide.

Goto Template > Edit HTML and search for

the scrol down till your find and paste the below code just above it.

<b:if cond='data:blog.pageType == "item"'>
<div class='chidismile' id='chidismile' 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='http://www.chiditech.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>

Then you click on "Save Template"

To make it look more appealing just like that of whatsapp, facebook e.t.c you will require some CSS. To do that search for ]]> tag and paste the below code just above it.
.post-body img.chidy-smly {
padding: 0 !important;
margin-top: -2px !important;
}

Just Hit the "Save Template" button and you are done. Now check your blog and click on any post to see those awesome emoticons on your blog.

If this article was helpful, Don't just read alone share with friends. If you have any difficulty implementin this on your blog just let us know through our comment box.