Disable text selection and protecting your post content is more important as writing great content because your post could be stolen and will be of no importance. Visitors won’t be able to select the content so they won’t be able to copy the contents.
Implementation of CSS code is so easy. Just follow the following guidelines.
Table of Contents
Benefits of CSS code
- The website loads with CSS code so it won’t slow down your site.
- Visitors can’t disable CSS, so no need to worry that visitor will select your content and copy it.
- Since you can select your own CSS selector so you can decide what to make selectable and what to make non-selectable.
Note: Below code doesn’t disable right click. It only disables selection of the text, images, etc. If users can’t select anything then they won’t be able to copy anything.
Implementing CSS to disable text selection
Go to Blogger and click on your blog.
Click on template >> edit template
copy the following code and paste into your template before ]]></b:skin>
The body is called the CSS selector. You can change it as per your need. For example, if you want to make your whole site unselectable then you let it be the body if you want to make only content unselectable then change body → #content.
Note: This code not only disable text selection but whatever CSS selector is declared, everything it becomes unselectable. If you want something to be copied then follow the following tutorial.
Implementing CSS to enable text selection
You can change body to any other CSS selector. If you want p tag selectable then change body to p, if you want blockquote tag selectable then change body to blockquote.
Note: Better to use the above code with the body, so, the visitors can’t copy the content. When we use with other selectors, the visitors will be able to copy with keyboard shortcut Ctrl+C. So better to use the above code with HTML predefined tags like p tag, blockquote tag, comment tag, body tag, etc. User defined tag like #content, etc. has a limitation that user can copy the content with a keyboard shortcut.
For the selectors, you want to be select you can enter the second code i.e. implementing CSS to enable text selection.
Use CSS code on WordPress
On the self-hosted WordPress blog also, you can define the above CSS code and disable text selection. Go to your WordPress admin page, Appearance >> Customize and click on Custom CSS code and paste the above CSS code. Different plugins are available on WordPress to disable right click, text selection, etc. You can watermark your images by using plugins available on WordPress. You can start your WordPress hosting below with low price and great features.