Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Proteger las imágenes de tu blog

Desde que publiqué el truco de proteger tu blog para evitar que copien la información recibí varias consultas y comentarios que me preguntaban si había alguna forma de proteger también las imágenes.

Y, afortunadamente, es posible, por lo que aquí te dejo el truco para que puedas aplicarlo en tu blog.

Haz uso de esta línea:

<img src="URL DE TU IMAGEN" oncontextmenu="alert('TEXTO');return false" oncopy="alert('TEXTO');return false"/>


Que puedes pegar tanto en un gadget o elemento de página HTML-Javascript (en el apartado de Diseño) o en una entrada. Si optas por esta última opción, no olvides introducir el código en el modo "Edición de HTML" para evitar errores:

Descripción en las imágenes del blog en blogger (II)


Deberás reemplazar lo siguiente...

URL DE TU IMAGEN por la dirección de la imagen que quieras proteger (primero debes subirla a algún alojador como photobucket o simplemente blogger para obtener su URL).

TEXTO por una frase que aparecerá en una ventanita cuándo el visitante haga clic con el botón derecho sobre la imagen (debes escribirlo dos veces).

A continuación te muestro un ejemplo:


Así de práctico es este truco que protege las imágenes de tu blog y evita que cualquier lector "atrevido" las copie.

bleid dice...

hola jaime
que lo copio en html en un gadget?
saludos

picapusa dice...

Hola jaime, me parece muy interesante esto, pero hay algo que no acabo de entender, cuando dices la url, te refieres a que tengo que subir la imagen a una página??, no vale si la subo desde mi pc??
Y la última pregunta( ya ves que soy novata), tengo que poner todo ese codigo en vez de la foto?, osea copiar y pegar?

saludos Jaime , y muchas gracias

Jaime Trujillo Escobedo dice...

bleid, así es, pero también puedes ponerlo en una entrada para proteger las imágenes de algún artículo ^_^

Jaime Trujillo Escobedo dice...

picapusa, así es, debes subirla a algún alojamiento (blogger sirve, podrías usar un blog de pruebas) como Tinypic o Photobucket.

Cuándo la imagen esté alojada, con el botón derecho del ratón, clic en propiedades y copia su dirección.

Deberás usar este código cada vez que quieras poner una imagen, pero, para evitar que sea tan pesado copiar y pegar puedes pegarlo en la plantilla de entrada...

Configuración > Formato > Plantilla de entrada, y aparecerá automáticamente en las entradas.

Si necesitas algo más, por aquí estaré ^_^

Gio dice...

Hola,

Gracias por este truco, justo subí unas fotos a mi blog y me ha sido muy útil... ;)

Saludos.

Jaime Trujillo Escobedo dice...

Gio, ¿verdad que es muy útil? en fotos de personas es bastante bueno ya que evitamos que nos difundan ^_^

¡Saludo0s!

Gio dice...

Cierto, lo malo que el "imprimir pantalla" no se quita jajaja, pero bueno, al menos se dificulta un poco esto de que puedan copiar las fotos... no se lo dejamos tan fácil.

Muchos saludos ^^

Jaime Trujillo Escobedo dice...

Gio, también es verdad, tendría que haber alguna forma de bloquear eso ^_^

Por ahora esto evitará el copiado de imágenes en muchos casos. =)

Gio dice...

Hola Jaime,
No sé si acá sea el lugar más apropiado para hacerte una consultita, pero es con respecto a la imagen de fondo del blog...

Me pasa que en mi computadora (1024x768pix) veo todo bien ajustado, me refiero a que el texto me calza justo con la imagen que coloqué de fondo. Sin embargo al ver mi blog en otro pc que tenga una configuración de pantalla distinta queda todo mal :( Por ejemplo mi hermano usa 800x600pix y la imagen de fondo y cabecera se ven gigantes, o en otro pc de una resolución mayor, la imagen queda chica. El texto se ve ok, pues en la plantilla coloqué en porcentaje los anchos y los márgenes.

Cómo puedo solucionar este problema?
Gracias y saludos ^^

Jaime Trujillo Escobedo dice...

Gio, ya veo... yo también veo el fondo mal, me aparece pequeño :-S De todas formas, la imagen de fondo (http://img13.imageshack.us/img13/9611/background1bmq.jpg) la veo muy pequeña, podría ser por la imagen.

Gio dice...

Si =( eso es lo que pasa... La imagen del fondo es de 1024x768 px.
Entonces si veo mi blog en un pc con configuración de pantalla 800x600pix por ejemplo, queda grande. Si lo veo en uno de 1152x864pix queda pequeña, y así... Sólo se ve bien ajustado en 1024x768pix.

Encontré en un foro por internet alguien que dijo: "puedes tener una imagen de 1x3pix, y si le dices en el codigo que se ajuste al 100% debe verse en la pantalla completa.-"

Pero no dice cómo hacerlo...

Y en otra parte encontré:
"En el caso de una imagen de fondo que se ajuste al ancho de la pantalla es algo un poco más complicado:
body
div style="width: 100%; position: fixed; left: 0; top: 0; z-index: 0"
img src="fondo.jpg" style="width: 100%;" /
div
div id="contenido" style="z-index: 1;"
El resto del contenido de tu página irá aquí
/div" (borré los "<>" para poder publicar el post, sino no me dejaba)

Pero no he podido hacerlo funcionar :_(, Tienes algún consejo o alguna idea???
Gracias por anticipado ;)

Jaime Trujillo Escobedo dice...

Gio, tras haber visto el código que mandaste, pensé en que podrías probar a poner el fondo como indico en este post ya que amplia la imagen de fondo. ^_^

Yolanda dice...

¡Hola Jaime!

Según lo que comentas más arriba sobre donde ubicar este código, si lo hacemos en Configuación>Formato>Plantilla, ¿cómo especificamos la dirección de cada una de las fotografías que colguemos en nuestro blog? ¿No queda demasiado genérico de esta manera?

Y ni so se ubica el código donde indico anteriormente, ¿dónde más podría especificarse? Eso no me ha quedado claro.

Muchas gracias por tu ayuda.

Jaime Trujillo Escobedo dice...

Yolanda, al poner el código en la plantilla de entrada éste aparecerá automáticamente en las entradas. No quiere decir que se aplique a las imágenes de esa entrada.

Tendrás que rellenarlo con la dirección de la imagen que deseas proteger. La única diferencia es que aparece en tus entradas por si quieres utilizarlo.

Para incluir la dirección de una imagen en el código, ésta debe haber sido alojada antes. Puedes alojar imágenes en Photobucket o en el mismo Blogger.

Si tienes alguna duda házmelo saber. ☺

Yolanda dice...

Muchas gracias por tu ayuda, Jaime. La verdad es que anoche caí en la cuenta de cómo funcionaría realmente, dándole vueltas al coco mientras salía de paseo.

Muy útil, de verdad.

Un saludo.

Jaime Trujillo Escobedo dice...

Yolanda, me alegro de que lo hayas entendido. Es cierto que puede resultar lioso.

¡Saludos!

wwe-cv dice...

wooow en serio llevo 15 htlm y me los aprendy gracias a tu blog

Jaime Trujillo Escobedo dice...

wwe-cv! me alegra que te esté ayudando a personalizar tu blog :D.

Manuel Paniagua dice...

Hola, he puesto la frase en la plantilla de entrada pero luego le cambio la url y el texto y me aparece otra entrada nueva con la misma foto protegida.
Para proteger todas las fotos, tengo que copiar la frase tantas veces como fotos quiero proteger? y donde la pongo en cada entrada o en la plantilla?. Perdona por tanta pregunta, si puedes me lo explicas como a un niño de 2 años porque esto lo veo dificilillo. Gracias.

Jaime Trujillo Escobedo dice...

Hola Manuel. Así es, debes poner el código cada vez que desees proteger una imagen. Para no tener que copiarlo y pegarlo una y otra vez, puedes hacer uso de la plantilla de entrada que ofrece blogger (sobre la cual hablo en esta entrada).

El código debes ponerlo en las entradas del blog y añadirle la URL (dirección) de la imagen como muestro en la entrada.

Si necesitas cuaquier otra cosa dímelo.

Anónimo dice...

¿Cómo puedo proteger el texto de las entradas del blog sin nececidad de proteger las imagenes?

Es decir, sólo me gustaría proteger el texto y no las imagenes.

Gracias.

Jaime Trujillo Escobedo dice...

Anónimo, en ese caso debes realizar este otro truco.

Marga dice...

Hola Jaime, de nuevo por aquí aprendiendo cositas jejeje.

Una pregunta, hay algún truquillo para que se protegan todas las imágenes en lugar de alguna ??

Gracias !!!!

Marga

Evelyn dice...

Hola, habría alguna opción de proteger todas las imágenes a la vez?? Yo tengo puesto un protector que anula el uso del botón derecho del ordenador, y me funciona, pero no el del izquierdo, donde aparece la imagen en grande y ahí sí que se la pueden copìar. Gracias.

Jaime Trujillo Escobedo dice...

Marga, por el momento desconozco la forma de hacer lo que me pides. Intentaré buscar alguna forma de hacerlo (aunque dudo que sea posible).

Jaime Trujillo Escobedo dice...

Evelyn, eso sucede a causa de las URL que contienen las imágenes.

Intenta poner las imágenes de tu blog con este código:

<img src="URL DE TU IMAGEN"/>

Eso hará que la imagen no tenga enlace y por tanto que no sea posible hacer clic sobre ella.

Nota: ¿Cómo conseguir la URL de una imagen?

Marga dice...

Gracias Jaime, la verdad es que quería proteger solo algunas pero lo pregunté por si había la posibilidad y era más práctico.

Este finde lo probaré.
Un abrazo
Marga

Jaime Trujillo Escobedo dice...

Marga, seguro que algo existe por ahí ;).

Si necesitas cualquier cosilla avísame.

¡Abrazos!

María Angélica dice...

Hola Jaime...sabes te quería consultar sobre el código de proteger imagenes...no me resulta, seguro estoy haciendo algo mal ¿me ayudas?...Mira puse el código tal cual como lo muestras arriba, en la plantilla como dices...me fije que en la ventana de entrada nueva, aparecía...pero quería proteger las que ya están...entonces fuí a editar las entradas, pero no aparecía, lo puse debajo de la foto respectiva, pero no me resulta, sólo me aparece la imagen nuevamente, pero del tamaño que esta en photobucket...las tengo que volver a poner??...el código se pone bajo al foto, al comienzo de la ventana de entradas, al final???

Plis ayuda...de todo corazón gracias...
María Angélica

Rebeca dice...

Hola Jaime! Acabo de conocer tu blog y esta entrada me ha hecho pensar en los plagios que ultimamente vienen denunciando en diferentes blogs. Me he atrevido a poner en mi blog un enlace a este post por si a alguien le es de ayuda!
Muchas gracias por compartir esta informacion con todos!
Mi blog es: http://rebeca-micocina.blogspot.com/

Laube dice...

Ya me he suscrito a esta entrada para proteer mis fotillos.
Gracias Jaime!
Un besote

Jaime Trujillo Escobedo dice...

María Angélica, ¿Puedes mandarme las imágenes? Bastará con una para poder explicártelo de manera sencilla ;).

Puedes alojarla en Tiny Pic y escribir la dirección en tu comentario.

Jaime Trujillo Escobedo dice...

Rebeca, completamente de acuerdo contigo, debo darte un millón de gracias por haber incluido mi enlace en tu blog (que por cierto, tiene una cabecera preciosa) :D.

¡Recibe un gran abrazo!

PCSolution Staff dice...

Hola Jaime, tu blog está DEMASIADO BUENO, una pregunta, como puedes cambiar las imágenes de los comentarios? eso me serviría mucho, me imagino como es: reemplazando una entrada con la url de la imagen y el texto, pero me gustaría saber cual, gracias!

Jaime Trujillo Escobedo dice...

PCSolution Staff, en esta entrada encontrarás la forma de ocultar los iconos de blogger en los comentarios y poner cualquier otro y en esta otra te enseño a distinguir los comentarios del autor con un icono ;).

SOUVENIRS Y RECORDATORIOS dice...

Hola Jaime muy buenos tus aportes y ayudas que nos dan, pero no he podido bloquear las imagenes de mi blog, me puedes ayudar por favor. Mira, en editar entradas yo las inserto como imagen y copio la url como dices y voy en la misma entrada a HTML y pego lo que dices pero nada, me aparece encima de la foto un cuadrito pequeño con una X, estoy perdida o donde debo de hacer esto. Mil gracias. Ana Lucia

Ana Lucia dice...

Hola Jaime ya pude quitarle la url a mis fotos para que no las copien, que maravilla!!! MIL GRACIAS!!!!

Jaime Trujillo Escobedo dice...

¡Qué bien, Ana Lucia! A partir de ahora las imágenes de tu blog quedarán protegidas ^^.

Anónimo dice...

Hola Jaime, te doy las gracias tu blog, está genial y me fué de gran ayuda para protegerme contra el plagio de imagenes pero... lo que no contaba es que siguen plagiando mis fotos con la tecla "impr pant pet sis" (captura de pantalla)

El motivo de mi mensaje es que en este momento me siento desesperada pues tengo varios meses buscando en diferentes foros algun codigo html javascrip que pudiera insertar en un gadget para intentar bloquear dicha tecla para que eviten capturar la imagen de la pantalla completa de mi blog y luego intenten recortar las imagenes capturadas con el paint, hasta el momento creo que no hay solución para bloquear la tecla "impr pant" pero ¿habrá algun codigo que haga que se borre el portapapeles cuando alguien intente copiar mis fotos?, he encontrado un codigo que si lo hace pero el problema es que aparece una ventana que pregunta si realmente deseas tener acceso al portapapeles, si le aplastas "si" ya no pueden plagiar por que se bloquea la tecla, si le aplastas que "no" queda de nuevo el blog sin proteccion listo para ser plagiado y yo no quería eso...ando en busca de un codigo que no me dé esos problemas, todo esto me esta provocando un dolor de cabeza tremendo...ojala pudieras publicar en tu blog algun codigo que pudiera borrar el portapapeles sin que tenga esos inconvenientes...

muchos de los usuarios que leemos tu blog creo que tambien estan pasando por la misma situación y nos sería de gran ayuda...

Saludos desde Sinaloa, México

Jaime Trujillo Escobedo dice...

Hola, Anónimo. Antes que nada te doy la bienvenida al Balcón.

Bueno, en cuanto al tema del que hablas, debo decirte que conozco un método para bloquear la tecla IMPR Pant pero únicamente funciona usando Internet Explorer, por lo que si el usuario que desee copiar el contenido, puede hacer uso de otro navegador :S.

Personalmente pienso que esto pondría una barrera más pero siempre es mejor esperar a un truco que funcione en cualquier navegador.

Fede dice...

Es otro muy buen recurso Jaime! pero creo que para mi lo mejor son las marcas de agua, y si estan encima de otra imagen, mejor! como las uso en mi blog, un saludo!

Jaime Trujillo Escobedo dice...

Estás en lo cierto, Fede. Las marcas de agua, además de proteger las imágenes, dificultan su edición por lo que -dependiendo en donde la coloques- el lector tendrá que deformar bastante la foto si quiere copiarla.

Driwrgy dice...

Es muy interesante esta opción para proteger el blog anti copiones.... pero me queda una duda, en este caso en concreto, hay que proteger una a una cada foto que subas? Si una entrada tiene por ejemplo 3 fotos, se protegen las 3 de forma automática con el truco que le has dicho a Picca o hay que proteger una a una? Ayhs, qué lío y perdona que el primer día resulte tan pesada e insistente pero necesitaba cambios en mi tus trucos algo voy consiguiendo, jejeje. Bss.

Driwrgy dice...

Qué son las marcas de agua? Como conseguir ese efecto? Qué de cosas nuevas estoy aprendiendo hoy, Jaime! Gracias por todo!

Jaime Trujillo Escobedo dice...

Driwrgy, habría que incluir el código a cada imagen de la entrada, no funciona de manera automática :S. Por otra parte, puedes utilizar el truco para bloquear el botón derecho del ratón, lo que evitará también el plagio en imágenes.

En cuanto a las marcas de agua... tan solo es texto sobre una imagen. Una firma o la dirección de tu blog sobre una foto puede actuar como marca de agua, lo que evita en muchas ocasiones lo que este truco pretende evitar.

Puedes hacer marcas de agua con Microsoft Paint, por ejemplo: abre una imagen y selecciona después la herramienta texto para introducir una frase.

Flavio dice...

Hola Jaime ,te felicito por tu sitio.
El problema que tengo con mi plantilla que al querer reformar las entradas con este codigo funciona muy bien,pero al volver a abrir la pagina me lo altera poniendole a la imagen el link de edicion del post.
Agradeceria tu ayuda gracias.

Jaime Trujillo Escobedo dice...

Flavio, ¿Pero querrías ocultar dicho icono? Necesito la dirección de tu blog para poder ayudarte.

Fuentecillas dice...

Hola Jaime.
Aquí andamos de nuevo, dudas y más dudas sin descanso.
Como puedo proteger las imágenes de una galería picasa, es decir, las tengo en una entrada normal la galería .¿ A donde exactamente copio lo que nos comentas? Antes , después, al final o no sirve de nada en este caso concreto.
Hay que larga la explicación hijo que no acabo. A la ya esta, casi o quizás hay otra forma?
Ahora si,saludos

Jaime Trujillo Escobedo dice...

¡Hola Fuentecillas! Prueba a encerrar el código de la galería en estas líneas:

<div oncontextmenu="alert('TEXTO');return false" oncopy="alert('TEXTO');return false">
AQUI EL CODIGO
</div>

No olvides hacerlo en el modo "Edición HTML" del editor y no en "Redactar".

Espero que eso solucione tu consulta. ¡Abrazos!

Fuentecillas dice...

Hola Jaime
¿ a qué te refieres con el código? Que corta soy hijo.
Propiedad de imagen , dirección, donde esta la imagen, o que exactamente.
Es para un nuevo proyecto y encima me piden ayuda a mí ¡¡ Imagínate el lió¡¡
Bueno espero.

Jaime Trujillo Escobedo dice...

Fuentecillas, ¿La galería de picasa está en una entrada? Si es así, tan solo debes pegar todo el código que la forma (y que previamente obtuviste en picasa para incluir el artilugio en tu blog) en el lugar indicado (en un div, tal y como explico en el comentario 49).

Si sigues sin poder hacerlo avísame. Estaré encantado de ayudarte.

Producciones del ArMario dice...

Muchas gracias por la aportación!! haces sentir más seguros a los innovadores de ideas!!

Fuentecillas dice...

Hola Jaime.
Aquí tu pesadilla, lo he hecho pero no pasa nada extraño, cerradita no da opción a copiar .. pero si pinchas se abres la galería,y se puede copiar.Hemos incluido una marca de agua( Creo que se dice así) propiedad de..
Aún habiendo configurado picassa para que no descarguen , se puede.
¡¡ ay que estrés¡¡Cuanta guerra te doy.¡¡
Fuen.
P.D logre lo del formulario, aunque queda muy abajo del texto, pero casi que me conformo y todo.
Gracias por tu infinita paciencia.¡¡ -tienes el cielo ganado , que diría mi madre¡¡

Jaime Trujillo Escobedo dice...

¡Cierto ArMario! Con este truco incluiremos una barrera más para todo aquel que desee plagiar el material protegido.

Jaime Trujillo Escobedo dice...

¡Hola Fuentecillas! En primer lugar me gustaría solucionarte lo del formulario ya que se trata de algo muy simple. Envíame la dirección de la entrada en la que lo has incluído y listo.

Para proteger el contenido de la galería te aconsejaría utilizar marcas de agua con el nombre o la dirección del blog ya que, por muchos scripts que instales, las fotos de una galería se podrán copiar con la tecla Impr Pnt del teclado o con un simple capturador de pantalla.

Si descubro alguna alternativa no dudaré en comentártelo.

Raruto_n dice...

graciaaaaaaaaaaaaassssssssssssss kpooooooooooooooooooooooooooooooooooooo sosun groso

CEIP Sardina del Norte dice...

Hola Jaime. Como siempre encuentro todo lo que necesito en tu blog. Gracias por compartirlo.

Como podrás averiguar me interesa eso de proteger una imagen para que no la copien tan fácil pero tengo una duda. Dices que hay que subirla a un alojador para obtener una url y si subes esa imagen no se hace pública en internet y otros la pueden copiar?

Saluditos, Dulce.

Jaime Trujillo Escobedo dice...

Dulce, al alojar una imagen utilizando el propio editor de blogger y obtener su URL no correremos el riesgo de hacerla pública. Las imágenes alojadas en blogger se almacenan en los álbumes web Picasa por lo que bastará con ocultar el enlace al álbum perteneciente a tu blog.

Dulce dice...

Perdona que te conteste tan tarde pero he estado un pelín liada. No se como se utiliza ese editor. Y si las subo al programa ese donde sale una ranita? Y le doy a privado? Nadie más que yo la podrá ver verdad? O deberia usar ese de blogger para más seguridad?

Jaime Trujillo Escobedo dice...

Tranquila Dulce. El editor de blogger lo conoces más que de sobra pues al crear las entradas del blog debe utilizarse. Bastará con crear una entrada en la que subirás las imágenes escogidas para posteriormente publicarlas. Cuando publiques esta entrada de prueba, obtén la URL de cada imagen. Finalmente, accede al apartado 'Editar entradas' de blogger y elimina la entrada de prueba.

También puedes hacer uso de Imageshack aunque presenta ciertas desventajas tales como la caducidad de las imágenes o la carga de éstas (que afectarán a la carga del contenido).

Anónimo dice...

Thanks for the info! We're making a custom pair of slippers for you :)” oh wow thank you!!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo