Disable users from selecting text and images on blog/website

Bloggers using tricks to disable right click are benefited in ways. They may have surely get red of their content being copied.
There are more steps you can take to make your content secure and can disable others from copying it. I posted a tutorial on disabling right click but there more techniques you have to use to protect your content better.

Demo

We can disable the selection of text or images on any website or blog to disallow others from copying your contents. It can be done with CSS easily. You just have to make some small customization depending on your needs.

body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

The above CSS will disable selections on all elements including text, images, tables etc. Learn from the examples below  


This CSS will work in Blogger, it disables selection on all elements in a post. Means users will be able to select every element on sidebars,headers and other parts of the blog except the .post-body area.

.post-body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

The CSS below will only disable selections for images in the whole document, cause i have put body in the selector.

body img {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

Or if you want to disable selection for images in post area only, then this CSS will work (for Blogger)

.post-body img {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

This was a quick overview on the user-select CSS property and the way to disable selection on elements. If you want to apply CSS on your blogger blog can check this tutorial.


If you want the disable selection for elements in a specific part of your web page then you use chrome developer tools to know it's class and put it into the selector area of CSS code.

Disable right click without JavaScript

There are many JavaScripts that can disable right click on a website or blog, but JavaScripts can be bypassed in many ways and just to reduce the chances for copy-cat to copy your contents use the disable right click technique along with the technique in this tutorial.
http://stramaxon.blogspot.com/2012/07/disable-right-click-without-using.html