॥ श्री ॥
Shree Ram

How to Disable Copy Paste in Blogger?

Here in this article we are going to learn How you can Disable copy paste in Blogger.
How to Disable Copy Paste in Blogger?

Do you want to protect your website content from being copied?

Here in this article we are going to learn How you can Disable copy paste in Blogger, so let's begin.

In our First method we are going to use pure CSS code, so you don't have to worry about the performance of your blog. You can also exclude some of the content from being copied like the code snippets, etc.

By using the methods you cannot protect your content 100%, as some advance users can easily copy the content from the inspect element, i.e. the source code. But it can protect your content from normal users.

How to Disable Copy Paste in Blogger?

Now let's discuss some of the methods to implement it on your website.

#1. Disable Copy Paste in Blogger using CSS

Step 1. First you need to go to your blogger dashboard, i.e. blogger.com .

Step 2. After reaching to your Blogger Dashboard, then navigate to the Themes section.

Step 3. Then you will see a button named " Edit HTML", just click on that button and you will be redirected to another page.

Step 4. Now you will see a plenty of codes, then you have to type Ctrl + F, and then you will see a box prompted in the to-right section of your browser there, you have to type ]]></b:skin> press enter.

Step 5. You just have to copy the code given below and paste above the ]]></b:skin> tag. Then click on the save button.

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

Now the text selection will be disabled entirely on your website. Now a question arises that how to exclude certain parts and allow users to copy the content.

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

You can easily exclude some parts 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 pre tag, so that users can copy the text from this element only.

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

Now in the marked section you have to put your class name or the element name and then you have to paste the code in above the ]]></b:skin> tag as we did in the previous steps.

#2: Disable text selection using Javascript

Now let's see one more method to disable copy paste in blogger, but this time we are not going to use CSS, we are going to use Javascript.

Let's start the implementation.

Step 1. First you need to go to your Blogger Dashboard, i.e. blogger.com .

Step 2. After reaching to your Blogger Dashboard, then navigate to the Themes section.

Step 3. Then you will see a button named " Edit HTML", just click on that button and you will be redirected to another page. 

Step 4. Again the same process, you will see a plenty of codes, then you have to type Ctrl + F, and then you will see a box prompted in the to-right section of your browser you have to type ]]></b:skin> press enter.

Step 5. You just have to copy the code given below and paste above the </body> tag. Then click on the save button. 

<script>
$(&#39;body&#39;).bind(&#39;copy cut drag drop&#39;, 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 easy to customize and doesn't effect the load time of your website.

Conclusion

Now you must have learnt how you can disable copy paste in blogger. By using the above methods you can easily protect your content from being copied.

Which among the two methods you are going to implement in your website? Let me know in the comments.

Thank You For Reading

23 comments

  1. Where is the marked section?
    1. Check Again. I made it bolder.
  2. Where is the marked an sphere we have to place the css elements pls explain
    Techwithexperts.blogspot.com
    1. Check Again. I made it bolder.
  3. I have one more Question that we have to add that (exception) code every time we have to create any exception in a blog to allow copy paste for readers.
    Pls clarify.
    1. You can put "," this comma character.

      Suppose I have to add h1 there then the code will look like this:-

      p, h1 {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
      }

  4. Can you also tell how you maked that code box and Flag box in your blog post.
    Sorry for the disturbance.
    1. I did that with some basic CSS.

      Here's a guide:- https://www.w3schools.com/tags/tag_mark.asp
    2. Thanks for your support.
  5. Can you suggest some improvements to my website: techwithexperts.blogspot.com
    If possible...
  6. Can you also tell how to find the CSS elements name.
  7. CAN U PLS TELL WHICH BLOGGER TEMPLATE DO U USE?
    1. It's Median UI
    2. Can you give the XML file of it.
      Can you also tell how to find the CSS elements name.
    3. body {
      -webkit-user-select: none !important;
      -moz-user-select: -moz-none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      }

      Put this code.
  8. Hi I have one doubt
    1. Yes?
  9. the css one
    1. its so cool
    2. Yeah, thanks..!! 😊
Flowers