How to Add Smileys & Emoticons inside Blogger Comments

Hello friends ! You might seen smileys and emoticons inside the blogger comments in many blogger blogs but you have the question about how you can add that smileys to your blog at comments then here is the another blogger tutorial from my side about what you are looking for. In one of mine previous post i shared how to enable video comments on blogger comment that also you might like to have on your blog and to get it feature available on your blog you have to just go and grab it.

Also see : Enable YouTube Video Comments on Blogger

Well, here is the tutorial that you have to follow in order to enable your readers / visitors to leave their comments with smileys and emoticons. if you would to show demo then check out the screenshot below to get idea actually how it looks like.

How to Add Smileys & Emoticons inside Blogger Comments

So, if you like to have this awesome feature enabled to your blogger comment system then follow the given steps below :

1. Go to blogger dashboard > Template > Edit HTML
2. Press CTRL + F to search for </body> tag, then copy and paste below code just 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='https://googledrive.com/host/0B6-apgHh7s2tZG9oR3JMNlN6RHc/blogger-comment-emoticons.js' type='text/javascript'/></b:if>

3. Now, make sure your blog have jQeury plugin installed , if not then place below code after the <head> tag.

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

4. That's it ! Now just save your template and you have enabled smileys to your blogger commenting stream.

If you have any questions or suggestion about this article or this blog then you can feel free to say by commenting below.

Thanks :)

Add Comment

Quicker BD