Add Emotions In Blogger Comment

Many of my  friends messages to ask about adding smileys into your blog so I decide to create a tutorial about it.

Emoticons/Smileys are an excellent way of making your blog comments more beautiful and fun. And also to express your way of feeling by showing "Emoticon" in blog comments and it will look cool. Blogger does not support smileys but use some java script & coded and add emoticons/smileys into blogger comments.
In all there are 33 smileys and emoticons that can be added to the Blogger comments with various animated smileys available. Also we learn on next tutorial how to add emoticons and smileys into blogger post.

How to Add Emoticons/Smileys into Blogger?

To do this just follow the steps:

Go to Blogger Dashboard  >>> Template

Before doing this Please! Download backup of your template for your safety.

Now click on Edit HTML.

Use Ctrl+F to find </body>

Then copy and paste below code before 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://dl.dropboxusercontent.com/s/s7x5nalqkatxtlq/bloggerknown-emo.js' type='text/javascript'/></b:if>

Now time to add Jquery into blogger, if you have already added jquery code into blogger then skip this step but if you can't add it or use already, then follow below step.

6. Ctrl+F and find </head> and past the below code above it ..

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

7. Save Template.

If you like this post share it with your friends and subscribe or follow us and be the first to now abour our tutorials and article.