How to Disable Context Menu Using JavaScript With Alert Messages

Javascript code on a monitor. Programming concept.

One of the most popular methods for preventing thieves from stealing blog content is to disable right-click or context menu.

So today I have finally decided to share with you my context menu code that I am using for many years that most of my readers wish to have it also implemented in their websites.

Without further ado, below is the practical guide on how to disable right-click or context menu using JavaScript with alert messages in Blogger or Blogspot. But, before anything else it is a good practice to always download a backup of your Blogger Theme this way you can easily restore your theme in case something went wrong.

1. Sign in to Blogger.

2. At the top left, click the Down arrow and choose a blog to update.

3. Click Theme.

4. After clicking the theme, click the down arrow at the right side of "CUSTOMIZE" and click Edit HTML.

Insert the CSS code below above ]]></b:skin>

.alert{position:fixed;bottom:20px;right:20px;z-index:999999;width:auto;max-width:400px;margin:0 0 0 20px;background-color:rgba(0,0,0,.7);border-radius:4px;color:#fff;box-shadow:1px 7px 14px -5px rgba(0,0,0,.2);border-left:3px solid $(main.color)}
.alert-main{text-align:left;padding:21px 0;padding-left:70px;padding-right:60px}
.alert-close{float:right;position:absolute;top:8px;right:10px;cursor:pointer;font-size:18px}
.alert-close:before{content:'\e5c9';font-family:'Material Icons Round'}
.alert-icon{background-color:$(main.color);padding:5px 7px;color:#fff;border-radius:50%;font-size:18px;position:absolute;left:40px;top:50%;transform:translate(-50%,-50%)}
.alert-icon:before{content:'\e004';font-family:'Material Icons Round'}
.c-timebar{width:100%;height:2px;position:absolute;bottom:0;left:0}
.c-timebar__remaining{width:100%;height:100%;position:absolute;left:0;top:0;border-radius:5px;background:rgba(255,255,255,1);z-index:2;transform-origin:0 0;animation:timebar_progress;animation-duration:5s;animation-timing-function:linear}
.alert:hover .c-timebar__remaining{animation-play-state:paused}@keyframes timebar_progress{from{transform:scaleX(1)}to{transform:scaleX(0);background:transparent}}

Insert the code below under <!-- Local Plugins --> or <body>

/*! Context Menu Alert */
function alertundefinedcontent){var a="<div class='alert'><span class='alert-close '\e5c9' onclick='this.parentElement.style.display=&quot;none&quot;'></span><div class='alert-main'><span class='alert-icon'></span><div class='alert-content '\e004'>"+content+"</div><div class='c-timebar'><div class='c-timebar__remaining'></div></div></div></div>";$undefined'#Alert-Parent').htmlundefineda);var countdown;$undefined".alert").showundefinedresetCountdown).mousemoveundefinedresetCountdown);function resetCountdownundefined){clearTimeoutundefinedcountdown);countdown=setTimeoutundefinedfunctionundefined){$undefined'.alert').hideundefined)},5000)}}$undefined"<br/> + <br/>").nextundefined'<br/>').hideundefined);

Insert the below script under <!-- Theme Scripts --> or <body>

evalundefinedfunctionundefinedp,a,c,k,e,r){e=functionundefinedc){returnundefinedc<a?'':eundefinedparseIntundefinedc/a)))+undefinedundefinedc=c%a)>35?String.fromCharCodeundefinedc+29):c.toStringundefined36))};ifundefined!''.replaceundefined/^/,String)){whileundefinedc--)r[eundefinedc)]=k[c]||eundefinedc);k=[functionundefinede){return r[e]}];e=functionundefined){return'\\w+'};c=1};whileundefinedc--)ifundefinedk[c])p=p.replaceundefinednew RegExpundefined'\\b'+eundefinedc)+'\\b','g'),k[c]);return p}undefined'7 i="j G H I J!",k="K L M!",a="N l & O l P Q.",m="j R S T U V W X Y Z";3 oundefinede){7 n;bundefinede.10)4 11!=undefinedn=6.c?6.c.12:e.13)&&14!=n&&15!=n&&16!=n&&17!=n&&18!=n&&19!=n&&1a!=n||undefined8undefinedm),!1)}3 pundefinede){7 n=e.1b.q,t=/1c/.rundefined9.s)&&/1d 1e/.rundefined9.1f);bundefined"u"!=undefinedn=n.vundefined))&&"w"!=n&&"x"!=n&&"y"!=n&&"z"!=n&&"A"!=n&&"B"!=n)4""!==a&&2==e.1g&&8undefineda),!!t}3 dundefined){7 e=6.c.1h.q;4"1i"==undefinede=e.vundefined))?undefined8undefinedi),!1):undefined"u"==e||"w"==e||"x"==e||"y"==e||"z"==e||"A"==e||"B"==e)&&f 0}3 Cundefined){4!0}3 Dundefinede){f 0!==e.g?e.g=d:f 0!==e.h.E?e.h.E="1j":e.F=3undefined){4!1},e.h.1k="1l"}5.1m=o,5.g=d,-1==9.s.1nundefined"1o")&&undefined5.F=p,5.1p=C),6.1q=3undefined){Dundefined5.1r)},5.1s=3undefined){4!1},5.1t=3undefinede){4 8undefinedk),!1};!3 tundefined){1u{!3 tundefinedn){1===undefined""+n/n).1v&&0!==n||3undefined){}.1wundefined"1x")undefined),tundefined++n)}undefined0)}1yundefinedn){1zundefinedt,1A)}}undefined);$undefined"1B").1Cundefined3undefined){4 1D});bundefined9.1E!=1F){6.1G.1H="1I://1J.1K.1L"}',62,110,'|||function|return|document|window|var|alert|navigator|smessage|if|event|disable_copy_ie||void|onselectstart|style|image_save_msg|You|no_menu_msg|Click|keypressmessage||disableEnterKey|disable_copy|nodeName|test|userAgent||TEXT|toUpperCase|TEXTAREA|INPUT|PASSWORD|SELECT|OPTION|EMBED|reEnable|disableSelection|MozUserSelect|onmousedown|Can|Not|Save|images|Context|Menu|Disabled|Double|Long|is|Disabled|Are|Not|Allowed|to|Copy|Content|or|View|Source|ctrlKey|97|keyCode|which|73|99|120|26|85|83|43|target|Safari|Apple|Computer|vendor|detail|srcElement|IMG|none|cursor|default|onkeydown|indexOf|MSIE|onclick|onload|body|ondragstart|oncontextmenu|try|length|constructor|debugger|catch|setTimeout|5e3|img|mousedown|false|onLine|true|location|href|https|probloggertemplatesyard|blogspot|com'.splitundefined'|'),0,{}))

To show the messages insert the below script between </head> and <body>

<div id='Alert-Parent'>
</div>

5. Save your theme.

That's all. Happy Blogging!

In case you don't want the above, feel free to try any of the ways I have shared in my previous post entitled Complete Guide on How to Disable Right Click Copy Function on Blogger.

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

Previous Post Next Post