How to Add Smileys & Emoticons in Blogger Comments

We have posted many emoticons posts earlier but we comprised all of them into one single post making a huge list of emoticons and those awesome colorful alphabets emoticons list too rocks, but today I thought about posting another emoticon based post but this time its for the blogger commenting system, well many people requested me to post how they can easily display those awesome emoticons inside blogger comments so that people can easily click and embed any emoticon in comments.

Well I found a nice post and I thought it would be great to display how you can easily add these inside your blogger comments stream. So now for the demo you can easily see how the emoticons will actually look like check below screenshot.

So if you like the way these emoticons are displayed you can easily add them inside your blogger comments check below steps.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for </body> tag & paste below code above 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='http://goo.gl/mNMnWB' type='text/javascript'/></b:if>

3. Now make sure you have Jquery present in your template, if not then just add below line above the </head> tag.

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

4. If you already have this line then skip the above step.
5. That's it now just Save your Template see these awesome emoticons blossom in your blogger commenting stream.

So guys now your readers can easily express there mood by just choosing a nice emoticon and then adding it into the comments. If you face any problem applying this widget do comment below so that I can fix that problem up.