Disable copy-paste in Blogger using CSS

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

In this post, I'll explain to you how to block copy/paste and safeguard your content from copying.

In this case, we'll use simple CSS codes. This means that you don't have to be concerned about the performance of the speed. It is also possible to exclude certain elements, and users are able to take text from that section just.

There are a variety of other ways to block copy-paste on a website that utilizes Javascript. It is also possible to implement this technique.

Be aware that this method does not shield your website 100 100% from theft of text since some skilled users can take text from the source code. However, it will protect your content from the normal scrutiny of 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>

Disable Text Selection & Copy Paste in Blogger

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. 

Also, share your doubts regarding Blogger in the comment section.