68

Quitar el borde a las imagenes.

Algunas plantillas de Blogger vienen con el borde de las imagenes que añadas incluido, si no te gusta puedes quitarlo de una forma muy simple:
Localizas en tu plantilla en modo Html, esta parte del código:
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}


Cambias el valor de "border" por 0, y listo.
Si también quieres quitarle el borde a la imagen que se muestra en tu perfil, localizas esta parte del código en la plantilla y sustituyes el valor de "border" por 0 igual que antes:

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

Entradas Relacionadas:

68 comentarios:


Azul... 1

¡Genial! Este finde me pongo a practicar (las lentas necesitamos parctica y paciencita, ja mía =o)

Ya puestas y como te has convertido en mi asesora de imagen, ¿cómo hago para que los links que coloco se abran en una ventana aparte?????

Otro besote y perdona a esta pesá que es tan fan de tu blog!!!

Anónimo 2

Pesada dice...ojalá todas las visitas tubieran tu generosidad a la hora de dejar un comentario.
Para abrir el link en ventana aparte busca en la pestaña "trucos blog" el post "abrir página en una ventana nueva" allí lo explico.
Besotess!!!

Azul... 3

Lo vi luego de dejarte el comment anterior, pero ´se me enredó la cosa en la oficina y ya no pude decirte. Lo dicho ¡eres una genia!

vicentz 4

Me funciono muy bien, gracias por este y otros comentarios de tu blog.

Anónimo 5

Vicente, gracias a ti!

HISPANO F.C. 6

Hola Rosa! Gracias por los consejos que dia a dia nos das a todos nosotros. Una consulta hay alguna forma de cambiar el tamaño (predeterminado) que nos da blogger para subir imagenes en los post? Lo que me pasa a mi es que me quedan muy chicos en "grandes" y no llegan a cubrir todo el ancho de la columna.
GRACIAS
www.hispanofc.net

Anónimo 7

SR. HISPANO , pues no, no hay ninguna forma que yo sepa.

Nano 8

Jejeje, más simple de lo que pensaba. Gracias Rosa, siempre salvando.

Anónimo 9

NO ME APARECEN ESOS CODIGOS, tengo blogspot y en mi Edicion HTML,no me aparecen los codigos que muestras, sera por la plantilla moderna, en fin necesito ayuda urgente.

es muy poco etico los margenes del perfil y de las imagenes con vinculos, si alguien sabe alguna ayuda

Salu2!

Anónimo 10

kco, no es porque la plantilla sea moderna, es porque no es un diseño original de Blogger.
Prueba colocando esto:
a img{ border-width:0}

En tu código por ejemplo después de:
.image {
float: left;
margin: 0;
}

Usa la vista previa porque no estoy segura que funcione en esa plantilla.

Anónimo 11

me resulto de maravilla!, altoque muchas gracias era lo que estaba buscando...

y gracias por contestar tan rapido

Domi 12

Hola! Es primera vez que veo este blog. Gracias! Me ayudaste, necesitaba esto, estube todo un dia buscando y ninguno me seriva, en verdad muchas gracias!, sigue asi, vendre a visitar esta pagina cada ves que tenga una duda. bueno adios, enserio muchas gracias.

Guri 13

Gracias lo aplique en mi blog www.ideapy.com/guri

-The.DarkSearcher- 14

Wow, gracias Rosa, me has savado la vida, y el diseño mi blog porque no combinaba el borde ese...grax

Germánico 15

Me sirvió, a igual que "kco" no me aparecía ese código, pero agregando a img{ border-width:0} después del código que tenia pude hacerlo.

Gracias Rosa.

Anónimo 16

Germánico Genial que lo hayas intentado guiándote por comentarios anteriores y más genial aún que lo hayas conseguido no todos leen los comentarios antes de preguntar y muchas veces en ellos está la mejor ayuda.

el secreto se protege solo 17

rosa gracias, gracias,gracias, los cambios son faciles de hacer por que lo explicas de maravillas

Rock And Pop 18

Rosa:yo quiero ponerle el borde a las imagenes como hago!?

Rock And Pop 19

mi plantilla de blogger es herbert

Anónimo 20

RoCk AnD pOp Pues añadir en el CSS el código que ves en la entrada:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

Hazlo justo antes de ]]></b:skin>

LokoGB 21

Rosa te cuento, siempre cuando inserto un enlace a un texto o imagen aparece un subrayado que no he podido quitar hasta ahora. ¿Qué puedo hacer?

Mira, así aparecen (imagen)

. 22

Gracias!!! lo hice y resultó.

Angélica.

sixto76 23

Rosaaaaaaaaaaaaaaaaaaa tengo un problema sabes que al añadir una imagen en el footer o mejor dicho añado un formuario de comentarios con una imagen la imagen del footer, sale con un marco morado, esto solo pasa en IE en google chrome me sale normal, hay manera de quitar ese borde?

Anónimo 24

sixto76Coloca esto en el CSS:
a img{ border-width:0;}

antonegro 25

hola rosa e leido el post entero y aun asi no e pòdido quitar el borde de mis entradas y es k en mi plantilla no aparecen los codigos k nombras y intentando hacerlo entrada por entrada el borde ya viene a 0 y despues a mi me sale con borde este es mi blog http://antonegro.blogspot.com/
y la plantilla k uso es "Chaotic Soul"
muchas gracias de antemano y felicitacione por tu trabajo k tanta ayuda presta a novatillos como yo 1 saludo

Ariel Mode 26

hola rosa te escribo para pedirte si sabes como cambiar de color el borde de la imagen en miniatura de los comentarios he estado intentando pero no hay caso, de antemano gracias

Rosa 27

xCanibalxDebería ser aquí:
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #191919;
border-color:#191919;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}

Rosa 28

antonegro ¿Qué borde?... yo no veo ninguno.

antonegro 29

Perdon Rosa kizas me e equivocado al realizar la pregunta m referia al recuadro blanco k enmarca alguna de las fotos k aparecen en las entradas
GRACIAS

Rosa 30

antonegro Las únicas imágenes que veo con fondo blanco, son parte de la imagen... eso no puede quitarse con ningún código... o usas imágenes .png que llevan fondo transparente o editas esas... pero no puedes hacer nada con códigos...:o

antonegro 31

muxas gracias Rosa perdona no sabia lo del formato png soy un poko novato y m e liado

Ariel Mode 32

hola rosa primero que nada muchas gracias por tu rápida respuesta, te lo agradezco mucho,
pero me temo que no funciona ya que yo había intentado con esa parte del código pero nada
no se que sera no he modificado ninguna parte de la plantilla como para que no funcione,
ya me rendí, bueno rosa suerte y saludos gracias de nuevo xaup

Anónimo 33

xCanibalx¿Has cambiado y puesto el mismo color en las dos líneas?:

background:none repeat scroll 0 0 #191919;
border-color:#191919;

Dr. Page 34

Hola Rosa. Disculpe que la moleste pero mi blog comenzó a presentar un marco en las imágenes que tienen hipervínculo cosa que no hacia, sale en Firefox e IE pero no en Chrome, hasta la imagen que nos lleva inicio de la pagina le salió el marco y no se como hacer para eliminarlo, cuando intento algo desaparece el hipervínculo, si me pudiera ayudar se lo agradecería, ya que afecta bastante la estética del blog, Me conformaría por lo menos quitarle el de la imagen de la cabecera, sin mas agradeciendo su ayuda, Dr Pagé.

Rosa 35

Dr. VictorColoca en el CSS algo como esto:
a img{ border-width:0;}

Dr. Page 36

Amiga nada, eso lo había intentado, no se le quita, lo curioso es que antes no salía así, fue de un tiempo para acá. Este es el código que tiene.

.post img {
border: 1px solid #E3E4E4;
padding: 2px;
background: #ffffff;

Rosa 37

Dr VictorEsos cambios extraños en los enlaces, se producen por usar Word en Blogger, los dos son incompatibles...

Te dije que colocases: a img{ border-width:0;} en el CSS, es decir antes de ]]></b:skin> tengas o no tengas ese código que me muestras que yo ya se tienes...

Si lo que te digo y aplicado tal como te digo no funciona, tendrás que editar las entradas donde has copiado de Word y deshacerte de todo el código que word incluye, es decir, editarlas en el editor de Blogger.

Dr. Page 38

Hola Amiga muchas gracias funciono, lo que me dices de Word solo los comentarios es lo que escribo copio y pego, los post tendría que revisar, trato de pasarlo primero por Bloc de Notas, muy agradecido, Gracias

Facu.Marin 39

Rosa, estoy haciendo un blog www.sentimientoquemero.com.ar y queria saber como sacarle el borde a la imagen de la cabecera, ya que aparece con un borde blanco :/ como se lo puedo sacar ya que queda feo? Gracias.

Anónimo 40

Facu.Marin Editando la imagen... el borde lo tiene la propia imagen, no es nada en la plantilla.

mushroom 41

hola. te cuento que tengo este problema del borde en las imágenes y no he podido solucionarlo porque no encuentro esa parte del código HTML que explicás en el post

antes usaba una de las plantillas predeterminadas de blogger y no tenía este problema, pero hace unos días cambié por una plantilla llamada "grunge era" y automáticamente le apareció un molesto borde blanco a todas las imágenes de mis posts

si me podés ayudar con este inconveniente te estaría eternamente agradecido

mi blog es: http://rockespacial.blogspot.com

saludos!

mushroom 42

...ah, te dejo la parte del código HTML que creo se refiere a las imágenes de la plantilla que uso actualmente:

/* Images */
img{background:#FAFAFA;border:1px solid #DFBFBF;padding:8px;}
img.float-right{margin:5px 0 10px 10px;}
img.float-left{margin:5px 10px 10px 0;}
code{margin:3px 0;padding:20px;text-align:left;display:block;overflow:auto;font:500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;/* white-space: pre; */border:1px solid #DDC3A5;background:#F0E5D3;}
acronym{cursor:help;border-bottom:1px dotted #895F30;}
blockquote{margin:12px 25px;padding:12px 15px 12px 55px;font-weight:400;font-size:17px;line-height:1.6em;font-style:italic;font-family:Georgia, 'Times New Roman', Times, Serif;color:#2C2E3E;border:1px solid #DDC3A5;background:#F0E5D3 url(http://4.bp.blogspot.com/_73i0fjAB_Hw/SUflzW0ljTI/AAAAAAAAAq8/Ii-y71-gy48/s1600/quote.gif) no-repeat 15px 15px;}
strong{font-weight:700;}

...disculpame por las molestias y muchas gracias desde ya. saludos!

Anónimo 43

mushroom En esta línea, cambia donde dice 1px por 0px
img{background:#FAFAFA;border:1px solid #DFBFBF;padding:8px;}

Flinx 44

Rosa me quedo perfecto solo que te queria preguntar como hacerle para que en el post de las entradas apareca una imagen de fondo y al entrar al post aparesca otra imagen?

Anónimo 45

Flinx Para eso habría que usar las condicionales de Blogger y no es algo que pueda responderse en un comentario.
Mira aquí el uso de las condicionales:

http://vagabundia.blogspot.com/2010/04/blogger-y-el-uso-de-codigos.html

Unknown 46

hola!! mi problema es (si me pueden ayudar) que en las ventanas popup me sale un borde izquierdo y superior blanco, y yo nolo quiero!! ja! como se puede eliminar?¿?¿ grax!!!

lucianogonzalez84@hotmail.com

Jorge A. Garrido 47

Buenas a todos. Hace muy poco que empecé con estos de los blogs (proyecto literario ) pero ya le estoy cogiendo el truco a esto del código html (llevo,,, dos semanas??? :p). Pero me desesperaba ese recuadro blanco que le salió a mi imagen de la entrada. Seguí sus pasos y no se me resolvía así que repasé el código y encontré que en mi blog pasaba por esta instrucción:

.post img, table.tr-caption-container {
border:1px solid #444444;
padding:1px;
}

Si alguien más ve que con lo dicho en el resto de los comentarios no le sale nada, que busque esto y cambie por 0 el valor del border, claro está. Un saludo

Anónimo 48

Jorge Garrido Tal como dices es ahora, en las nuevas plantillas del diseñador, así es.

arkitekton 49

Hola Rosa. He hecho mi primer post en el Blog, he revisado el codigo HTML de la imagen, con border="0", y sigue sin quitarme el borde, al igual que con cualquier imagen que pongo, y no se como quitarlo. Te dejo la direccion del blog que acabo de crear es http://urarchitecture.blogspot.com.
Aparte no se como alinear la fecha de arriba con los post de entrada.
Muchas gracias Rosa por este blog y todos los comentarios utiles que nos das.

Anónimo 50

Localiza esto:
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
Y déjalo así:

.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
}

arkitekton 51

Hice lo que me has dicho pero sigue haciendome las entradas con la imagen con borde negro, como con sombra. ¿Se te ocurre algo mas que pueda hacer?
Gracias por adelantado. Un saludo Rosa.

arkitekton 52

Ya lo hice Rosa, y funciono, es que tenia que hacer lo que me dijistes en dos partes de la estructura de HTML. Gracias. Un saludo.

Anónimo 53

gracias gracias gracias

Anónimo 54

muchas gracias, con esto ahora las ecuaciones de mi blog ya no ocupan tanto espacio

VC- Corpsegrinder 55

Hola, disculpa, y si quiero quitarle el borde a una sola imagen de un post cuando hay varias? Lo que pasa es que si pongo en la plantilla el codigo

border: 0px double;

me quita el borde de todas las imagenes... y si lo dejo asi

border: 3px double;

y en la imagen del post donde no quiero borde pongo la propiedad border="0" me sigue apareciendo el borde... y no se como hacerle, tengo aproximadamente 2 imagenes por post... y quiero que el borde solo aparezca en una, se puede?

Saludos y agradeceria tu respuesta... te cuidas. la direccion del blog donde quiero hacer eso es http://distilled-brutality.blogspot.com/

Anónimo 56

VC- Corpsegrinder Puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2007/06/imgenes-con-o-sin-borde-en-las-entradas.html

RinoPC 57

Hola Rosa; Felicidades por tu Blog es muy bueno. Sabes te queria hacer una consulta, resulta que en mi blog hay mucho espacio entre mis post, eh tratado de dar con el problemas pero no logro dar, talvez me puedas ayudar. Gracias.

RinoPC 58

me olvidaba, este es mi blog: http://rinopc.blogspot.com

Anónimo 59

RinoPC Reduce el valor del margin en .post-footer { y si es necesario el valor del padding-bottom en .post {

RinoPC 60

@Rosa
Balla, muehcas gracias, ya puedo solucionarlo y gracias a ti.
Además de reducir el margin en post-footer tambien reduci el margin en .post {
Una ves más muchas gracias.

ivan 61

hola rosa mira mi blog es este: http://bloodangel-83.blogspot.com/
me gustaria muchisimo quitar el borde de la imagen principal. si sabes como hacerlo dime porfabor.

Anónimo 62

ivan Cual es para ti la imagen principal?

ivan 63

es la unica imagen que tengo la que esta a la izquierda que se sale un poco del margen hacia la izquierda y no entra. me gustaria quitarle todos los bordes para que encage mejor y no se note que sale por un lado.
Gracias T_T toi desesperado por ello

http://bloodangel-83.blogspot.com/

Anónimo 64

ivan Eso no es un borde, es el fndo del gadget... reduce la imagen unos pixeles y no tendrás ese problema.

Nati Cortez 65

Hola Rosa!!!

Gracias, si me funciono...

Saludos,
Nati

Irene M 66

Gracias!

A TEXTO 67

¡Hola!
¿Podrás entrar a http://desgrabacionesatexto.blogspot.com/ y decirme si hay alguna forma de quitar ese marco que bordea todo el cuerpo central? No encuentro la forma de hacerlo...
¡Gracias!
Muy útil tu página. Saludos.

Anónimo 68

A TEXTO Bien, veo que ya usas otra plantilla sin el marco en Outer...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S