Visualiza un mensaje al presionar clic derecho 🖱️

Puedo decir por experiencia propia que no existe una forma absoluta que evite la copia de contenido o el robo de recursos de un sitio web; sin embargo, se pueden implementar trucos para dificultar la ejecución de este tipo de acciones.

El truco más común es desabilitar las opciones o menú contextual del botón derecho y aunque puede ser desesperante para nuestr@s lectores, es posible añadir un mensaje amable o divertido para indicar que algunas opciones están desactivadas.

Basta con ingresar a la edición HTML de nuestro blog y pegar una serie de códigos en los apartados que serán especificados a continuación:



Código 1: Estas propiedades se colocan despúes de los atributos contenidos en body {
// Selecciona el código y presiona el comando CONTROL + C para copiar el texto // } #context_menu { background: #eee7f8; border: 1px solid #d5cbe1; -moz-border-radius: 1px 1px; letter-spacing:1px; width: 106px; font-size: 10px; position: absolute; display: none; z-index:999; } #context_menu ul li { padding: 4px 4px; -moz-border-radius: 10px 10px; } #context_menu ul li:hover { color: #bba2d6; background: #eee7f8; } Código 2: El siguiente codificación Script se debe colocar antes de </head>  
// Selecciona el código y presiona el comando CONTROL + C para copiar el texto // <script type="text/javascript" language="JavaScript"> function click(e){ document.getElementById("teste").innerHTML = ""; var menu = document.getElementById("context_menu"); var mouseEvent = e || event; if (mouseEvent.button == 2 || mouseEvent.button == 3) { mostrar(mouseEvent); menu.onmouseout = function(e){ var mouseEvent = e || event; var element = mouseEvent.relatedTarget || mouseEvent.toElement; if (element.nodeName != "LI") { mouseEvent.toElement; } }; } if (mouseEvent.button == 0 || mouseEvent.button == 1) { esconder(); } } document.onmousedown = click; document.oncontextmenu = function(){ return false }; function mostrar(e){ var menu = document.getElementById("context_menu"); menu.style.display = "block"; menu.style.top = e.pageY + 5 + "px"; menu.style.left = e.pageX + 5 + "px"; } function esconder(){ setTimeout(function(){ var menu = document.getElementById("context_menu"); menu.style.display = "none" }, 100); } </script> Código 3: Por último, agregamos el siguiente lenguaje de etiqueta después de </head>
// Selecciona el código y presiona el comando CONTROL + C para copiar el texto // <div id="context_menu"> <ul> <li> <font color="#a795bf">El click derecho se encuentra deshabilitado</font> </li> </ul> </div>

Previsualización:


Recuerda que puedes personalizar el mensaje modificando el texto, los códigos de colores, las fuentes; además se pueden agregar íconos animados. Siéntete libre de comentar si tienes alguna duda o si este tutorial ha sido de tu agrado.