How to Add Chat Emoticons in Blogger Comments 2016
Hey guys! As we know that due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. One of our user asked us that how to add chat emoticons in blogger comments? Today I gonna going to show you how to add chat emoticons in blogger comments.
So let Start it below:
1.First of all, Sign in to Blogger Dashboard and then select your Blog.
2.After that, you need to Click on Template From left bar and then Click on Edit HTML.
3.Now, Press Ctrl+F and then you’ll have search bar and then search for </body> tag using that search bar.
4.Ones you found the </body> tag, then paste the following code above it.
That it, after adding the above link emoticons can be used in comments. However, if you want to display emoticons short codes to help users to use them efficiently in their comments, then continue to find the solution of this problem.
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.
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 media platform.
Just Search for ]]></b:skin> tag and paste the following code above it.
Now just click on save template to start using the smiles on your blog.
So let Start it below:
Why we need to Add Chat Emoticon in Blogger?
As we listen Action speaks louder than words. Similarly, chat emotions are a way to show your mood. Whenever a user leaves a comment on your site, you don’t have any idea about how he is feeling. However, if the same comment has a Angry, happy, or confused emotion image then you can easily understand that mood of the commenter. This is the reason why, a lot of commenting systems are adding emotions to there platform. And the same thing can be added to Blogger custom commenting system as well.How to Add Chat Emoticons in Blogger?
Follow the given steps to add chat emoticons in blogger:1.First of all, Sign in to Blogger Dashboard and then select your Blog.
2.After that, you need to Click on Template From left bar and then Click on Edit HTML.
3.Now, Press Ctrl+F and then you’ll have search bar and then search for </body> tag using that search bar.
4.Ones you found the </body> tag, then paste the following code 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>
That it, after adding the above link emoticons can be used in comments. However, if you want to display emoticons short codes to help users to use them efficiently in their comments, then continue to find the solution of this problem.
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 == "item"'>
<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>
<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>
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 media platform.
Just Search for ]]></b:skin> tag and paste the following code above it.
.post-body
img.noops-smly {
padding: 0 !important;
margin-top: -2px !important;
}
padding: 0 !important;
margin-top: -2px !important;
}
Now just click on save template to start using the smiles on your blog.
I hope that after reading this article you can easily Add Chat Emoticons in Blogger Comments.If you like this article share it on social media to help other blogger friends.
Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.
No comments: