Complete Guide on How to Disable Right-click Copy Function on Blogger

Male hand clicking computer mouse.

Don’t want others to copy your content then you have to disable right-click copy function in your Blogger blog using these two methods using JavaScript and CSS.

Method 1: Sign in to your Blogger account > Click Layout > Add Gadget > Choose HTML / JavaScript > Then paste the below code in the Widget text area. Or you can paste it directly on your theme above </body>.

Alternative JavaScript 1

<script>
var message="Not Allowed";
var shouldAlert=1;
document.oncontextmenu=function(){
 if(shouldAlert==1){
  alert(message);
 }
 return false;
};
</script>

Alternative JavaScript 2

This script will disable right-click, F12, I key, J key, and U key functions.

<script type='text/javascript'>
//<![CDATA[
    // disable right click
    document.addEventListenerundefined'contextmenu', event => event.preventDefaultundefined));
    document.onkeydown = function undefinede) {
        // disable F12 key
        ifundefinede.keyCode == 123) {
            return false;
        }
        // disable I key
        ifundefinede.ctrlKey && e.shiftKey && e.keyCode == 73){
            return false;
        }
        // disable J key
        ifundefinede.ctrlKey && e.shiftKey && e.keyCode == 74) {
            return false;
        }
        // disable U key
        ifundefinede.ctrlKey && e.keyCode == 85) {
            return false;
        }
    }
//]]>
</script>

Method 2: Assuming you're already signed in in your account > Go to Theme tab > Click Customize > Click Advance > Add CSS > Copy paste the below CSS code in the Add custom CSS field > Click Apply to Blog. If this will not work go back to your Theme > Click Edit HTML > Ctrl + F then enter "<b:skin>" in the search field and paste the CSS code under it > Click Save theme.

.post-body {
       -webkit-user-select: none;       /* Chrome all / Safari all */
       -moz-user-select: none;          /* Firefox all */
       -ms-user-select: none;           /* IE 10+ */
       -o-user-select: none;
       user-select: none;
}

You can also try below CSS:

*{user-select:none}*::selection{background:0}*::-moz-selection{background:0}
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */

Your voice matters. Discussions are moderated for civility before being published on the blog. Read my comment policy here.

Previous Post Next Post