Una forma elegante de bloquear el botón derecho del ratón.
Lo he probado en Firefox e Internet Explorer 7 y 8.
¿Cómo se hace...?
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código JavaScript:
<script type="text/javascript">
// http://loseasi.blogspot.com/
// Creado por Vku.
function mostrarmenuder() {
with(document.getElementById("menuder")) {
style.display = "";
}
return false
}
function cerrarmenuder() {
document.getElementById("menuder")
.style.display = "none";
}
document.oncontextmenu=mostrarmenuder
</script>
Ahora justo arriba de ]]></b:skin>
Poner el siguiente código CSS:
.menudervku {
position:fixed;left:100px;top:150px;text-align:center;text-decoration: none;width:220px;border:0px;
background-color:#fff;
font-family:Verdana;
cursor:pointer;
line-height: 24px;
z-index:999999999999999999;
}
.menulink {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #000;background-color:#333;color:#fff;}
.menulink:hover {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #39F;background-color:#555;color:#39F;}
.menulinkcerrar {
height: 25px;
border:0;
background-color:transparent;
}
Personalizar el diseño del menú a su gusto.
left:100px: distancia desde la izquierda.
top:150px: distancia desde arriba.
text-align:center: texto centrado.
width:220px: ancho del menú.
Link:
background-color:#555: color del fondo.
color:#fff: color del texto.
Link hover:
background-color:#333: color del fondo.
color:#39F: color del texto.
Abajo de <body>
Ponemos el siguiente código:
<div class='menudervku' id='menuder' style='display:none'>
<div class='menulinkcerrar' onclick='cerrarmenuder()'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJqLYJ78Iug4i_R7-RlgGvlv_WreoEPWnumQmBP3MtSgXk1usG7vLJDu81heAx_9UG-1oIOLPl7APb7a9SUr58PPy4QUj88pPvUEAjAVHfN5AqM8RwkuSbI1LQruIcSKw3XSfWonjM2o/s1600/cerrar.png' style='float: right;' title='Cerrar'/></div>
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> http://loseasi.blogspot.com/ </div>
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 2 </div>
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 3 </div>
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 4 </div>
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_self")'> LINK 5 </div>
<div onClick='window.open("http://loseasi.blogspot.com/2010/08/menu-pulsando-el-boton-derecho-del.html","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'> Obtener el menú </div>
</div>
Cambiar la imagen de cerrar.
Agregar o quitar los link de la siguiente forma:
<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK Nº </div>
Donde:
http://loseasi.blogspot.com/: es el link que abrira al hacer click.
_blank: abre el link en otra pestaña.
_self: abre el link en la misma pestaña.
LINK Nº: texto a mostrar.
Guardar plantilla.
No quitar el ultimo link para que otros puedan obtener el menú.(Gracias):
<div onClick='window.open("http://loseasi.blogspot.com/2010/08/menu-pulsando-el-boton-derecho-del.html","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'> Obtener el menú </div>
</div>
No hay comentarios:
Publicar un comentario