Disable text selection in your Blogger blog posts

Creating a Blogger blog is a free deal, you don’t have to pay for it. You may already know that using Blogger has several advantages over other blogging platforms, the most important one is that it is Search engine ready, and especially optimized for Google.

Everyone knows that Internet is prone to piracy. If we relate it with blogging and web publishing, a bad practice of copy-pasting content is very common on web. The scraper sites copy high-quality, unique, valued content from other websites in order to get free, no-hard-worked traffic from searches. This becomes really annoying when the scraper blog ranks above you in SERPs.

So, how should I get out of this? How can I stop others copying stuff from my blog? This post is the simplest answer to such questions.

Restricting text selection on your Blogger blog

Yes. Disabling the text selection on your blog can reduce the chance of your content being copied on other blogs to 80%. Below is a short & simple JavaScript code snippet you have to add in your Blogger template to disable text selection.

To add the script to your template, go to the Template section in your blog dashboard, and click the Edit HTML button to edit the template. Now, look for </head> tag, and paste the following code just above it, and save the template:

<script type="text/javascript">
function disableSelection(target){
	if (typeof target.onselectstart!="undefined") //IE route
		target.onselectstart=function(){return false}
	else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
		target.style.MozUserSelect="none"
	else //All other route (ie: Opera)
		target.onmousedown=function(){return false}
	target.style.cursor = "default"
}
disableSelection(document.body);
</script>

This handy JS snippet is brought to you by Dynamic Drive.

After implementing the script, no one would be able to directly copy posts (or any text) from your blog.

Advance use (optional)

If you want only the specific section (eg. the post area) to be disabled for selection, you should replace disableSelection(document.body); with disableSelection(document.getElementById('Blog1')); and save the changes.

jQuery to disable text selection

The above script is good enough to restrict text selection on your blog, but if you are making use of jQuery on your Blogger blog, you may also make use of the following jQuery snippet in place of the above mentioned JS code.

<script type="text/javascript">
$(document).bind('selectstart dragstart', function(evt) {
	evt.preventDefault();
	return false;
});
</script>

The implementation is same as the above mentioned script, i.e. place the code just above </head> tag and save.

Advance optional usage

For a specific area (eg. post section only), use the below jQuery script:

<script type="text/javascript">
$.support.selectstart = "onselectstart" in document.createElement("div");
$.fn.disableSelection = function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
        ".ui-disableSelection", function( event ) {
        event.preventDefault();
    });
};
$("#Blog1").disableSelection();
</script>

Hope this has helped. Happy Blogging :)