How To Disable Text Selection On Blogger With CSS

There are many talented and efficient bloggers who create their blog posts by hard working day and night but when a newbie or a copy cat person finds those blogs, they don't respect their handwork and hence they steal their unique contents by using a simple method of copy/paste. These copy cats are blogging for time-pass or just for a passion. Either they don't want to spend their time by writing the blog posts or they don't know the consequences of duplicate content publishing.

Check out: How to Disable The harmful JavaScript In Blogger Template

Why You Should Disable The Text Selection on Blogs? 

A few weeks ago, I copied a line of text from my website and then pasted it to my demo blog. After a day, I was looking for something on Google and surprisingly I found my demo blog in search results instead of my original website and later I thought why not give it a try by comparing the original contents to duplicate ones. Therefore, I again copied few lines from my website and published it to my demo blog. Honestly, when I searched for the targeted term on Google, I again found my demo blog at the top of Google search results and the original one at the bottom. Now you can guess how potentially can a copy cat damage your blog ranking.

Read Also: How To Create a Professional Landing Page in BlogSpot Blogger

Here, I will show you a small piece of CSS code by which can prevent your blog from being copied by others. You can either apply this code to your entire blog or simply prevent a specific portion of your posts/pages. If you are publishing the tutorial with codes for your blog readers, then I recommend disabling the text only not codes as you are helping the newcomers to copy it for educational purposes.

Disabling The Copy Function On Blogger Posts/Pages

1. Login to your blogger account > Theme > Edit HTML
2. Click anywhere inside the Theme Editor 
3. Press Ctrl + F to open the search box
4. Type  ]]></b:skin> in the search box and hit Enter Key
5. Now after locating the ]]></b:skin> paste the given CSS just above/before it

.post blockquote, pre.source-code,.code { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } body { -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !important; user-select: none !important; }

6. Finally, click Save Theme

In the above code I didn't block the right click on blockquotes, codes and pre.source because I always publish the codes in the following classes:

<blockquote> my code goes here</blockquote> <code> my code goes here</code> <pre.source-code> my code goes here</pre.source-code>

Check out: 6 Stylish Blockquote Widgets for BlogSpot Blogger

Now I disabled the right click on my entire blogs excluding the blockquotes, codes, and pre.source. However, if you never publish the codes, and want to apply this to your entire blog, you can remove the .blockquotes, .codes and pre.source. You can also disable the right click for your blog post images by adding the .separator but it is important for you to find the class within your theme/template. If you are not sure how to locate the class within your template/theme, you can simply right click on the image/blockquote etc. and you will find it.

Share this post