Officialhelplines

How to Disable Copy, Paste and Right-click On Your Blog - Absolute Solutions

Disable Copy, Paste,Right-click function

In this tutorial, I discuss how to prevent your blog posts from being copied by means of copy and paste functions of the users browsers or machine.

Additionally, the right-click function can optionally be disabled using the methods discussed here but I recommend that you do that only if you wish to disable access to your entire webpage content including its source codes, at least; to a level further.

With that said, one of the most painful thing for a blogger is to see that the content he had researched and spent quality time creating is being duplicated all around the internet by means of copy and paste especially without a link back to his blog post which is the source of the content.

As a result, many blogger seeks to find a way to disable the copy and paste feature on their blog posts and the entire web page each time the blog posts are viewed using any browser or app.

However, it should be noted that your blog posts may also be copied via other means which include copying the content of your webpage by accessing the blog source codes, by ifram method which we already covered in one of our recent tutorials.

While it is a good idea to restrict and control the rate at which your content are being shared, I would recommend that you focus majorly on restricting framing blogs and websites that mimic your every blog posts outrightly.

Learn more about framing websites here: How to Block Framing Websites and Blogs from Publishing Your Blog Posts

And onto the discussion for this day; how to disable the copy and paste functions of the various browsers or app that users use to view your blog.

These methods work awesomely fine with all popular CMS including WordPress, Blogspot and others.

How to Disable Copy / Paste Functions Using CSS

This is the method I recommend as it is not easily outsmarted by the majority of internet users.

Besides, the CSS method of disabling the copy and paste functions blends better in your website and is easily executed. Another benefit to this is that it is supported by all major browsers and apps that can be used to browse your blog making this method a better option.

Meanwhile, it should be noted that we are not necessarily disabling right click here rather, we are disabling the ability to select text using the user-select function of CSS property. In plain words, this means that; on right click, the option to copy the text would be invisible.

Also worthy of note, we're assuming that the CSS region you wish to disable copy and paste or right-click function is specified as a post-body in your CSS (body). Otherwise, the CSS syntax provided here may not work unless you specify the correct region intended in your CSS.

But you can as well add the below CSS properties to any class name you wish. For example; where you see post-body in the CSS syntax provided here, you can replace it with your desired targeting region say; "body".

To disable copy and paste functions using CSS:

  1. Go to the source code of your website or blog.
  2. Copy the entire CSS codes provide in the codes block below:


  3. .post-body {
    -webkit-user-select: none !important;
    -moz-user-select: -moz-none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -o-user-select: none;
    }

  4. Now, paste the CSS codes copied from above within the CSS section of your blog or website source codes.
  5. Click SAVE to effect the changes.
  6. You may now browse your blog or website using all popular browsers to confirm that the copy and paste functions are actually disabled as expected.

Disable Copy and Paste Function Except for Some Region of your Blog or Website

Now, supposing you operate a tutorial blog that ordinary let's visitors copy and paste some regions or part within your blog posts, how can you allow copy and paste function for some regions while disabling the same copy and paste function for others?

Here is how to do it.

To Disable Copy and Paste Functions Except for Some Region:

  1. First, determine which parts or region of your web page, blog or website you want your users to be able to copy.
  2. Identify which CSS class name or HTML tag holds those regions. For example, if you publish How-to tutorial similar to the ones on BloggerThemer.com on your blog, I expect that you use pre or code tag for your codes sections. If you publish mathematics related tutorials and wish that users copy mathematical expressions from your blog posts, I expect that you use code tag often. And in the case of news blogs and sites, I expect blockquote tags. Therefore, I have combined all the codes in a single CSS code blocks to make it easier to implement and appropriate for all blogs and websites.
  3. Now, copy the entire CSS codes provided in the codes block below:


  4. /* iVTheme.com CopyPaste Tweak
    ----------------------------------------------- */
    .post-body blockquote,.post-body pre, .post-body code {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    }
    .post-body {
    -webkit-user-select: none !important;
    -moz-user-select: -moz-none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    }

    ----------------------------------------------- */

  5. Next, go to the source code of your website or blog.
  6. Now, paste the CSS codes copied from above within the CSS section of your blog or website source codes.
  7. Click SAVE to effect the changes.
  8. You may now browse your blog or website using all popular browsers to confirm that the copy and paste functions are actually disabled (where specified) and works (where specified) as expected.

Now, that's it for the CSS method of disabling copy, paste and the right-click functions.

Meanwhile, before you go ahead, see other methods from below and choose which methods is appropriate for your blog and website.

Disabling Right Click Using Javascript

Although it is a common practice to using Javascript to disable right click function, this is a method I don't personally prefer because it is easily outsmarted by majority of the internet user.

To outsmart the JavaScript method of disabling right click all they will need to do is disable JavaScript in their web browsers.

Meanwhile, if you still favour the JavaScript method to disable copy and paste feature of your blog posts, here is how to do it:

To Disable Copy, Paste and Right Click Functions Using JavaScript

  1. Login to the admin dashboard of your website or blog.
  2. Copy the JavaScript codes provided in the codes block below:


  3. <script>
    document.addEventListener('contextmenu', event => event.preventDefault());
    </script>

  4. Go to the head section or JavaScript section (for some CMS) of your website or blog and paste the JavaScript code you copied from above.
  5. Click SAVE to effect the changes.
  6. Confirm that the copy, paste and right click functions are actually disabled as expected by browsing your website or blog and test it.

How to Disable Right Click Using HTML Body Tag

This is another method I prefer as it is not easily outsmarted as well. This is an extremely rarely used method hence, the reason it is very hard for people to bypass.

This method outrightly disable the right click function of your blog visitor's machine making it extremely impossible for them to copy your content.

However, for an absolute solution to your blog posts or website copyright infrigment, you may combine this method with any other method discussed from above.

To Disable Right Click Function Using HTML Body Tag

Disable right-click using HTML body Tag oncontextmenu handler
  1. Login the admin dashboard of your blog or website.
  2. Go to the source codes of the website and locate the tag. Refer to the picture above for an example of the HTML body Tag we are referring to. That image is for a blogger blog HTML body Tag.
  3. Now, right after body add: oncontextmenu="return false;". The end result of your blogger blog (for example) would look something similar to the one in the codes block below:


  4. <body expr:class='data:blog.pageType' oncontextmenu='return false;'>

  5. Click SAVE to effect the changes.
  6. You may now browse your blog or website and confirm that the copy, paste and right click functions are actually disabled.

Now that's all for now.

And I do hope you find this guide useful. Feel free to let us know any problems you encountered implementing this guides lessons on your blog or website using the comment box below.

0 Comments

to top