Poner imágenes en una entrada (sin añadirlas a la entrada)

Hay ocasiones en las que queremos añadir imágenes a una entrada pero no queremos que puedan abrirse aparte, ya sea porqué no hace falta o por cualquier otro motivo, pero si las subimos directamente al blog, mediante la herramienta de añadir fotos, siempre se abrirán aparte al pincharlas.

Esto se debe a que blogger las almacena en el álbum que crea para cada blog en Picasaweb y luego las muestra en un tamaño adecuado al espacio del que disponemos.

Cuando añadimos una imagen a una entrada por este sistema, si pinchamos en la pestaña Edición de HTML, veremos un código muy largo, que blogger añade para poder mostrar la imagen, en el que hay la dirección de la imagen, la posición de la misma en la entrada, la medida que muestra y varios detalles más.
Dicho código es, al mismo tiempo, un enlace a la imagen del álbum, por eso, cuando se pincha, la imagen se abre mostrándose en su medida original, si fuera mayor que la mostrada, o simplemente en la misma medida, pero sin la entrada.

Para que no se abran, podemos añadirlas directamente al HTML de la entrada, pero para ello primero tendremos que subirlas al álbum, (o a cualquier otro servidor), a fin de que les den una dirección que podamos usar para que se vean.

Si queremos usar el propio álbum, podemos acceder a el y subirlas directamente, como explico en esta entrada, si no disponemos del programa Picasa, o a través del programa, si lo usamos. En éste caso puedes elegir subirlas al álbum del blog, a cualquier otro álbum que tengas, o crear uno nuevo.
Una vez subidas al álbum, ya podremos añadirlas a nuestra entrada sin problema.

Para ello deberemos trabajar con dos ventanas (o pestañas), de nuestro navegador.
En una de ellas abriremos nuestro blog y pincharemos en Entrada nueva, a fin de empezar a escribirla.
En la otra abriremos el álbum donde estén las imágenes que queramos añadir a la entrada.
También podríamos usar dos navegadores, uno para cada ventana. Esto queda a gusto de cada cual.

Una vez las dos ventanas o pestañas preparadas, seguiremos estos pasos:

1º.- En la ventana donde está el álbum.
Si tenemos la vista de miniaturas, pincharemos en la imagen que queramos añadir a fin de que se abra sola.
(Si esta frase te crea dudas, mira esta entrada).

2º.- En la ventana del blog.
En cuanto queramos añadir la imagen, pincharemos en Edición de HTML .
Allí verás el texto que hayas escrito hasta el momento. Le damos a Enter para que la imagen se coloque debajo de lo escrito, (si queremos que quede una línea de separación entre el texto y la imagen, le damos 2 veces a Enter) y escribiremos: <img src="

3º.- En la ventana donde esté la imagen a añadir.
La pincharemos con el botón derecho para saber su url.

Si usamos Firefox, o Google Chrome, o algún otro navegador que no sea Internet Explorer, al pinchar la imagen con el botón derecho, en el menú que aparece, se ve la frase Copiar URL de la imagen. (O cualquier otra similar, cada navegador lo expresa a su manera, pero siempre has de mirar que diga URL de la imagen o dirección de la imagen).

Si usamos Internet Explorer, al final del menú veremos Propiedades.

4º.- Pincharemos en lo que corresponda, Copiar URL o Propiedades, con el botón izquierdo.

4º/a.- Si se usa Internet Explorer, al pinchar en Propiedades se abrirá una ventanita en la que se ve la URL. La seleccionaremos y la pincharemos con el botón derecho para que se abra el menú. Allí pincharemos en copiar.

En cualquier caso, una vez pinchado en Copiar, del menú de Internet Explorer, o en Copiar URL de la imagen, de cualquier otro navegador, volveremos a la ventana del blog.

5º.- En la ventana del blog.
Pegaremos la dirección que hemos copiado, detrás de las comillas y añadiremos ">
Le damos a Enter para que el cursor se coloque en la línea de abajo.
Si queremos que quede un espacio entre la imagen y el texto, le damos dos veces a Enter.

Esto nos dará un código así: <img src="aquí estará la dirección de la imagen">

6º.- Sin salir de Edición de HTML.
Si queremos seguir escribiendo, teclearemos la primera palabra del resto de la entrada, a fin de saber donde escribir cuando volvamos a Redactar.
Si queremos añadir otra imagen, repetiremos los pasos anteriores.

Estos pasos harán que la imagen quede a la izquierda. Si queremos centrarla, antes del código de la imagen escribiremos: <center> y al final del código escribiremos </center>
Con esto el código de cada imagen será así:

<center><img src="la dirección de la imagen"></center>

Si la imagen es más grande que el espacio del que disponemos para las entradas es posible que, o bien se vea cortada, o bien se salga del espacio y nos eche hacia abajo la columna lateral.
Para evitarlo le añadiremos el dato del ancho, antes de src, de esta forma:

style="width: XXXpx;" siendo XXX el ancho que ha de tener para que se vea entera dentro del espacio de la entrada.
Si ignoras cual es el ancho del que dispones, pon 450px y si luego, al publicarla y ver la entrada, te parece que todavía es muy grande, o que podría ser más ancha, solo tendrías que Editar la entrada, buscar el dato en la pestaña Edición de HTML y modificarlo.

Con este dato el código ha de quedar así:

<center><img style="width: XXXpx;" src="la dirección"></center>

Y con este truquillo, cuando le des a Publicar, tus imágenes se verán, pero no se abrirán aparte.