How to Add Emoticons/Smileys in Blogger Comments?

Add Emoticons and Smileys into Blogger.

Some friends messages to ask about adding smileys into your blog so i decide to create a tutorial about it.
Emoticons/Smileys are an excellent way of making your blog comments more beautiful and fun. "Emoticon" in blog comments will look cool. Blogger not supported smileys but use some javascript & coded and add emoticons/smileys into blogger comments.In all there are 33 smileys and emoticons that can be added to the Blogger comments with various animated smileys available. Also we learn on next tutorial how to add emoticons and smileys into blogger post.

Demo is available on your blog go to comment session and let's see what's look like.

How to Add Emoticons/Smileys into Blogger?
To do this just follow the steps:

1. Go to Blogger Dashboard  >>> Template
2. Please! Download backup of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find </body>
5. Then copy and paste below code above/before it.

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#fff;background-image:-ms-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2 100%);border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ccc;border-right:20px solid transparent;width:0;height:0;line-height:0}</style> <script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]></script><script src='https://dl.dropboxusercontent.com/s/s7x5nalqkatxtlq/bloggerknown-emo.js' type='text/javascript'/></b:if>

Next step to add Jquery into blogger, if you can already add jquery code into blogger then skip this step but if you can't use already then follow below step.

6. Ctrl+F and find </head> and past the below code above it ..

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

7. Save Template.

Now see the results in comments if you have any problem in this code then make comments. Thanks