Este blog está dedicado a quienes, al igual que yo cuando empecé, se sienten más perdidos que un pulpo en un garage al pinchar en algún sitio de su blog.

miércoles, 19 de enero de 2011

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.

20 respuestas. Y a ti ¿te ha sido útil?

ANRAFERA dijo...

Muy interesante.Gracias. Saludos.
Ramón

Sadness dijo...
Este comentario ha sido eliminado por el autor.
Hitmontop dijo...

Hola. Una pregunta que no tiene que ver precisamente conla entrada, pero que hace mucho trato de resolver. Tengo un blog en blogspot cuyas entradas son programas en c++. Estos programas son escritos en el editor vim, con el cual puedo convertir automaticamente a html. El problema es que
cuando copio y pego el codigo en la entrada no obtengo lo que quiero, que es numeracion y la sintaxis del programa resaltada. Este problema tambien lo tengo con el editor kate. Y no me funciona escribir el codigo directamente en la entrada porque hay problemas con las incdicaciones #include que llevan todos los programas. Supongo que es una duda muy especializada, pero agradeceria cualquier ayuda. Tu blog es muy bueno.
Muchas gracias.

Eulalia dijo...

Hola: Desconozco estos programas pero, ¿has probado a escribirlo en el editor de HTML de la entrada?

Por otro lado, si tratas de publicar códigos que incluyen los simbolos <> has de escribirlos así:
En lugar de < has de poner < y en lugar de > has de poner < (punto y coma incluido en ambos casos)

Ya me contarás

Eulalia dijo...

Vaya, veo que no se ha publicado lo que has de escribir en lugar de los simbolos esos. Te lo voy a repetir dejando un espacio entre cada signo. Luego solo has de eliminar esos espacios.
En lugar de < has de escribir:$ l t ;
Y en lugar de > has de escribir & g t ;

Como digo sin espacios.

Hitmontop dijo...

Hola, Eulalia. Muchas gracias por tu ayuda y por responder tan pronto. Se agradece. Hay poca gente que responde en los bolgs. Afortunadamente ya resolví el problema, y te cuento por si alguno de tus lectores se encuentra con algo similar. Como te dije y te diste cuenta, mi problema inicial era que no podia copiar y pegar porque no aparecian los signos mayor y menor. Pero como escribo en vim, que es un editor que incluye numeración de renglones y resalta la sintaxis del programa, algo muy importante, y que además exporta los archivos automáticamente como html, quería copiar el código de ahí, pero la entrada no se guradaba, a pesar de que el navegador abría el archivo html muy bien. La razón era que el código generado crea sus propios encabezados, y yo lo pegaba en la entrada, que ya trae el encabezado incluído, así que le enviaba yo esa información dos veces. Lo que hice fue quitar el encabezado hasta donde aparece la instucción head. Esto me lo dijo un amigo al que le estoy muy agradecido. La verdad es muy bueno que haya foros como los de tu blog.
Saludos.

Melodi, la neurona que piensa dijo...

Buenaaaas!!
Muy interesante tu blog!! Sigue así ;) avanzando!!
Bueno pues ya que ando por tu mente te dejo mi blog por si te gusta leer literatura personal, una literatura optimista y feliciana que te ayudará a cambiar esos pensamientos negativos que puedas tener acerca de la vida, además de poder entretenerte con mis pequeños escritos de microrrelatos, reflexiones, poemas, relatos, debatir sobre la sociedad, hacer peticiones literarias para que yo posteriormente las escriba y por supuesto hacer publicidad de tu blogspot en la pestaña "Aquí tu blog" para compartir con el resto de bloggeros tus inquietudes.

http://insolitadimension.blogspot.com/

Únete si resulta de tu agrado y si no pues otra vez será. Gracias ^^

Mª José dijo...

Que suerte encontrar este blog!!!
Un saludo y te sigo

soledad dijo...

Gracias Eulalia ,por todo el trabajo que haces para enseñarnos.
A mi me cuesta muchiiissiiimmooo esto,pero con tu ayuda lo voy entendiendo.
Eres un solete gracias,gracias,gracias...

Satoshi dijo...

se que no tiene que ver con esto es que no consegui quien mas ayudara, bueno tengo mi blog como vez y nunca me a dado problemas hasta hoy donde quiero publicar una nueva entrada redacto todo y solo aparece el titulo el resto de lo que redacte no :/ desearia ayuda con esto en verdad gracias

Gonzalo dijo...

Muy buen Blog, te recomiendo que uses Adweblink.com es un sitio web para rentabilizar tu pagina web, vas a tener mejor posicionamiento, mayor numero de visitas y lo mas importante, vas a empezar a ganar dinero... Yo lo estoy usando hace unos meses y ya tuve mi primer pago :D... Saludos !

pasaroto dijo...

muchisimas gracisa me fue de mucha utilidad y me resulto muy facil gracias nuevamente

Quince telas dijo...

Eulalia, acabo de descubrirte y eres mi diosa. Necesito saber dos cosas muy elementales: cómo eliminar el gadget "atributions" que aparece en el pie de mi blog (tal vez no se pueda) y cómo poner las flechas y la casita de home que usas tú para ir adelante y atrás.
Mil gracias

Eulalia dijo...

Quince telas:
No veo tu blog en tu perfil, así que no se decirte si eso que preguntas se puede hacer.

En cuanto a los iconos, eso es un truco que explico aqui

P.S. Si antes de entrar te sale un aviso de que no es seguro, no hagas caso, mi blog es seguro. Se trata solo de un tema de dominios que aún no he podido solucionar, pero no hay virus ni nada malo en mi blog, así que dale a Continuar igualmente sin problema.

Lourdes dijo...

Gràcies per crear aquest blog, fa poc que tinc blog i necessito saber cosetes. Acabo de fer-me seguidora teva i en aquest moment no surt la meva foto al grup de seguidors, i fa un rato sortia. Quines coses mes rares. Petons i ja aniré visitan-te.

Eulalia dijo...

Lourdes:
Aixo de les imatges del gadget de seguidors es un expediente X :)
Una abraçada

María Gutierrez dijo...

Muy bueno, pero el problema de los blogueros que deseen hacer que sus posts sean mucho más vistosos es si la imágen que se consigue está o no con Copyright porque poner una imagen con derechos puede resultar en un gran problema para el pobre bloguero.

Las multas de infracción por Copyright son escandalosas, por eso es mejor andarse con mucho cuidado.

Rosa D Fez dijo...

Me ha encantado tu blogg!! Voy a poner algunas cosas en practicas en el mio!! te lo dejo por si te queires pasar!! espero que me puedas ayudar si tengo alguna dudaaa....

http://malagartesaniadefez.blogspot.com

jose batres dijo...

Muy bueno trabajar en eso

Mishelle Pino dijo...

Aprendi que blogger almacena las imagenes en el álbum que crea para cada blog en Picasaweb y luego las muestra en un tamaño adecuado al espacio del que disponemos. gracias otra vez! Mishelle Pino I de Bachillerato B