How to Add Smileys Emotion for Blogger Comment to Your Blogspot Blog

Blogger Comment Chatting Emotions : Using Smileys and Emoticons in commenting on Blogger Blogspot blog have become a very popular & very interesting. Emoticons and smileys can be angry, happy, teasing, laughing, crying, smiling etc. So using it in the blog comment can be more enjoyable. Do you want add this features in your blog ? if Yes! Then this tutorial is special for you. Use simple step below :-

Use below steps to add smileys and emoticons to Your Blogspot blog :-

Step 1: Go to your Blogger dashboard

Step 2: Then go to "template" and click on "edit html"

Step 3: Find </head> Section

Step 4: After that paste the following code above </head> Section

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

Note - Most of Blogger Template already have above Jquery Code, If Already have then Don't install above code again.

Step 5: Now add the images of smileys on the comment box.

Step 6 : Now click CTRL + F and find out the </body> code.

Step 6: Paste below code just above </body> tag

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;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='http://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/></b:if>