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.
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 :)