How to Disable Context Menu Using JavaScript
|
Have you ever worried about someone taking your hard work? For many bloggers, one of the simplest ways to prevent content theft is by disabling the right-click or context menu on their site. This makes it harder for people to easily copy your text and images.
Today, I'm excited to finally share a tool I've used for years. It's my personal context menu code that many of you have asked me to share so you can use it on your own websites.
Ready to protect your content? Below is a straightforward guide on how to disable right-click or the context menu using JavaScript, complete with helpful alert messages, specifically for Blogger or Blogspot.
Before we dive in, please remember this important step: Always download a backup of your Blogger Theme first. This way, if anything goes wrong, you can quickly restore your blog to how it was. Let's get started!
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="none"'></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|vandeweybalao|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.
