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.

sábado, 10 de enero de 2009

Como diseminar imágenes en el texto a ambos lados

Acaban de hacerme esta consulta.
Ya tengo aquí una entrada hecha con este sistema, la que explica como poner un enlace en un texto, así que voy a explicaros como hacer algo similar.
Para demostrarlo con imágenes voy a usar esta entrada que estoy haciendo. Le iré colocando imágenes e iré capturando la pantalla conforme lo haga. De esta forma podreis ver cómo se hace "en directo".
Para empezar voy a capturar esta pantalla que tengo ahora delante, y tras recortar un trocito de ella lo colocaré al principio de la entrada.


Bien. Ya colocada la primera, voy a subir la segunda. La anterior le he dicho que la colocara a la izquierda. En ésta le diré que la coloque a la derecha.
Como se que la imagen estará arriba de todo, en cuanto haya subido pincharé en la pestaña Edición de HTML para ver los dos códigos.
Podrás ver en la siguiente imagen, (que como será muy ancha estará en el centro), como se ven los códigos de las imágenes en el HTML.


Ya se que esta imagen se ve mal. El original es más ancho que lo que el sistema considera oportuno y me la ha reducido, pero al estar subida aquí vais a poder pincharla para verla al natural, y encima le diré que lo haga en otra ventana.
Ya llegaremos a esto.
Sigamos con la explicación. Ahora voy a mostrarte como copiar y pegar el código de la imagen que he subido a la derecha, en el lugar que quieras.


Como ves, he seleccionado el código que hay encima, y que siempre corresponde a la última imagen que subes, y lo he copiado.

Ya sabes como se hace, ¿no?
Seleccionas con cuidado el texto que quieres copiar y se pone azul. Pinchas en lo azul con el botón derecho del ratón y sale este menú. Pinchas en copiar y lo seleccionado se copia en la memoria temporal del ordenador.
Una vez copiado, he bajado hasta el punto anterior a la primera letra del texto que iba a quedar a la izquierda de la segunda imagen y ahí he pegado lo copiado. Luego he vuelto a subir y he borrado de allí ese código, para que la imagen no se repitiera.


Y aquí, a tu derecha, puedes ver un fragmento de ese código ya pegado entre el texto.
Verás que he remarcado el código con una línea roja y que bajo ese código ya hay algunas de las palabras que se pueden ver a la izquierda de aquella segunda imagen.
El problema que se nos presenta en estos casos es que el texto empieza a separarse de forma alarmante, creando grandes vacíos entre párrafos.
No es problema.
He ido preparando esta entrada, cambiando imágenes de sitio cada vez que subía una, y al final, cuando ya no iba a subir ninguna más, he repasado el HTML, y he ido pegando los párrafos, retrocediendo las líneas, hasta que ya no han quedado espacios entre ellas.
Si tienes muy claro lo que estás viendo, puedes incluso borrar todos los <div> y los </div> y los <p> y los </p> que te irás encontrando diseminados por el texto, pero si no es tu caso, déjalos donde están. Simplemente elimina las líneas vacias, retrocediendo hata que queden pegadas una debajo de otra.
¡Ah, si! Te había dicho que te enseñaría como hacer que una imagen, que desees que se pueda ver en su tamaño correcto, se abra en otra ventana.

Es muy sencillo.
Esto es el código que blogger da a una imagen cuando la subes:
<a href="direccion del alojamiento la imagen"><img src="dirección de la imagen y otros detalles de estilo"></a>
Simplemente has de añadir lo de target="_blank" detrás de las comillas de cierre de la direccion del alojamiento.

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

Mercedes dijo...

Hola, Eulalia:
Eres genial. Ya he conseguido incluir una entrada de blog salpicando imágenes a lo largo del escrito. Parece que no era dificil, sólo ir subiendo imágenes, pinchando el HTML para capturar el código de la imagen, pegarlo en el sitio del escrito donde quieres que aparezca esa imagen (borrar ahora ese código de donde lo capturaste para que la imagen no aparezca doble) y seguir haciendo lo mismo con el resto de imágenes. La "vista previa" nos da idea de cómo va quedando por si hay que desplazar el texto para ajustarlo.
Ya ves, muy fácil, pero si no es con tu inestimable ayuda, esto no lo averiguo yo ni de coña.
Ya se lo he dicho a mi amiga para que lo haga así en su blog.
Un millón de gracias y 2009 besotes de año nuevo.

Eulalia dijo...

Jajajajja. Si es que a veces las cosas son más sencillas de lo que nos creemos.
También se pueden arrastrar, pero no siempre resulta fácil ponerlas en el lugar adecuado, ya que no ves todo el texto, mientras que con este sistema, aunque parezca más complicado en realidad es más simple.
Besos.

bardinda dijo...

Me ha resultado interesante tu spot, pero yo quisiera consultarte ¿cómo puedo poner a ambos lados del blog las cosas?

Un saludo y gracias

Eulalia dijo...

bardinda:
Veo que tienes una dots.
Lo que tu quieres es ponerle otra columna lateral.
En esta plantilla tuya aún no lo he hecho, pero no ha de ser difícil.
De todos modos, probaré a hacerlo en el blog que tengo tuneado con tu plantilla y si sale bien te avisaré.
Si quieres echarle una ojeada, es éste. De momento le he colocado una cabecera normal.
Saludos.

GANEDINEROPORINTERNET dijo...

Buscando la solución a mi problema he encontrado este blogs eulalia muy bueno excelente, porque yo ando igual que muchos aqui, tengo un problema con los comentarios, hice lo que tu señalas arriba, me meti en configuración luego diseño, editar etc. pero me dejan los comentarios para que los revise luego los reviso le doy a publicar y me dice que no existen base para moderar y no me lo publican y se pierde el comentario, a quien le ha sucedido esto y como lo solucionó gracias

Eulalia dijo...

Amigo mio, no tengo ni idea.
Ya ves que soy franca.
Últimamente me están llegando consultas con todo tipo de problemas a cual mas extraño.
Yo diría que todos estos problemas son de blogger. Algo en su sistema no acaba de funcionar y surgen errores en cosas que hasta ahora habian funcionado bien.

Quizá han añadido algún código a las plantillas que se da de patadas con algún otro que ya había, o no lo se.

Te recomendaría que entraras en Ayuda de blogger y dejaras allí la consulta.
A ver si a base de quejas se deciden a revisar qué está pasando con las plantillas.

Saludos y gracias por la visita.

Fabiola dijo...

Hola, tu blog me ha sido de mucha ayuda, gracias por compartir lo que sabes,

Muchos saludos,
Chauu

Fabiola dijo...

MUY BUENO EL BLOG QUIERO HACER UNA CONSULTA AL CAMBIAR LA PLANTILLA DE MI BLOG EN LAS ENTRADAS DE MIS AMIGAS LE APAREZCO CON UNA ENTRADA ANTIGUA Y NO SE RENUEVA Y ELLAS ME DICEN APARECES COMO QUE NO HAS ENTRADO A TU BLOG POR 6 SEMANAS NO SE COMO ARREGLAR ESO Y ES DESDE QUE CAMBIE LA PLANTILLA ME PUEDES AYUDAR SALUDOS FABY

Eulalia dijo...

Hola Faby:
Sinceramente no se a que puede ser debido.
Le he echado un vistazo a tus dos blogs y usas plantillas normales, de blogger.
¿Solo le has cambiado la plantilla?
¿No has añadido nada?
Porqué a una amiga le pasaba ésto que cuentas, y el problema era un contador de sitemeter que había añadido al blog.
Si no has añadido nada, no se a que pueda deberse este problema.
Prueba a volver a poner la plantilla anterior, u otra distinta y haz una entrada. Pregunta si se ve que la has hecho, o pon en tu otro blog la lista de blogs y añade el tuyo propio, para verlo tu misma.
Si se actualiza, es que la plantilla tenía algún defecto.
Si tampoco se actualiza, ya no se qué más puedes hacer.
Saludos.

Claudia y Luciano Platt dijo...

Eulalia,veo tu sitio seguido ya que explicas muy ckaramente y como soy novata en esto de armar blog´s me ayudas a comprender mejor cuando quiero hacer algo y no sale como me gustaría asi que muchas gracias! por tu sitio y compartirlo con tanta calidez
un abrazo
Clau

Nutella dijo...

yo tenia una nueva pregunta...
¿como pongo entradas en los lados del blogger? es que he visto varios y me gusta como queda, son entradas pequeñas con fotos también pequeñas y bueno, espero que me puedas ayudar gracias.