Disable Right Click Context Menu On Your Blog Images & Div Section

                 The most prevalent way bloggers use in keep their site content is by disabling right click on the whole blog content, but this action makes some trustworthy readers to feel dampen with limited functions accompanying to the right click such as open link in new window, bookmark this link , reload and back. But you can still defend your blog images by disabling right click on only images and not the whole blog, which still makes sense. This effect can be apply to a single image or the whole images on your blog, using a few line of code. both the two hacks will be mutual in this tutorial, and for a demo of this hack, simply click on the image below, and see what we are talking about. 

Recommended Reading : How To Disable Mouse Selection On Blogger And WordPress

How To Disable Right Click ON Single Image

                In other to disable right click on a single image, you will need to add a context menu event handler code into the image tag. The following code is the code you need to insert into your image tag.

oncontextmenu='alert("Image protected");return false;'

Now in your post editor, simply switch to HTML mode when your are about to disable an image. The image tag will look as follow :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaai88qh_pzJ9iS8xbin8mtJ7ybdwF_g1hoJxXq1foQxqvLhodAaY4uiYuINSiruUADD8v0R2bJS4gRUfbO3GTRZZy9J59gWT_G9R2PcdRA3JrA28AR0XGVmRJ04Wpe_xXp_Lz-HTqD0/s1600/Disable+Right+Click+Context+Menu+On+Your+Blog+Images+&+Div+Section.png"  />

Adding the context menu snippet into to the image tag, the final result will look as follow:

<img oncontextmenu='alert("Image protected");return false;' border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaai88qh_pzJ9iS8xbin8mtJ7ybdwF_g1hoJxXq1foQxqvLhodAaY4uiYuINSiruUADD8v0R2bJS4gRUfbO3GTRZZy9J59gWT_G9R2PcdRA3JrA28AR0XGVmRJ04Wpe_xXp_Lz-HTqD0/s1600/Disable+Right+Click+Context+Menu+On+Your+Blog+Images+&+Div+Section.png"  />

      You can change Image protected to your preferred text as it is the alert text that will appear when a reader click on the protected image.

How To Disable Right Click ON <DIV> Section on your Post :

               Put your context menu code oncontextmenu='alert("Copyrighted Content");return false;' inside div section like that -

<div oncontextmenu='alert("Copyrighted Content");return false;'>                                   Blog Post content Here.....                                                                                                      </div>

How To Disable Right Click On All Images 

1. Go to Template > Edit HTML > Proceed
2. Use ctrl F to find </head> and paste the following below code before </head> section

<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by www.digitalhubinc.com
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>

The code above will disable context menu on all your blog images and replace it with an alert box

  

Hope you like this post and this code work  for everybody. Please share post and comment your idea and suggestion below…