CSS To Prevent Visitors From Copying Content Of Your Blogs Or Websites

It is very frustrating whenever some visitors copying content from your blogs or websites and published that content on their own blogs or on websites as like their own content means no credit to original publisher or blogger. And it might be possible that page rank of their copied data is higher than yours in a search results.

So, how to prevent such a visitors from copying your content?

There are so many methods to prevent people from copying content of your blogs or websites like using CSS, JavaScript or by using some other techniques. It depends on you, how much security and up to what level of security you want to give to your web pages. So first of all it is necessary to know how visitors should be copied content from your blog. (Here I am not offering to others to do that.)

1) Normal visitors directly try to copy the content from your pages by selecting content and images.

2) Prevent from right clicking on page

3) Some visitors might be using view source code and copied your contents.

4) Some visitors used F12 (or other shortcut keys).

In this post I am showing how to prevent visitors from copying content of pages as already discussed in option number 1 means shortly by selecting content and images.

Here I am explaining a simple method by using CSS, so that no need to learn hard concept of programming. No problem if you don’t know concepts of CSS or you know only some basic concept of CSS.

By using following styles you can prevent copying text from web page means making text unselectable :

user-select: none;

This style will disable text selection on element as well as on all child elements.

Now, somebody’s mind is thinking out of the box like what about browser support?

Oh yaaaaa it’s a big deal to work for a browser supports.

Following is the solution on that.

        
            -webkit-user-select: none;  // for all versions of Chrome and Safari
            -moz-user-select: none;  // for all FireFox
            -ms-user-select: none;   // for IE10+
            -o-user-select: none;    // for Opera
            -khtml-user-select: none;  // for some other
            user-select: none;
        
    

If you want to make some area of web page must be selectable within unselectable element then just use following styles for selectable element:

        
            -webkit-user-select: text;  // for all versions of Chrome and Safari
            -moz-user-select: text;  // for all FireFox
            -ms-user-select: text;   // for IE10+
            -o-user-select: text;    // for Opera
            -khtml-user-select: text;  // for some other
            user-select: text;
        
    

How we can easily implement this within your page CSS?

Just make two classes in style sheet (class name will be your choice) :

        
            .privateCode
            {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -o-user-select: none;
                -khtml-user-select: none;
                user-select: none;
            }
            .publicCode
            {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                -o-user-select: text;
                -khtml-user-select: text;
                user-select: text;
            }
        
    

Now you can use it for your html element. So if you want unselectable portion then just give a class name as privateCode to that html element and if want selectable then use publicCode.