How to Add Chat Emoticons in Blogger Comments

Now a days a new trend is use a funny Smileys along with the comments. So many friends and people want to learn how to Add Chat Emoticons in Blogger comments, So we decided to share this method. In this tutorial we can learn easily.

Why to Add Chat Emoticon in Blogger? 

Action speak a lot of world, expressions, mood, feelings. Chat emoticons is a latest and beautiful way to explain our feelings to other and transfer own emotions, expressions to all others.

How to Add Chat Emoticons in Blogger?

Step #1: Login to your blogger account and select the blog

Step #2:Go to your blogger dashborad and click on Template > Edit HTML

Step #3: In the template coding you can find </body> tag and copy the following code and paste above it.

<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><script type='text/javascript'>//bloggersmileys.init();</script>

Step #4: Now once again search the following code div class='post-footer-line post-footer-line-3'> in template coding than you can look </b:includable>  tag and paste the following code above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.netoopsblog.com' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Emoticions</div>
 </b:if>

Stpe #5: After this you can need to add CSS coding of Smileys, So now search the following code  ]]></b:skin> and paste the following code above it;

.post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;
}

Step #6: Now save the template.
Done.....

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.