World Of Information Technology: How To Add Emoticons

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons Smileys in Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

So let's get started with this tutorial.

Step 1 :- Login to Blogger account. Go to -> Template -> Edit HTML.

Step 2 :- Click on Backup/Restore for your security purpose.

Step 3 :- Find the Code </body> in your template.

Step 4 :- Copy the below code and paste just above </body>.

Select All

<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>

Step 5 :- Now find the <head> and copy the below code and paste just after the <head> tag.

Step 6 :- Click on Save Template and refresh the page now you have enabled Smileys to your blogger comment box.