How to disable copy paste of text in Blogger

Do you want to protect website content by disabling text selection in Blogger?

Here, In this article, I will show you how you can disable copy/paste of text and protect your content from stealing. 

Here, in this method, we will use pure CSS code. so, you don't need to worry about the speed performance. You can also exclude certain elements and users can copy text from that area only. 

There are several other methods to disable copy-paste in the website which uses Javascript. You can also implement this trick. 

Note that this method will not protect the website 100%  from stealing text as some advanced users can easily extract text from source code. But, It can protect your article from normal users. 

#1: Disable copy-paste in Blogger using CSS

To disable copy-paste of text in Blogger follow the steps. 

1. Go to Blogger dashboard > Theme > Edit HTML 

2. Now search for this code ]]></b:skin> or 

3. Now add the below CSS code just above this code. 

➤ CSS code

body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

Now text selection is disabled entirely on your Blogger website. 

If you don't find the </b:skin> tag then you can add the CSS code in the additional CSS section of your theme. Or add a <style> tag and paste above </body> tag. 

Before adding this code, take a backup of your theme file for safety and easy restoration.

Now how can you exclude certain areas and allow users to copy the content?. You can easily do that by using the Class element. 

Just right-click on the element and click on inspect to check the CSS class of the element on which you want to exclude. 

Here, I am excluding the blockquote, so that users can copy/ paste text from this element only. 

blockquote{
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}

Now paste this code just above the 1st code used in this method. Here you can replace any other class or id of elements in your Blogger website. 

Note: If you are facing trouble in finding the ]]></b:skin> tag you can paste the CSS code just above the closing body tag by using the style tag. Just add the CSS code in this format.

<style> body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}</style>

#2: Disable text selection using Javascript

You can also disable the copy-paste function in your blogger website using Javascript code. 

Here, users can copy the text from blog posts easily but can't paste the whole text in notepad or any other text editor. 

Just Paste the Javascript code just above the </body> tag in your theme file. 

<script>
$('body').bind('copy cut drag drop', function (e) { e.preventDefault(); });
</script>

Note that an Advanced user can easily bypass this 2nd method by disabling the Javascript in the browser. 

I recommend the CSS method as it is easily customizable and doesn't affect on the page speed and provides better protection.

Conclusion

I hope you got the idea on How to disable copy-paste function on the Blogger website. In this way, you can protect your Blog posts from being copied by others.

Which of the two methods are you going to try? Let me know in the comment section. 

Choose Language

Content Creator, Blogger, Front-end Developer
Bookmark This Blogger: 😌