Note: Content on the website can be copied in many advanced ways. Selecting the text with the mouse and copying content is the most traditional way of copying content. This tutorial is for beginner bloggers and website owners who don’t have much idea about the defensive mechanisms in protecting the content. This technique might not help you at fullest of its purpose. So, we recommend you to go for DMCA Takedown services if you are pretty serious about your content.
CSS3 have a selector named ::selection which can be used to style the selected text on the webpage. Using this selector, we can change the color, background, cursor and outline of the text. This selector was removed before the CSS3 recommendation status and can hopefully be added in the future version recommendations. However, this works well on all major browsers (with down versioning limit).
How it works?
As I told you in the above line that it can style color and background of the text, we are going to use the same properties to create a blind spot in the selection.What is blind spot?
Blind spot is nothing but making the visibility of the text to zero using ::selection selector. For that, we use both the color and background properties.
Here is what you should do
Observe the following piece of code, I’ll guide you on how to customize and install it on your website.<style>
::-moz-selection { /* Code for Firefox */
color: INSERT YOUR FONT COLOR ;
background: AS SAME AS FONT COLOR;
}
::selection {
color: INSERT YOUR FONT COLOR ;
background: AS SAME AS FONT COLOR;
}
</style>
Add the color of your font on the webpage to both the color and background properties. This creates a mono-color selection style hiding the text within, thus creating confusion to the copier.
Add the above piece of code in <head> section of your website so that it will load up before the content.
Psych tip: Actually, copiers have less patience, that’s why they prefer the 30 sec copy-paste job to the 3-4 hours article writing one. So, If you could annoy him for 30 seconds at least, they will fly off your website.
Hehe! I really liked this one: "Actually, copiers have less patience, that’s why they prefer the 30 sec copy-paste job to the 3-4 hours article writing one. So, If you could annoy him for 30 seconds at least, he will fly off your website."
ReplyDeleteGreat trick! No one can actually believe that this annoyance is caused by just simple CSS3 selectors..
Sometimes we'll have eveything under the hat and forget about that. This CSS3 selector was such one.
DeleteThank you for taking time in sharing your thoughts about it :)
Hi Sasidhar,
ReplyDeleteThis is very interesting! I like the illustration which you've used. Thanks for the codes. I'm sharing it on Twitter. :)
Rohan.
Hi Rohan,
DeleteGlad you liked it. Thank you so much for sharing it to your followers as well.
Hi Sasidhar,
ReplyDeleteNice and informative post buddy. Nowadays Content theft is one of the biggest issues in the blogosphere. This post can be helpful to those who are finding a way to get rid of content theft.
Sharing it on Twitter :-) Have a nice week ahead!
~ Umair Akram
Hi Umair,
DeleteGlad you liked the post. I've used a simple featuere of CSS3 in creating this blind spot snippet. As I said in the article, if you can annoy the copier for some little time, you can easily shoo him away.
Thanks for taking time in sharing your thoughts in here and sharing it on twitter.
Have a good day :)
Hi Sasidhar,
ReplyDeleteUseful post from your side, good! I had several bad experience with copying content of my blog and have written a post for that as well. It is really annoying when someone copy our content as we spending some quality time to craft the blog post.
I've no coding knowledge, thanks for the codes. I'll implement your tactic to irritate the copy cats. Keep writing, have a good day.
Hi Nirmala madam,
DeleteYes! Copycats don't actually care about the efforts. All they wanted is some content on their sites no matter if is helpful or not. I thought of implementing this simple CSS3 feature for this purpose and seems like it's gonna work.
Thank you so much for taking time in voicing out your expereinces here along with the crediting shares and likes.
Have a good day :)
Hello Sasidhar, thanks a lot for sharing this helpful information! Yesterday I face the same situation and now I come across your blog. Sasidhar, can I use this css internal or I make a class?
ReplyDeleteHi Aabharan,
DeleteJust add the above code with the color values in the internal CSS section of your website. There is no need to make it a class as we are protecting the whole website content. There would be a 'selection' CSS in the code, search for it and add the color, background properties to it. You can simply add entire above code if you don't find any such piece of selector already.
Hope it cleared your doubt. Feel free to get back to me if you couldn't make it.
Cheers :)
Hi Sasidhar
ReplyDeleteWhat a great tip and you have saved the day and we all can annoy these copy cats. I never knew that Css could help the situation.
Thanks for sharing.
Hi Ikechi,
DeleteCoding has the ability to create a problem and solve it. I just picked out a simple feature of CSS3 specification. Happy protecting your blog content.
Have a good day :)
Post a Comment