Using Smileys and Emoticons in chatting, commenting and in messaging have become a very popualar. This can be the great way to make the discussions and debate very interesting and fun. Emoticons and smileys can be angry, happy, teasing, laughing, crying, smiling etc. So using it in the blog comment can be more enjoyable.
I always recommend you all not to change any code without keeping back up your template.
Here is very easy steps to add smileys and emoticons.
Step 1: As usual Login to your dashboard of blogger.
Step 2: Then go to template and click on edit html
Step 3: Find </head> Section
Step 4: After that paste the following code above </head> Section
find the give codes
Note: click ctrl and f to find out the code.
Now you have done successfully.
I always recommend you all not to change any code without keeping back up your template.
Here is very easy steps to add smileys and emoticons.
Step 1: As usual Login to your dashboard of blogger.
Step 2: Then go to template and click on edit html
 |
| Blogger dashboard |
Step 3: Find </head> Section
Step 4: After that paste the following code above </head> Section
 |
| Blogger HTML Parts |
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Step 5: Then here we go to add the images of smileys on the comment box.
find the give codes
Note: click ctrl and f to find out the code.
</body>Step 6: Paste these code just above </body>
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;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://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/></b:if>
Step 7: Then click on the save template.
Now you have done successfully.
