[Tutorial] Poner imágenes juntas

Este tutorial ya lo puse en el Club Cadena de favores, pero os lo pongo por aquí por si a alguien le sirve :)

Muchas veces se quiere poner dos o tres imágenes juntas ya sea para poner en un menú o para enseñar cualquier cosa, pero blogger no nos lo permite, una sale más alta que otra, y a mí particularmente me molesta, para ello, os pongo el código, es muy simple:

10/04/2013 -> Aviso se me han borrado todas las fotos del blog, he podido recuperar algunas, lamentablemente, en esta entrada me ha sido imposible recuperarlas todas, para saber más: Problemas técnicos por Google+.






Quedaría así:

[¡A tener en cuenta!]
* Se tienen de tener las imágenes enlazadas a alguna web, en mi caso las tengo en *Photobucket*.
* Os he puesto el código en negrita para que veáis cuando empieza una imagen y cuando termina la otra.
Para poder poner una cuarta imagen, tan sólo copiar el código.
* Medidas, mis medidas las puse a "120" pero se pueden poner las que se quiera.
* Si alguien desea que con el enlace se abra a una ventana aparte, tan sólo tiene de poner

* Si alguien no desea linkear la imagen, tan solo debe quitar lo siguiente:

Con "blogger/dirección" me refiero a cualquier enlace a vuestra página web: en mi caso sería mi blog.

Por si hay algún lío, os lo pongo sin los enlaces o links.


Y aquí os lo dejo en imagen para que se vea mejor lo que es la imagen y lo que es código:

Creo que eso es todo, si alguien necesita algo más, que se ponga en contacto conmigo. Un beso!!

27 comentarios :

  1. Muy útil Pinki, gracias.
    Un besote!!

    ResponderEliminar
    Respuestas
    1. De nada cielo! Si tienes alguna pregunta por aquí estaré :D

      Eliminar
  2. Thankiuuuuussss!! Si es que tengo que quererte!!!!!
    Ahora me pongo al lío.
    A ver que tal me queda. Deséame suerte, porque con lo torpe que soy...Me haré también un bucket de esos.

    ResponderEliminar
    Respuestas
    1. Era eso? Genial! Pues ya me dirás si te sale, creo que esta bien explicado, pero si tienes alguna duda me lo dices.
      Ah! y la cuenta de Photobucket es gratuita, que se me olvido comentarlo.

      Por cierto, estoy haciendo un tutorial para hacer banners de concursos con photoshop ;)
      Besossss.

      Eliminar
    2. Ok :D
      Pero en el tuto, di donde conseguir el programa XD
      Me va a venir de perlas, con las imagenes cutres que he subido :p

      Eliminar
  3. Pues así siempre lo he hecho, mi problema es que tengo que hacer mucho más chicas las imágenes para que queden juntar, o sea en una entrada quiero cuatro imágenes una al lado de otra, pero solo aparecen dos o tres y la otra se va para abajo >.< y claro, dirás "el tamaño" pero ¡no! les pongo el tamaño necesario y ni así :/
    Saludos.

    ResponderEliminar
    Respuestas
    1. Pues si en "width" poniendo un valor más pequeño no te sale (por ejemplo 75 px) y fijándote si cada vez que pones lo de "a" y "a href"(con sus cierres correspondientes) esta junto, sin espacios.
      Quizá sea que la parte donde escribes no te deje poner mucho texto y/o imágenes, puedes mirar que valores tienes establecidos y cambiarlos.
      Te recomiendo que guardes una copia por si acaso, yo tengo la interfaz antigua de blogger, así que te guío desde ahí, ves a: "Diseño" - "Edición en html" - "Expandir plantilla de artilugios"
      Y busca algo por este estilo:
      " b:template-skin "
      " b:variable default='960px' name='content.width' type='length' value='1010px' "

      Y ves jugando (queda fatal decirlo así, jajaja) con las medidas del blog. Te he puesto los que tengo en mi blog, pero tu ves probando, antes de guardar, dale a vista previa.
      Y si ya no es eso, me pasas las imágenes y te lo intento hacer yo.
      Un saludo!!!

      Eliminar
    2. Tuve de borrar mi comentario y escribirlo de nuevo ya que no me permite poner formato html, lo que va con "" serían los símbolos de mayor que y menor que, respectivamente: http://www.disfrutalasmatematicas.com/igual-menor-mayor.html

      Eliminar
  4. Halaa!! Muchas graciass, yo quiero poner lo de las redes sociales y nunca he sabido como ^^ ajajajjajajjaja

    Muchas gracias corazón :D

    ResponderEliminar
    Respuestas
    1. Pues seguro que con este tuto te sale, lo único que tendrás de cambiar las medidas de las imágenes.
      Besazoss!!

      Eliminar
  5. Esto me puede ir muy bien, gracias!! :)

    ResponderEliminar
  6. Me encanta este tutorial guapa. Es super útil para aquellos que no sepan hacerlo y es que las explorar las entrañas del html no es tan fácil como parece :)

    ResponderEliminar
  7. Hola, quiero linkear una imagen en archivo PNG y no puedo hacerlo, con otras imagenes si se puede, me puedes ayudar, he puesto las imagenes como tu esplicas arriba, tendria algo que ver? gracias por tus ayudas saludos

    ResponderEliminar
    Respuestas
    1. Hola Carlos.
      No tiene nada que ver, si ves en mi explicación pongo una imagen en png.
      Recuerda que tienes de alojar tu imagen en un servidor. Para que me entiendas mejor, pones la dirección de la imagen así?
      "http://photobucket.blablabla.png"
      Un saludo.

      Eliminar
    2. Si ves que no te sale, mándame un correo con las direcciones de las imágenes y en cuanto buenamente pueda te mando lo que tendrías de poner con el código.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Mándame un correo con la imagen y el enlace ;)

      Eliminar
    5. Gracias por tu ayuda, esto es lo que yo he puesto
      y lo quiero redireccionar a este blog http://karlosangulo.blogspot.com, claro la url de la imagen la he cogido de la que me da el mismo blog sera eso lo que esta mal? es que he intentado meter en la web http://photobucket.com, y no hay manera rellenno los datos y al final no me deja dar enter, gracias no me deja poner la IMG te pongo xxx

      Eliminar
    6. Hola Carlos,
      No entiendo porque has borrado tu mensaje y lo has puesto de nuevo (es igual de complicado de entender que antes xDDDDDDDD)
      Y ya te respondí más arriba, mándame un correo con la url de tu imagen y dónde quieres que esta se enlace.
      Un saludo.

      Eliminar
    7. Este comentario ha sido eliminado por el autor.

      Eliminar
    8. Quote:
      no me deja poner el html de esta imagen (http://2.bp.blogspot.com/-13q0jaVprj4/URqsRO5lEWI/AAAAAAAALEA/OLYcGCFD29I/s1600/image.png) te lo puedo enviar por correo pero no encuentro el tuyo
      -----------------------
      Te copio tu entrada ya que la has borrado y no veo que mandes el correo XDD
      Sale perfectamente, seguramente es lo que pensé, no pondrás las comillas o alguna cosa parecida, te pondría el código pero no puedo poner html, dame tu correo ya que se ve que buscar el mío es muy complicado XDDDDDDDDDDDD

      Eliminar
  8. lo he eliminado por que aqui no me deja poner todo seguido el html me sale cortado

    ResponderEliminar
  9. Gracias por tu ayuda solucionado el problema

    ResponderEliminar
  10. Hola, gracias de verdad me ayudo mucho tu post, pero sol ouna duda si quisiera escribir alo arriba de cada imagen como hago.? qeu codigo debo poner.?

    ResponderEliminar
    Respuestas
    1. Hola Jose Manuel.
      Lo único que hay que se ajuste a lo que comentas, es poner debajo de cada imagen una leyenda (un pequeño comentario *). Para ello tan solo tienes poner el cursor sobre la imagen, hacer clic derecho y en Añadir leyenda, escribir.
      * Te aconsejo que pongas lo estrictamente necesario, ya que si pones mucho texto las imágenes no cuadrarían.
      Un saludo!

      Eliminar

• ¡Atención!

¡Atención! Importante:

Abstente de poner spoilers y spam de cualquier tipo (con spam, me refiero a la url de tu blog, sorteos o cualquier publicidad externa a este blog), aparte de los odiosos "¿te sigo, me sigues?", en las entradas sólo con el fin de promocionarte, puesto que el comentario será borrado. Si deseas anunciar tu blog, sorteo, o publicitar algo, ¡usa el chat!
¡¡Gracias!!

• ¡Afiliame!

Para más información id *aqui*.
Para ver a los afiliados id *aquí*.

• Busca en el blog.

• Libros en cifras


Para ver el listado clica *aquí*
Comprados: 38 [08/05]
Intercambiados: 15 [22/04]
Pedidos: 17 [08/05]
Sorpresa: 15 [10/05]
Leídos: 83 [11/05]

• Prx reseñas


Terminadas


La luna del leopardo - Nalini Singh
El círculo - Strandberg & Elfgren
Las cenas del club de los sábados - Amy Bratley
Maldito Karma - David Safier
Las horas distantes - Kate Morton
Recuerdos prestados - Cecelia Ahern
Una chica años veinte - Sophie Kinsella
Scarlet - Marissa Meyer
El tiempo entre nosotros - Tamara Ireland
El ladrón de céntimos - Christophe Paul
La Princesa Tarakanova - G.P.Dnilevsky
La viola de Tyneford House - Natasha Solomons
Los indeseables - Maureen McGowan
Susurros - A. G. Howard
La hermandad Hojanegra - J. A. Ramírez
Que el amor nos salve de la vida - David Escamilla
Hija de humo y hueso - Laini Taylor
Días de sangre y resplandor - Laini Taylor

Temática - Marian Keyes


Claire se queda sola [Publicada]
Lucy Sullivan se casa [Publicada]
Rachel se va de viaje [Terminada]
Por los pelos [Terminada]
Sushi para principiantes [Terminada]
Maggie ve la luz [Terminada]
¿Quien te lo ha contado?
Almas gemelas y otros textos
Bajo el edredón
¿Hay alguien ahí fuera?
Un tipo encantador
La estrella más brillante
Lizzie ha vuelto
Helen no puede dormir

Preparando


El cumpleaños secreto - Kate Morton
El jardín olvidado - Kate Morton
Perdida - Gillian Flynn
Muerto para vosotros - Lisa McMann
La piel de Mica - Paloma Bravo

Próximamente


Janet - V. C. Andrews
Crystal - V. C. Andrews
Brooke - V. C. Andrews
Raven - V. C. Andrews

• Puntuaciones

Wishbuuk