12.12.12

Tutorial | Quitar fondo a imagen de Blogger

En el post anterior como eran varias fotos, se me antojó hacer una especie de "collage", lo hice y lo guardé en formato .png (con transparencias), pero noté que cuando se visualizaban las imágenes se veía el fondo blanco con sombra que Blogger le da por default a las imágenes (por la plantilla base que tengo).

No me gustaba nada cómo se veía, pero tampoco quería quitar el efecto del todo (me gusta con las imágenes en general), sólo quería quitarlo para esta entrada.

Así que me puse a investigar y con mis pocos conocimientos de CSS y a pura prueba y error, encontré cómo hacerlo; no sé si es la mejor manera (yo estoy segura que habrá otra más fácil D:!), pero pues esta fue la que me funcionó.

Intentaré hacer una especie de tutorial, aquí va:


Paso 1:
Añade una imagen (con fondo transparente) a una entrada de Blogger


Paso 2:
Da click en el botón "Vista Previa" (para cerciorarte si la imagen que insertaste aparece con fondo y marco sombreado)


Paso 3:
Haz Click en el botón HTML



Paso 4:
Localiza la ruta de la imagen (puede terminar en .gif, .jpg, .png; depende del formato de imagen que hayas insertado)


Paso 5:
Agrega el siguiente código justo después de donde termina la ruta de la imagen:
style="background-color: transparent; background-image: none; border: none; box-shadow: rgba(0, 0, 0, 0) 1px 1px 5px;"

Paso 6: 
Asegúrate que haya quedado así:


Paso 7:
Click en "Vista Previa" (el marco debe haber desaparecido)



Y finalmente, es todo.
Cada vez que insertes una imagen que desees aparezca sin ese fondo que Blogger le aplica por default, aplica estos pasos y ¡listo!

Espero haber sido lo suficientemente explícita, cualquier duda o comentario pueden dejarlo en esta entrada, intentaré responder pronto.

Saludos :D!
Bytes~

15 comentarios:

  1. Yo no sé nada de esas cosas :c yo encuentro los temas ya hechitos y solo copio el código xD

    Saludos

    ResponderEliminar
  2. hii
    waaa que bonito blog
    dejando todo tu manzanoza ser XD
    no en serio me encanta
    te sigo he te afilio podemos afiliar??
    http://lovelysit.blogspot.mx/2012/11/afiliados-kawaii-2.html
    me encanto tu tutorial
    es para que los gifs no tenga fondo supongo que algunos es asi su formato
    ^^saludos felices fechas linda

    ResponderEliminar
  3. Amo tu fondo! en fin pasaba a saludar y a agradecerte por el tutorial!

    ResponderEliminar
  4. Gracias!! ni sabia que podían quitarse esos fondos de las fotos!! lo intentaré :D

    ResponderEliminar
  5. Qué interesante! Sabes un montón de informática!

    pasate por mi probador guapa, te sigo!

    elprobadordekim.blogspot.com

    ResponderEliminar
  6. hola wapa me ha gustado mucho tu post porque cuando yo empeze con el blog era super torpe asi que me suscribo, te dejo el link del mio por si quieres pasarte 1 besazo http://elmundodetirsi.blogspot.com.es/

    ResponderEliminar
  7. No te imaginas el dolor de cabeza que me estaba dando ese fondo, la verdad busque en varios sitios sin dar con una solución, el tuyo es claro, rápido y directo, creo que más fácil no lo hay, y lo mejor de todo es que no hay que meterse con la plantilla, de verdad muchas gracias. :D

    ResponderEliminar
  8. Gracias por colocar este turorial, soy nuevita en lo de los blogs y no hallaba como quitar ese molesto fondo blanco >.< jeje, Hermosa página! :)

    ResponderEliminar
  9. Hola! a pesar de que tu post es relativamente antiguo, acabas de salvarme la vida y debía comunicártelo!

    Gracias!

    ResponderEliminar
  10. Mil gracias!! Me estaba dando de topes porque no encontraba como quitar ese feo fondo y arruinaba las imágenes png que tanto me había costado crear.

    ResponderEliminar
  11. Me sirvio mucho gracias nada me funcionaba hasta que encontre tu entrada.:) Te sigo

    ResponderEliminar
  12. Hola muchas gracias. Me encanta. Además llevo tiempo intentando hacerlo y no tenía idea de como hacerlo. Mil gracias.

    ResponderEliminar
  13. muchas muchas gracias te amoooooooooo me salvaste la vida

    ResponderEliminar

Deje sus cartas bomba van aquí ♥