It’s frustrating when people copy your blog post or image and pass it off as their own. No thank you, no credit, no linkback. Worse still when the stolen content ranks higher than yours (the original) in search results. All the hard work, down the drain.
This post will show you how deter bad people from stealing your blog content.
How your blog content is copied?
- Select - Copy - Paste. This can be done using your browser's menu, the right-click context menu or using shortcut keys.
- Select - Drag - Drop. Text and images can be selected and dragged into another window.
- Copy from RSS feed. If you want to copy an entire post this option is best. Scrapers love RSS feed because it delivers your latest post to them. They can copy all your latest content without even visiting your blog!
- Copy from source code.
How to safeguard your content
Below are several different ways you can prevent your blog content from being copied without your consent:
I) Disable text selection
Making text unselectable is the best way to prevent text from being copied from a live page using the right-click context menu shortcut keys or drag & drop. This can be implemented using only CSS, by applying the following CSS definitions to the element that you want text selection disabled:
-webkit-user-select: -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; |
Example, if you want to disable text selection in Blogger posts, then the code is:
.post {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none;} |
This CSS will disable text selection on the element and all it's children. It should work on Firefox, Safari, Chrome and IE10+. For IE9 and below, use onselectstart='return false' event handler, see II).
Re-enable text selection
What if you want to allow copying in some parts of your post. Say you post some codes (like I do) for readers to copy, then it doesn’t make sense if they can't select to copy it right? Fortunately you can restore text selection, by applying the same CSS definition to the element and replacing the value “none” with “text”. Let’s say your code is wrapped inside a
<code> tag, then the code you need is:.post code {-webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;} |
II) Disable drag and drop
You can disable drag and drop for both text and image by adding the following event handler to the element:
ondragstart='return false' |
To disable drag and drop inside Blogger posts, follow these steps:
- Go to Template > Edit HTML and click anywhere inside the editor.
- Press Ctrl+F (Cmd+F in Mac), and a search box should appear on the upper right corner of the editor.
- Use the search box to jump to this code:
<b:includableid='post'var='post'> - Next, click the arrow tip on the left of that line to expand the code. Once expanded, the second line should look something like this:
<divclass='post hentry'itemprop='blogPost'itemscope='itemscope'itemtype='http://schema.org/BlogPosting'> - Insert the event handlers into the tag like this:
<divclass='post hentry'itemprop='blogPost'itemscope='itemscope'itemtype='http://schema.org/BlogPosting'ondragstart='return false'onselectstart='return false'>(onselectstart='return false' is added to disable text selection in IE9 and below.)
III) Disable right click (only on images)
Some bloggers choose to disable right click in an attempt to prevent photos from being stolen via the right click context menu. However, in most cases the scripts they use disables right click on every element in a page, not just photos. This risks annoying or offending the rest/majority of their readers. I for one will be annoyed if upon right-clicking a link (to open it in a new tab), an alert box pops up, telling me the images in the blog are copyrighted!
The better option would be to disable right click only on images.
IV) Shorten RSS feed
Once they grab your RSS feed, nothing can stop them from copying or doing whatever they want with it. Whatever copy prevention measures you've applied on the live pages will have no effect here.
That said, you can however, control how much feed they get. To prevent feed from being copied in full, offer only partial/short feed instead of full feed. Make them come to your blog if they want more.
To shorten your blog feed, go to Dashboard > Settings > Other > Site feed > Allow Blog Feed and select Short or Until Jump.
V) Watermark images
Image watermarking is an proven way to deter people from stealing your images. Once you add a watermark to an image, people wouldn't want to copy it even if you ask them.
You can add watermark using a photo editing software such as PhotoScape, Gimp or Photoshop, or you can do it online on websites that offer such service such as picmarkr.com and watermark.ws.
Enjoy!
