Advertise Here

Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Sunday, December 30, 2012

How To Stop Highlighting A Web-Page Using Pure CSS Code?

This Article Was Live On: Sunday, December 30, 2012 And Till Now Have10 comments.
How To Stop Highlighting A Web-Page Using Pure CSS Code?

After my previous article that is "How To Disable Highlighting The Text From DIV, Blog And Website?" I am here to share the CSS version that are also better then that in some ways that is is quick to load then that and also will works on JavaScript blocker because it is not a JavaScript code but it will not full-fill all the features of JavaScript code.

So as you wish and what you want to use but i am here to share all the way to Stop Highlighting Using CSS and secure your content. All you need to do is use a CSS selector class of selection and define the style to use on your text when a visitors tries to highlight the test. But what if you want to do the opposite and want to disable your visitor from highlighting the text all together? There is an experimental property called user select which will allow you to define new instructions when the visitor tries to highlight your content.

This feature can be a good way of making it harder for people to highlight your content and copy it into their own website. This is currently support on webkit, firefox and IE 10. To use the property you need to prefix it with the different browser prefixes but you should also place the non-prefixed version to future proof the property.

Features:

1.) It Will Disable Highlighting Text Of Your Whole Blog Or A DIV Only.
2.) It Will Disable Highlighting Via Mouse As Well As Keybord.
3.) Simple And Short Pure CSS Code.
4.) Easy To Install And Quick, Quick, Quick To Load.
5.) It Will Help You To Secure Your Content.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


Disable Whole Web Page:
<style type='text/css'>
body {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Disable All Span Tags:
<style type='text/css'>
span {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Disable All P Tags:
<style type='text/css'>
p {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Disable Selected DIV Tag:
<style type='text/css'>
#DIV {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Disable Selected Class Tag:
<style type='text/css'>
.class {
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>

Disable Blog Post Only:
<style type='text/css'>
.post{
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10 */
/* Currently not supported in Opera but will be soon */
-o-user-select: none;
user-select: none;
}
</style>


Customization:

1.) The values on this property are:
Auto - Visitors can select all content in the element.
None - Selecting content is disabled.
Text - Can only select text content.
2.)  Save and done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



10 comments :

  1. You should plus one more :)
    This will disable Highlighting on the post only

    .post {
    -webkit-user-select: none; /* Webkit */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10 */
    /* Currently not supported in Opera but will be soon */
    -o-user-select: none;
    user-select: none;
    }

    I hope you can add it from your post :D

    Regards Danial

    ReplyDelete
  2. Please tell how to add google plus jquery popup widget for blogger like this widget :

    http://www.exeideas.com/2012/05/stylish-lightbox-pop-up-facebook-like.html

    ReplyDelete
    Replies
    1. Be With Us To Get Something Like This Too...

      Delete
  3. Replies
    1. Thanks For Visiting Us And Leaving Your Review...

      Delete
  4. Your steps are very easy to follow. Thanks for it sir.

    ReplyDelete
  5. its 2014 bro .. pls do something for opera too..

    ReplyDelete
    Replies
    1. We Are Waiting For The Update From Opera. Every Browsers Have There Own Code Too But Opera Doesn't. So Its From Opera Side. But Still You Can Do It In Other Way, Just Add Unselectable On In Your Body As <body unselectable="on" For Opera And IE.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.