How to Add Smileys/Emoticons in Blogger Comments

The Smileys/Emoticons way to give the visitors a lot of fun and confidence to your blog,It is known that these smileys used in social websites as Facebook.
Demo

To do this just follow the steps:

1.  Go to Blogger Dashboard  --> Template

2.  Please! download  a copy of your template
3.  Now click on Edit HTML
4.  Use Ctrl+F to find </ body>
5.  Then copy and paste just  above/before it, this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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> </b:if> Note: You can change blue with your own words.
6. Now the next step to find the code ]]></b:skin> 7. Then copy and paste just  above/before it, this code:
.emoWrap {   position:relative;   padding:10px;   margin-bottom:7px;   background:#fff; /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Opera */ background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);   border:3px solid #860000;   -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 #860000;   border-right:20px solid transparent;   width:0;   height:0;   line-height:0; } 8. Finally click save template. Now you can see the result and be happy. :-d