28 de febrero de 2012

[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:





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*.
* 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!!

31 comentarios:

  1. 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
  11. ¿Como has hecho lo del menu desplegable de arriba??

    ResponderEliminar
  12. Buenas David.
    Espero que mi tutorial te haya sido de utilidad ;) y sobre lo que preguntas, lo busqué por Google.
    Saludos!

    ResponderEliminar
  13. cielo gracias por el post me ayudaste mucho :)

    ResponderEliminar