 |
Disable Context Menu With Alert Notification |
It's very annoying when someone else copies your article and doesn't even take your permission and doesn't give you any credit. If you want to protect your content from being copied, then this article will be very beneficial for you because in this post, We're going to guide you step by step how to Disable Context Menu Using JavaScript With Alert Notification
Disabling right-click, copy and paste or context menu is one of the most popular trick for stopping thieves from stealing blog content.
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.
How to Add Disable Context Menu with Alert Notification Timebar
Step 1: On Blogger dashboard, click Theme
Step 2: Click the arrow down icon next to 'customize' button
Step 3: Click Edit HTML you will be directed to editing page
Step 4: Find </style> or ]]></b:skin> tag, for a faster search press shortcut key Ctrl + F
Step 5: Copy below CSS code and paste just right above </style> or ]]></b:skin>
/*-- Material Icons Font --*/
@font-face{font-family:"Material Icons Round";font-display:swap;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsround/v65/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format("woff2")}.mir{font-family:"Material Icons Round";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:liga;-webkit-font-smoothing:antialiased}
/*-- Alert Message Timebar by thewebtrick.com --*/
.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 #ffffff}
.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:#ffffff;padding:5px 7px;color:#ffd929;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}}Note:
In the mark section you can change the color of the icon and width of the widget as you wish.
Step 6: Add below script above </head> or </body>
<script type='text/javascript'>
//<![CDATA[/*! Context Menu Alert */
function alert(content){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 \e004'></span><div class='alert-content'>"+content+"</div><div class='c-timebar'><div class='c-timebar__remaining'></div></div></div></div>";$('#Alert-Parent').html(a);var countdown;$(".alert").show(resetCountdown).mousemove(resetCountdown);function resetCountdown(){clearTimeout(countdown);countdown=setTimeout(function(){$('.alert').hide()},5000)}}$("<br/> + <br/>").next('<br/>').hide();
//]]></script>Step 7: Next search <body> tag and copy and paste below script above<body>
<script type='text/javascript'>
//<![CDATA[eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('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 o(e){7 n;b(e.10)4 11!=(n=6.c?6.c.12:e.13)&&14!=n&&15!=n&&16!=n&&17!=n&&18!=n&&19!=n&&1a!=n||(8(m),!1)}3 p(e){7 n=e.1b.q,t=/1c/.r(9.s)&&/1d 1e/.r(9.1f);b("u"!=(n=n.v())&&"w"!=n&&"x"!=n&&"y"!=n&&"z"!=n&&"A"!=n&&"B"!=n)4""!==a&&2==e.1g&&8(a),!!t}3 d(){7 e=6.c.1h.q;4"1i"==(e=e.v())?(8(i),!1):("u"==e||"w"==e||"x"==e||"y"==e||"z"==e||"A"==e||"B"==e)&&f 0}3 C(){4!0}3 D(e){f 0!==e.g?e.g=d:f 0!==e.h.E?e.h.E="1j":e.F=3(){4!1},e.h.1k="1l"}5.1m=o,5.g=d,-1==9.s.1n("1o")&&(5.F=p,5.1p=C),6.1q=3(){D(5.1r)},5.1s=3(){4!1},5.1t=3(e){4 8(k),!1};!3 t(){1u{!3 t(n){1===(""+n/n).1v&&0!==n||3(){}.1w("1x")(),t(++n)}(0)}1y(n){1z(t,1A)}}();$("1B").1C(3(){4 1D});b(9.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|thewebtrick|com'.split('|'),0,{}));
//]]></script>Step 8: To show the alert messages insert the below script above</head>
<div id='Alert-Parent'> </div>
Note:
If alert timebar message not visible then paste above code between <head> and <body>
Step 9: Save your theme by clicking this icon.
That's all. Happy Blogging!
This is all about how to disable copy paste in blogger. We hope this article has been very useful for deactivating copy paste on your blog and protecting your content from being copied. If you have any question or doubt then let us know in the comment.