How to Disable Right Click and Image Selection in Blogger and WordPress Homepage and Post Page Images?

Disable Right-click on

How to Disable Right-click on One Specific Image Only?

You may not have any concern about all your blog images, but you would like to disable right click on a specific image. Even you can add an alert message upon right-click on a specific picture. Then you can follow this tutorial.

If you would like to disable the right-click on a specific image then you can use the below method. If you are using the blogger platform then you can switch to HTML view and add the code on any specific image.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: From the left menu click NEW POST

Step 3: Now upload your image and switch to HTML view.

Step 4: Locate the image URL and at the end of the image add code like below

<img src="Image URL" onContextMenu="return false;"/>

Here I have used on ContextMenu="return false;" at the end of the image URL.

In the below example, you can add an alert message to those who want to make right-click on your post image.

<img src="Image URL" onContextMenu="alert('Hello Buddy!'); return false;"/>,

You may want to show the alert messages in several row then you can use the script like below:

<img src=" Image URL" onContextMenu="alert('Hi Pal!\nDon\'t take my pic!'); return false;"/>

Step 5: Simply hit the Publish or Update button to see the changes.

For showing the copyright icon in a message you can use a message like this

This image copyright&copy;

How To Disable Right Click On Blog Images in Blogger Homepage Only?

Now we will show you how to disable right-clicking on Blogger blog images and photos using JavaScript. After applying this trick user can click on the image to visit the content but they won't able to use right-click function. Often bloggers post such awesome paid stock images and some poopiehead swipes without any permission.

By using this script, you can protect your blog graphics from stealing your images. Generally, people use the right mouse key. Right-click on the picture and save it. After injecting this script right click will not work on your blog pictures.

Also, you can also set a warning message to the blog images. When someone will right-click on it then it will display.

Please follow the below steps to activate this feature in the Blogger theme.

Step 1: Log Into your Blogger theme and go to Dashboard

Step 2: From the left menu click Theme – > Edit HTML

Step 3: Now copy the below script and paste it before or above the closing </head>

<script type='text/javascript'>//<![CDATA[
/* Widget Script by https://www.abdullahcoded.blogspot.com/ */
function nocontext(e) {var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;if (clickedTag == "IMG") {return false;}}document.oncontextmenu = nocontext;//]]></script>

If you want, then you can also add a warning message upon right-click. This feature will enable the automatic alert option. So, when a user right-clicks on your Blog image on the blogger homepage then it will show the warning message. To inject this code into your blogger theme please follow the above steps again.

<script type='text/javascript'>
//<![CDATA[
/* Widget Script by https://www.abdullahcoded.blogspot.com/ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Don't Dare to copy Our images. ";
    document.oncontextmenu = nocontext;
//]]>
</script>

You can easily add your own alert message by altering the text “Don't Dare to copy Our images.”

Step 4: Simply save the theme to active the code in your blogger theme.

How To Disable Blog Images Selection in Blogger Post Page Only?

If you don’t like to add any JavaScript to your blog, then there is an alternative technique you can apply to your blogger theme.

Instead of disabling the right click on the blog post image, the findings I had with Code Injection set a thumbnail not clickable. User can use right-click feature but they won’t be able to copy the image. Even they will get the 'Save As' option but if they try to save the image then the whole webpage will save as an HTML file. 

To install the following code snippet please follow the below steps:

Step 1: Log Into your Blogger theme and go to Dashboard

Step 2: From the left menu click Theme – > Edit HTML

Step 3: Now copy the below script and paste it before or above the closing ]]></b:skin>

/* Widget Script by https://www.abdullahcoded.blogspot.com/ */
.Blog .post-entry img{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
pointer-events:none
}

Step 4: now save the blogger theme to active the code in your blogger site.

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ