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

Step by step process how to switch off the right-click feature On Blogger. I'll guide you on how to shield your blogger site images from being stolen.

You might think about how to disable right-click on one of your paid specific images only? But what is the reason behind this?

The main issue: you spend several hours creating the wonderful graphic for your website, only to get it stolen two days later by some jerk! There must be a way to retaliate!

There seems to be... do not post your personal stuff on the internet.

Is there any better advice than that?

Or perhaps in a nutshell, yes and no. Yes, there are initiatives you can really do, but they aren't as effective as you would believe.

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

Disabling right-clicking is the most basic and widely used security. You can try to use right-click on this blog post image. I am sure you'll be blocked in most browsers.

It's important to consider that the "no right-click" protection has several flaws... people can always glance at the source code of the website, find the image's URL, and save it to their personal computer.

Myth Busted: Is It a Matter of Data Protection?

During a recent discussion with a user, the topic of data security came up, and a major question arose: are images covered by the Data Protection Act? 

What are you seeking to do by disabling the right-click? 

The trouble with any strategy is that it can still be circumvented. Unbinding of the event is possible in the Google Chrome and in Firefox consoles. Alternatively, if you wish the image to be secured, you can still search in their temporary cache for the pictures.

However, in this article, we will show you the way to protect your specific and entire blog image. And these tricks can be applied in both Blogger and WordPress theme.

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: Log Into your Blogger theme and go to 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.

How to disable right-click save on one Specific Image Only?


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;"/>


warning message sample on specific image
After right click alert message showing on a specific blog image


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.


disable right click on homepage image
Disabled the right-click on the blogger homepage images


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.bloggerspice.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.bloggerspice.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.bloggerspice.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.

Issues Related to JavaScript

By adding a feature on your website, you can easily override it if users disable JavaScript in their browser settings. This can be easily overridden. The alternative, disabling the image selection method that we introduced at that point is useful. The addition of the JavaScript features is too easy to disable in browsers settings and ultimately it will be a waste of time.

Still, JavaScript is easy to use, and it slows down image stealing.

Final Thought

...and, finally

Harsh, it's a little insulting?

I don't believe so. The overwhelming majority of your visitors would trust you to provide them with good, interesting, and valuable content as they visit your site, not to take content from your blog. You want them to put their confidence in you when it comes to the accuracy of the knowledge you offer.

So, Blogger should not be disappointed, because content thief can't go long way. And they won’t be able to gain trust like your original published content.

You may like these posts

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up