Friday, November 24, 2017

How to Add Chat Emoticons in Blogger Comments

Chat Emoticons are the smiles or icons that are used to express your feelings in the chat or any discussions. i.e : 😉 🙂 😀 etc

So in this post I am going to show you that How to Add Chat Emoticons in Blogger Comments?

Stay with me I will show you the step by step process to add chat Emoticons to your blogger blog. By using these icons you can express your feelings or your commentators can also do.

Keep in mind that this is a public option and will be available to all blog users and commentators.

Why Chat Emoticons are?

Emoticons are the simple icons that express your feelings while chat or discussions with others. And it can speak louder than words. Due to increase in social activity use of Emoticons also increases.

Here are some benefits of Adding Chat Emoticons in Blogger Comments..

  • You can express your feelings.
  • Angry or happy faces can be showed – 🙂 🙁
  • Commentators can easily say what he want.
Add Chat Emoticons in Blogger Comments
How to Add Chat Emoticons in Blogger Comments


Add Chat Emoticons in Blogger Comments?

I will show you the step by step process by which you can Add Chat Emoticons in Blogger Comments. Just follow me and do as I do.

At First Sign In to Your Blogger blog. Its Must !!

After it click on the Template section in your menu sidebar.

Now !! Click on the Edit HTML in your blog Template.

Here you have to search your blog template and for that hit Ctrl + F

Search for the closing body tag i.e : </body> you can easily find it. And Now right before closing body tag paste the following code.

<script src=''/>
<script type='text/javascript'>//bloggersmileys.init();</script>

After pasting the code before closing body tag save all you setting. And now its time to add the short codes for adding emoticons in blogger comments.

Again in the Template, search for <div class=’post-footer-line post-footer-line-3′> then look for </b:includable> tag and just above it paste the following script.

<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=''/><a style='display:none;' href='' >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>

After that, you need to add the CSS coding of Smileys in order to make them look as appealing as Whatsapp, facebook or any other popular social platform. Search for ]]></b:skin> tag and paste the following code above it.

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

Afterwards, simply hit the Save Template, now the emoticons are implemented to your blogger comment section and short codes will also be available there.

Any commentator while commenting can use the short code and express his feelings.

Guys this was a huge guide on How to Add Chat Emoticons in Blogger Comments. I hope you successfully integrated emoticons.

If you like this article then please share this with your friends on social media and help your other newbie friends.

If you have any question or need help then ask in comments or email me.

About Duryab Aziz

I am Duryab Aziz a computer science student. I love to write and share ideas about Technology, Blogging, SEO and Blogging Tips. I am very passionate about blogging, I am a SEO expert with 4 years of experience in SEO and blogging. I also provide freelancing services such as anything regarding WordPress, any possible issue that you can have, ;) Like Installation, Speeding up WordPress site, On-Page SEO, Off-Page SEO and Article Writing. View my Upwork Profile here.. You can hire me now :) Just drop a single message.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This