Disable Text Selection on Blogger to Protect Your Post

You might have heard of blogs that are being copied by other people without permission. Now in order to protect your blogs from these people, bloggers use different approach such as disallowing right clicks and copy-paste from their blogs. Though these approach are not 100% copy-proof, it is far more better than leaving your blog without any protection.

So for today, I'll introduce another trick that might be useful for blogger (blogspot) users. This trick disables selecting of text via CSS. Note that this only works for non-IE users. A different approach might be used for such browser users but I will discuss it next time.

This is the CSS that should be used and added:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

Now to incorporate it on your blog in blogspot. (Take note that I'm using the old interface, you may look for the counterpart of these items on the new one)

1) Log in Blogger (I'm case you haven't done it yet)
2) Go to Design > Edit HTML
3) Back-up first your current template by clicking "Download Full Template"
4) Look for this line:

]]></b:skin>

5) Just above this line add the following code:

.post-body{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 user-select: none;
}

6) Save and Test.


Now though this tutorial should only work on blogger, the same approach may be used for Wordpress. Later on i might also post a way on doing this on the said CMS or content management system.

You may also read this article for further details: Disable Text Selection via Javascript or CSS