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 is also better than that in some ways that are quick to load than that and also will work 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 visitor tries to highlight the test. But what if you want to do the opposite and want to disable your visitor from highlighting the text altogether? There is an experimental property called user to 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 supported 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.
There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.
Table of Contents
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 Keyboard.
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.
Troubleshooting the Errors
Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Final Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.
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 😀
Regards Danial
Thanks…
Please tell how to add google plus jquery popup widget for blogger like this widget :
https://www.exeideas.com/2012/05/stylish-lightbox-pop-up-facebook-like.html
Be With Us To Get Something Like This Too…
nice post dude ,i like your writing style spice stellar virtuoso mi 495 dual core phone
Thanks For Visiting Us And Leaving Your Review…
Your steps are very easy to follow. Thanks for it sir.
You Are Welcome…
its 2014 bro .. pls do something for opera too..
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.
This works on my page… Thanks so much for such a helpful post..After trying many codes, this finally worked. Is there a way to disable copying images too?
Welcome here and thanks for using this. Now, currently we have to trick to save images but we will share is surely when we have it…
Excellent and helpful post… I am so glad to left comment on this. This has been a so interesting. I appreciate your effort…
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again..
Thank you for sharing the awesome article with us. that’s very useful. Provides much-needed knowledge.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again..
I read your blog, thanks for sharing this with us keep posting, please do post continue. very nice your blog.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again..
So kind of you. Thanks A lot! The Article is so well posed. The subject is very cleared and understandable.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.