Insertar imágenes en BLOGGER: detalles

Este post va dirigido a los que tienen un blog en BLOGGER. Ya habréis leído en más de un blog que ahora es posible insertar imágenes fácilmente, quedándose almacenadas en el servidor de BLOGGER. Tenéis unas breves instrucciones (en inglés) de cómo hacerlo en la página oficial.

A continuación os daré alguna otra sugerencia que allí no se comenta, para que tengáis más posibilidades a la hora de trabajar con esas imágenes. Intentaré ser didáctico al máximo para que incluso los no-programadores me sigan.

Lo mejor es hablar con un ejemplo. Como la imagen que tenemos debajo de este párrafo. La he subido tal como se explica allí (con el botón "Add image"):

Como la foto original que tengo en mi PC es de 600 pixeles de ancho (demasiado grande para el blog!) le he indicado Image size: pequeñas. Entonces BLOGGER ha creado una miniatura que es la que veis en el post. Así que ahora BLOGGER tiene dos copias de la imagen: la miniatura y la de tamaño original. Lo más interesante viene ahora. Al hacer clic sobre la miniatura, se os abrirá la foto en tamaño original.

Lo que quiero enseñaros aquí son dos cosas: 1) hacer que la imagen en tamaño natural que aparece al hacer clic sobre la miniatura aparezca en otra ventana, y no en la misma ventana que el post. 2) cambiar el enlace de la miniatura para que al hacer clic sobre ella vaya a otra dirección y no a la foto original que pone BLOGGER por defecto.

Paso previo
Para poder hacer estas cosas tendréis que trabajar sobre el texto de vuestro post en el modo Edit HTML. Porque permite acceder al código! Una vez estáis en esa modalidad de edición del post, veréis que donde ha insertado la imagen hay un texto como este:

<a href="http://photos1.blogger.com/blogger/679/1095/1600/leonas1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/679/1095/200/leonas1.jpg" border="0" alt="" /></a>

1) Abrir enlace en otra ventana

Tenéis que añadir target=blank en el siguiente lugar:

<a target=blank href="http://photos1.blogger.com/blogger/679/1095/1600/leonas1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/679/1095/200/leonas1.jpg" border="0" alt="" /></a>

2) Redireccionar el link a otra dirección

Tenéis que cambiar la propiedad href, por ejemplo:

<a target=blank href="http://www2.udec.cl/~fralarco"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/679/1095/200/leonas1.jpg" border="0" alt="" /></a>

Probad como quedaría aquí:

Bueno, espero que se haya entendido todo. Se aceptan preguntas, y por supuesto sugerencias. Que sepáis que BLOGGER pone a disposición de cada usuario un límite de espacio para almacenar fotos. Creo que unos 30MB. Así que usadlo bien y no subáis fotos muy grandes o con mucha resolución (muchas MB!!). Además, eso entorpece la navegación sobre todo a nuestros lectores con menos ancho de banda :)