English Português

Uno de los principales problemas de las plantillas blogger es cuando las imágenes fallan y no se visualizan o son sustituidas por mensajes poco agradables. El problema se debe a que en muchos de los casos las imágenes de esas plantillas se encuentran hospedadas en servicios gratuitos (ej: imageshack, photobucket, googlepages, entre otros.) que limitan el número de veces que pueden mostrar (ancho de banda).

Por lo tanto lo ideal es cambiar el hospedaje a un lugar seguro. ¿Cual?, pues el mismo Blogger, el cual no pone un limite (o es muy alto) al ancho de banda de cada imagen.Para obtener las imágenes que usa tu plantilla puedes hacer lo siguiente:

  1. Entra a la pestaña “Diseño” y posteriormente a la opción de “Edición de HTML”.
  2. Busca todas las direcciones (URLs) de las imágenes, todas serán del tipo:
    http://servicio.com/etc/nombre-imagen.jpg

    Y terminaran en jpg, png, gif u otra extensión de imagen. Seguramente las encuentres entre códigos como …url(url-de-imagen-aquí)… , así que habrá que buscar con detenimiento. Puede pasar que al buscar las urls de las imágenes en el código de las plantillas estas ya estén en Blogger, para tal caso no hay necesidad de hacer ningún.

  3. Entra a cada URL y guarda la imagen en un carpeta con el nombre de tu plantilla.

Ahora, para subir imágenes a blogger y poder usarlas en tus plantillas puedes seguir estos sencillos pasos.

  1. Entra al editor de entradas (Creación de entradas > Crear).
  2. Da clic al icono para subir imágenes normalmente y sube todas las que componen tu plantilla.
  3. Al terminar de subirlas y regresar al editor, el código resultante es más o menos como sigue:
    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s1600-h/footerpg5.jpg"><img style="cursor:pointer; cursor:hand;"
     src="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s400/footerpg5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5243097480906068018" /></a>

    Como puede verse el código contiene dos URLs aparentemente de las imágenes, sin embargo ninguna de ellas puede usarse en las plantillas, así que:

  4. Copia la primer URL del código de cada imagen y ábrela en una pestaña o ventana del navegador.
  5. Al entrar veras la imagen correspondiente, da clic derecho y después “Copiar la ruta la imagen” (firefox).
  6. Esa URL ya puede usarse en las plantillas blogger, el siguiente paso será sustituir la antigua URL de la imagen en Diseño > Edición de HTML por la recién copiada en blogger.
  7. Repite los pasos 4, 5 y 6 para todas las imágenes que subiste correspondientes a las que usa tu plantilla.

Este puede ser un proceso un poco tedioso, pero hay que pensar en que solo se hace una vez y al hacerlo tendrás mayor seguridad de que las imágenes en tu plantilla no fallaran. Lo mismo aplica si eres creador de plantillas blogger, hacer este proceso puede ahorrarte dolores de cabeza futuros.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Souldes / Hace 9 años /

      Una de las formas que utilizo para remplazar rapidamente las imagenes de las plantillas en firefox es ir al menu herramientas /informacion de pagina / medios y alli veo todas las imagenes que tiene la plantilla

      Responder a Souldes →
    2. ekz / Hace 9 años /

      Desde hace un tiempo que al hacer lo que dices, igual no me muestra la imagen, le pongo ver imagen, copiar ruta de la imagen y al pegarla en el código (o en una entrada) simplemente no la muestra.
      Lo que hago en esos casos es entrar a picasa web, donde son alojadas todas las imágenes de blogger, y buscarla en el álbum (blog) correspondiente y copiar el enlace desde ahí.
      Esto si que es tedioso U.u

      Saludos

      Responder a ekz →
    3. Francisco / Hace 9 años /

      Souldes, ese es un buen tip.

      Responder a Francisco →
    4. papix / Hace 9 años /

      lo que yo hago es poner vista previa y ver las propiedades de la imagen y asi veo la url de la imagen

      Responder a papix →
    5. DEXTER de Vainas809.com / Hace 9 años /

      bueno, ese asunto yo ya lo sabia aunque no lo he llevado a practica, pero igualmente tu articulo es interesante. buen post! y un saludo

      Responder a DEXTER de Vainas809.com →
    6. Meoros / Hace 9 años /

      A mi ya no me sirve eso, cuando me cambie y le puse mi dominio ya no me muestra las imagenes que saco desde blogger aunque las resuba.

      Responder a Meoros →
    7. CarLost / Hace 9 años /

      Si, es lo mejor usar blogger.
      El unico problema es con las imágenes Gif que no las guarda con movimiento ..

      Responder a CarLost →
    8. Alejandro / Hace 9 años /

      Este post es sumamente importante, debido a que la mayoria de las peronas que tienen un blog, especialmente de blogger, descargan templates gratis y es muy duro que un día su blog se vea todo un desastre debido a que algunas imagenes al exceder su limite de “hosting” se hayan deshabilitado.

      Responder a Alejandro →
    9. Victor Ch / Hace 9 años /

      no me sirve, ahora que tengo dominio no me salen las imágenes, en la plantilla que uso constante mente se pierde la barra de la izquierda; la azul, en la plantilla illacrimo la cual la publicaste en tu pagina, me gusta mucho y me da lastima que no pueda utilizarla en su máximo esplendor.. a ver si la puedes arreglar y re subirla con las imágenes mas fijas.

      muchas gracias

      Responder a Victor Ch →
    10. German / Hace 9 años /

      Hola, me encanta tu blog es muy interesante, con respecto a este tema quisiera decirte que yo uso la plantilla Blogy-illacrimo y si hago esto que decis no me muestra las imagenes del template, esto sucede solamente cuando tengo dominio personalizado http://www.sentitevos.com.ar en cambio si uso el dominio .blogspot.com funciona todo bien. Por eso para usar mi dominio tuve que mudar las imagenes a otro lado y por el momento uso imageshack hasta que consiga algun lugarcito privado o algo mejor.

      PD la proteccion antispam es tambien anti-nosematematicas jajajaja 🙂 abrazos de gol!

      Responder a German →
    11. filmizle / Hace 9 años /

      Thanks

      Responder a filmizle →
    12. Bassofia / Hace 9 años /

      Justo ahora estoy retocando lo que será el nuevo theme de mi blog y tenía este tip archivado en mis rss.

      Sólo agregar que luego de hacer todo esto, la entrada que usamos para subir las imágenes se puede dejar como borrador, y los links funcionan igual. Así sólo la vemos nosotros…

      Salu2

      Responder a Bassofia →
    13. Betoumpierrez / Hace 9 años /

      El problema que veo yo es que al subir las imágenes a blogger (que es casi lo mismo que hacerlo a nuestro album web Picasa) las imgs pierden resolución, pierden calidad y eso no queda para nada bien.

      Yo uso Photobucket, que a diferencia de Flickr no enlaza al sitio de origen de la imgn.

      Opciones hay muchas hay que buscar, pero esta no me gusta para nada.

      (ni hablar de buscar la entrada para cambiar la imgn etc. cuando ya tenemos 300 y pico de post)

      Responder a Betoumpierrez →
    14. Francisco / Hace 9 años /

      Beto, no se habla de alojar todas las imágenes de la plantilla en blogger, solo las de la plantilla, el problema con photobucket es que cuando llegas a cierto nivel de visitas, las imágenes desaparecen al exceder la cuota diaria. En blogger si hay un pequeña pérdida de calidad, pero creo yo, a veces hasta positiva, pues mucha gente no optimiza sus imágenes y esto ayuda.

      Responder a Francisco →
    15. Bassofia / Hace 9 años /

      Francisco que tal!

      Sabes, hace un par de días Photobucket me envió un mail para avisarme que estaba a punto de excederme con el ancho de banda. Al final me excedí y en la plantilla de mi blog apareció un desorden terrible.

      Recordé este post y al mismo tiempo que, como tengo el blog con un dominio personalizado, el tip no me servía. Pero lo pude resolver de la siguiente manera:

      Creé un nuevo blog, con un nombre que a nadie le importa, hice un nuevo post en donde sólo subí las imágenes y tomé las URL’s como lo indicas acá, luego reemplacé las direcciones, guardé el post como borrador y Listo!!

      Ahora mi blog se ve de nuevo como estaba en un principio y lo mejor de todo es que no tendré que preocuparme más por el ancho de banda.

      Sigo con mi blogger, creciendo como hasta ahora, pero gastando “0” peso!

      Salu2 y gracias de nuevo por el dato.

      Responder a Bassofia →
    16. komik fıkralar / Hace 9 años /

      Thanks..

      Responder a komik fıkralar →
    17. Zarandajas / Hace 8 años /

      No solo he resuelto el problema de las imágenes que aparecían cuando les venia en gana, si no que aseguraría que la pagina carga mas rápido. Un gran consejo, gracias.

      Responder a Zarandajas →
    18. Fernando / Hace 8 años /

      Buen artículo para el tema de las plantillas. Por lo que veo puedo tener problemas por ser un dominio propio. Vamos a cruzar los dedos. XD

      Al principio lo probé con Picassa y copiando el link al ver la imagen, pero a la media hora ya no servía. Supongo que la caché me la jugó un poco.

      Responder a Fernando →
    19. el_core21 / Hace 8 años /

      muy bueno men gracias por el tip esto nos sirve de mucho a los programadores y diseñadores de paginas thnaks

      Responder a el_core21 →
    20. Graciela / Hace 8 años /

      Hola !!!!.No me sale otra direccion que esta:

      http://2.bp.blogspot.com/_Pe-iq3mf1eg/S0CIXYUazMI/AAAAAAAAAFs/piJqXjlZ7fM/s1600-h/franzaverdepuzzle4.png

      Haga lo que haga, siempre está ésta y no se muestra en las entradas que deseo. El archivo está bien porque se puede ver alojandolo en un gadget desde mi PC.Uso IE7
      Mil gracias!!!!!!

      Responder a Graciela →
    21. Francisco / Hace 8 años /

      @Graciela, es que debes entrar a esa url, dar clic derecho sobre la imagen y seleccionar “Copiar dirección de la imagen” (firefox) y ahí tendras la url útil, de tu enlace es la siguiente:

      http://2.bp.blogspot.com/_Pe-iq3mf1eg/S0CIXYUazMI/AAAAAAAAAFs/piJqXjlZ7fM/s1600/franzaverdepuzzle4.png

      Responder a Francisco →
    22. Graciela / Hace 8 años /

      Hola !!Gracias por responder tan rápido !!!
      No hay caso..entro en la url (la 1era digamos) y al dar click con el boton derecho sólo sale copiar imagen , guardar,imprimir, etc…idem en propiedades..la misma url 1era…..(pareceria que en Explorer 7 eso no anda…digo….)
      Lo solucioné subiendo a un blog sólo para imagenes y rescatando de Picasa las direcciones…despues de volverme loca con las s800, s144, etc….Tampoco me sale la url correcta desde la propia entrada creada….
      Otra cosa que tampoco puedo hacer es usar editor avanzado de blogger….no graba los cambios a la planilla, el “leer más” nativo tampoco me sale….asi que volví al viejo editor y todo a mano…..Misterios….bueno no hay misterios…tengo pocos meses en esto….ja ja!!
      Gracias por contestar !!!
      Saludos!!!!!!!

      Responder a Graciela →
    23. Francisco / Hace 8 años /

      @Graciela, aah entonces es eso, el navegador. Te recomiendo cambiarte a Firefox, tiene varias herramientas para llevar un blog.

      Responder a Francisco →
    24. Graciela / Hace 8 años /

      Sí??..no sabia que Firefox era más practico para un blog..
      Bueno, me tengo que animar….no soy muy ducha..
      Gracias por todo Francisco…siempre leo el blog aunque no escriba….
      saludos!!!

      Responder a Graciela →
    25. sandra / Hace 8 años /

      hola a todos

      he conseguido poner la imagen de fondo, tanto con el imageshak como desde el servidor de blogger. Pero aún así en internet explorer no se visualiza el fondo. Con firefox y safari si q se ve.

      Alguien puede ayudarme?

      Un saludo

      Responder a sandra →
    26. WillyWilly / Hace 8 años /

      Firefox es la voz para aser backup de las imagenes.

      Responder a WillyWilly →
    27. nuria / Hace 8 años /

      Muchas gracias antes de nada. Tengo un problema: hago lo que comentas pero la foto se me guarda a un tamaño máximo de 1086 de ancho y yo quiero que se mantenga el tamaño original (1280 ancho por 1800 alto) ya que es una imagen de fondo… ¿Cómo puedo hacer para que no se me “empequeñezca” la imagen? Si esa misma imagen la pongo por ejemplo en ripway.com, sí que se me mantiene… pero es que este servidor a veces va un poco lento e incluso según qué explorer por lo visto no se ve la imagen (a mí no me pasa, pero a algunos amigos sí…) por eso había pensado en intentar lo de alojar esta imagen en blogger… ¿cómo puedo solucionar mi problema?

      Responder a nuria →
    28. Francisco / Hace 8 años /

      @muria una vez que subes la imagen, la url que esta tiene incluye al como s1600 o s400 u otro número. Cambia esa parte por s000 para tener el tamaño completo.

      Responder a Francisco →
    29. nuria / Hace 8 años /

      Gracias Francisco… lo acabo de intentar pero lo que consigo es que no se vea la imagen… brrrr, informática… lo intentaré con más tranquilidad cuando llegue a casa a ver si deduzco por qué no me funciona tu truco… brrrr

      Responder a nuria →
    30. Victor / Hace 7 años /

      Francisco,
      Muy buena tu página y tips.
      Te agradezco si me puedes echar una mano con mi blog, lo he optimizado lo mejor posible para mí, con dos problemas:
      – Al cargar imágenes en una entrada, sea el tamaño que sea, me la deforma hasta unos 150x150px. He probado cambiar a S00 pero en el codigo HTML y nada.
      – Cargué un código para leer mas y le hice una imagen personalizada, funciona bien… solo que me corta las entradas donde le da la gana, aunque le configure el código a 750 caracteres, lo corta 3 caracteres antes del final en las entradas cortas.

      Te agradezco tu ayuda,
      Victor

      Responder a Victor →
    31. Nacho / Hace 7 años /

      Te hago una pregunta.. existe la posibilidad de que cuando subo una imagen al blogger en vez de que sea: http://1.bp.blogspot.com/_Zuzii37VUO4/SM

      Se asi: http://nombredeldominio.com/_Zuzii37VUO4/SM

      ??

      Responder a Nacho →
    32. Ivon Bacaicoa / Hace 7 años /

      Excelente ! yo las alojaba en Google site y efectivamente no podía verlas…salvo que estuviera logueada y en esa aplicación.
      Además, este procedimiento es totalmente válido para generar el html que necesitamos si queremos crear box en Facebook a través de FBML.
      Gracias, como siempre.
      Ivon

      Responder a Ivon Bacaicoa →
    33. nEjO / Hace 7 años /

      Gracias util y sencillo consejo, ayuda mucho y las imagenes se cargan mas rapido. solo hay que tomar nota con no sobre pasar el limite de espacio en el album de picassa.

      Responder a nEjO →
    34. christo / Hace 6 años /

      disculpa quiero hacerme un blog pero solo para compartir imagens njo de informacion, me puedes dar un blog par compartir imagenes plissss

      Responder a christo →
    35. marco / Hace 6 años /

      amigo me has sacado de apuros! muchas gracias..

      Responder a marco →
    36. Sirius Burns / Hace 6 años /

      Grax Loko Sos Groso me hacia mucha falta saber eso de como poner las imagenes Grax +10 xD

      Responder a Sirius Burns →
    37. JuanAlberto / Hace 6 años /

      Gracias amigo. Lo voy a hacer mañana (Noche buena) jeje 🙂

      Saludos!

      Responder a JuanAlberto →
    38. luis / Hace 6 años /

      no sirve esto ya que la imagen queda de diferente tamaño al pasar por el editor del blog

      Responder a luis →
    39. Dvip / Hace 5 años /

      Me encuentro en el lío de no se como usar blogger solamente para subir imagenes y después colgar las urls en mi blog wordpress, veo que algunos lo hacen así, pero no se como, alguien tiene idea?

      Responder a Dvip →
    40. Yosjany Roig / Hace 3 meses /

      Buenas noches Francisco, muy bien especificado todo en este post, te felicito. Yo uso wordpress, donde podría alojar imágenes que no sea en mi servidor? Mil gracias por tu blog, es muy útil y aporta mucho valor, saludos hermano

      Responder a Yosjany Roig →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad