How To Disable Text Selection in Blogger Posts Using user-select?

Why To Disable Text Selection or Highlighting?

If you have a Blog with Tutorials which are written by You and Unique but You See Same Posts on Google or Other Search Engines And You See Some Copycats Copied your Posts or tutorials and their posts ranked better than your's and Search engines think you have duplicate posts in this case You Need To Disable Text Selection or Highlighting This is not 100% protection but a starter to protect your blog and Its unique content.

Is This Script Slow My Site / Blog?

No Not at all Before we write or share any script we check them In many of our Blogs So that If it has any error or cons we can Fix it Before Sharing with our Visitors or Subscribers. but this is CSS Trick As CSS Does not interfere in loading of your site unlike JavaScript. So This is Lightweight and Does not take More space on your site.

Let Start! How To Add  Disable Text Selection in Blogs or sites:

Steps To Add Disable Text Selection Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

Template

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Search for
]]></b:skin>

STEP 5:  Copy This Below Code Before ]]></b:skin>

.post-body {

/* http://www.trendingwidgets.com */

-webkit-touch-callout: none; /* For Safari, ios */

-khtml-user-select: none; /* Konqueror Web browser */

-moz-user-select: none; /* Firefox Web Browser */

-ms-user-select: none; /* Internet Explorer / Edge */

-o-user-select: none; /* Opera Web Browser */

user-select: none; /* Normal */

-webkit-user-select: none ; /* Google Chrome Web Browser */

Now If you want to Highlight Some particular elements like Blockquote, Pre, or and other classes Or ID Then Use This Below Code With the Above One.
.post-body {

/* http://www.trendingwidgets.com */

-webkit-touch-callout: none; /* For Safari, ios */

-khtml-user-select: none; /* Konqueror Web browser */

-moz-user-select: none; /* Firefox Web Browser */

-ms-user-select: none; /* Internet Explorer / Edge */

-o-user-select: none; /* Opera Web Browser */

user-select: none; /* Normal */

-webkit-user-select: none ; /* Google Chrome Web Browser */



/* Enable Text Selection for Particular HTML Element or Multiple Elements using Commas! */

blockquote {

/* http://www.trendingwidgets.com */

-webkit-touch-callout: default; /* For Safari, ios */

-khtml-user-select: text; /* Konqueror Web browser */

-moz-user-select: text; /* Firefox Web Browser */

-ms-user-select: text; /* Internet Explorer / Edge */

-o-user-select: text; /* Opera Web Browser */

user-select: text; /* Normal */

-webkit-user-select: text ; /* Google Chrome Web Browser */

}

Customization:

  • The Yellow Highlighted Text is For Element which you want to disable Text Selection or Highlighting. If you want to Disable text selection for whole or Complete Site then Change the .post-body in yellow to body .
  • The Green Highlighted Text is Responsible for Particular Element Which you want to Enable Text Selection or Highlighting. So Change the Element Name With your Class or ID or any other element Name Correctly.
    STEP 6:  All Done Save Your Template and Verify it in your site Whether it is working correctly or not . If it is not working correctly then you did some mistake while following tutorial.

    That's It Thanks For Following our Tutorial " Disable Text Selection inside the Blogger Posts using CSS! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

    1 comment:

    1. Thanks for this amazing post. I applied it on my blog and it is successfully working.

      ReplyDelete