How To Add Chat Emotions In Blogger Comments

Due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. Recently, one of our user asked us that how to add chat emotions in Blogger comments ? Today in this post, i will show you how to add chat emotions in blogger comments.

Why To Add Chat Emotions In Blogger ?

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 Emotions In Blogger ?

First of all, Sign in to Blogger and then select your Blog.

After that, you need to click on Template from the left side bar and click on Edit HTML

Now, Press Ctrl+F and then you'll have search bar and then search for </ body> tag using that search bar. Once 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's it, after adding the above link emotions can be used in comments. However, if you want to display emotions short codes to help users to use them efficiently in their comments, then continue following the tutorial.

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='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 platform. Search for ]]></b:skin> tag and paste the following code it.

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

Afterwards, simply hit the Save Template button and start using those awesome smileys on your blog.

How To Disable Text Selection In Blogger

Sometime we need to copy text content from blog sites for personal use. But not all of blog site user copy text for personal use - a lot of content thief, content scraper copy our website/blog sites content for use them on their commercial project or use somebody's text content directly on their website.

To copy text content from a website firstly we have to select text. This text selection can be turn off. As major Blogging platform known as WordPress and Blogger. WordPress far advance satisfaction by using variety of plugins. Such as Wp Content Protect plugin disable text selection from WordPress blogs and in Blogger there is also a solution available to disable text selection. Let's see how to set it up and how it works.

How To Disable Text Selection In Blogger For Preventing Copy Paste :

• First Log in to your Blogger, select your Blog.
• Go to 'Layout' tab, Click "Add a Gadget"
• From pop up menu select "Html/Javascript"
• And in content box paste following script code.

<!--start of prevent copy paste by funisonline.blogspot.com-->
<script
scr='demo-to-prevent-copy-paste-on-blogger-files/googleapis.js'>
</script><br /><script type='text/javascript'>
if(type of document.onselectstart!='undefined') { document.onselectstart=new Function ('return false' ); } else { document.onmousedown=new Function ('return false');
document.onmouseup=new Function ('return true') }
</script>
<!--end of prevent copy paste by funisonline.blogspot.com-->

After pasting the code save it.

And view your Blogger blog the text selection with mouse option is gone. This method all text element will be block out if you need some advance system where some part of blogs will be enabled for copying texts then follow the up coming tutorial.