Inhabilitar el botón derecho con un mensaje emergente en pantalla completa

Inhabilitar el clic derecho con un aviso en pantalla completa

Proteger el contenido de tu blog es fundamental, sobre todo si compartes artículos, imágenes o tutoriales originales. Una forma práctica de hacerlo es bloquear el botón derecho y mostrar un aviso de alerta que ocupe toda la pantalla. Con este método no solo impides el menú contextual, también transmites un mensaje claro y visual de protección.

Ejemplo práctico

Para activarlo, copia y pega el siguiente código en tu plantilla Blogger, justo antes de la etiqueta </body>.

SCRIPT

document.addEventListener("contextmenu", function(e) {
  e.preventDefault();

  // Evita que se repita el aviso
  if (document.getElementById("block-screen")) return;

  let overlay = document.createElement("div");
  overlay.id = "block-screen";
  overlay.innerHTML = `
    <div class="block-message">
      <h2>🚫 Acción no permitida</h2>
      <p>El clic derecho está bloqueado en este sitio.</p>
    </div>
  `;
  document.body.appendChild(overlay);

  // Cerrar con clic en cualquier parte de la pantalla
  overlay.addEventListener("click", () => overlay.remove());
});

CSS

#block-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.block-message {
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 30px;
  background: rgba(255,255,255,0.05);
  border: 2px solid #ff4444;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,0,0,0.5);
  max-width: 90%;
}

.block-message h2 {
  margin: 0 0 10px;
  font-size: 28px;
  color: #ff4444;
}

.block-message p {
  font-size: 18px;
}

¿Cómo funciona?

• 🖱️ El clic derecho queda inhabilitado en toda la página.
• 🚫 Se abre una pantalla completa con un aviso de advertencia.
• 👆 El usuario puede cerrar el aviso dando clic en cualquier parte.
• 📱 Es totalmente responsive, funcionando en móviles, tablets y PC.

Conclusión

Este método no solo impide el uso del clic derecho, sino que lo transforma en un mensaje visual e impactante que protege tu contenido y recuerda al lector la importancia de la originalidad en tu blog.

Descargar Proyecto

Obtén el archivo index.html listo para ver el demo en tu PC o celular.