33

Imágenes con o sin borde en las entradas.

En el css de las plantillas de Blogger las imágenes que añadimos en nuestras entradas vienen con el atributo "border" añadido por defecto, así cada vez que subimos una imagen esta se muestra en el blog con borde, ya expliqué en un post anterior como "quitar el borde a las imágenes"

Suele suceder que eliminamos el borde, pero en alguna ocasión nos resulta más apropiado o simplemente nos apetece mostrar una imagen determinada en un post con borde.
La solución está añadiendo en el CSS un código con los atributos para las imágenes que queremos "bordear":

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:1px solid #C0C0C0;
}

Ahora cuando subimos una imagen al editor de entradas, hemos de añadirle el atributo class="img2" si queremos que tenga borde.
Así se muestra el código de una imagen en "edición de HTML" en nuestro editor de entradas una vez subida al blog:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Esta imagen se vería sin borde, pero al añadirle el atributo class="img2" (lo he puesto en negrita) se mostrará bordeada:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s1600-h/bannergcara.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/RoWk5JdlFyI/AAAAAAAABu4/QmpN87bWS9E/s200/bannergcara.JPG" class="img2" border="0" alt=""id="BLOGGER_PHOTO_ID_5081649056256956194" /></a>

Por supuesto, también puede hacerse al revés, es decir, sino has modificado el CSS de las imágenes, puedes añadir el código igualmente para que las imágenes que quieras se vean sin borde, solo has de cambiar el "border" a cero pixeles:

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:0px solid #C0C0C0;
}

Podríamos pegar el class="img2" en Plantilla - Opciones - Formato - Plantilla de entrada, así aparecería automaticamente en nuestro editor de entradas cada vez que editamos un nuevo post, si queremos usarlo solo hay que copiarlo y colocarlo en el código de la imagen una vez subida y, si no vamos a usarlo, lo borramos y listo.

Entradas Relacionadas:

33 comentarios:


Superichy

gracias Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia Genia

Azul...

yoyoyoyoooo
esto sí e sido capaz de hacerlo luego de tu primer post sobre el tema!!!!!! jojojo

(Ya logré subir el archivín de audio para poderlo poner en la page, cuando lo haya subido te aviso!!! a mediados de julio, por mi cumple lo pondré)

bessitos Apañaísimaaaaaaaa

All-x ▼_▼

muy bueno ese truquito rosita XD
gracias y salu2

Than

Hola, rosa este es el primer comentario que te dejo a pesar de tanta ayuda que he obtenido de ti y tu blog (pena)


Pero de antemano muchas gracias!!!

Mi problema es el siguiente:

En mi blog las imagenes salen en recuadro y no me gusta... no se lo puedo quitar de la manera que lo pones aca porque en el codigo html no me salen esas palabras, te pego el codigo para ver si me puedes ayudar a quitarle los bordes a las imagenes de mi blog...

img src="http://a962.ac-images.myspacecdn.com/images01/23/l_b30fb657289e22266381156565047bf9.gif" /

*Le quite < y > para publicar el comentario

Anónimo

Hola Thanya!

Creo que te has liado un poquito...
Si lo que quieres es simplemente quitarles el borde a todas, mira aquí:
http://elescaparatederosa.blogspot.com/2007/02/quitar-el-borde-las-imagenes.html

Than

gracias Rosa, eres muy amable, segui al pie de la letra las indicaciones y gracias a tu ayuda consegui quitarle los bordes a las imagenes, pues te repito no me gustaban en mi blog...


Ahora me dare a la tarea de quitar lo bordes de las imagenes que inserto en el titulo del post!


Gracias por todo!

Magnolia

jajajaja Rosa no hay caso tratando que mi plantilla (la que no tiene por defecto margen en las imágenes) quedará como muestras tú, me quedo con las entradas encerradas en un margen... bueno no se ve mal así que la dejo así... en cuanto a las imágenes ni modo..
Saludos,
Magnolia

Unknown

Hola Rosa,seguí al pie tus pasos,pero los colores de los bordes se alternan ,y yo quiero que quede como el tuyo en cuanto al color.En varias entradas están en verde,en otras azul y en otras negro.

En la edición del CSS me marca un error al intentar guardar o dar vista previa en la siguiente parte del código.

.post .img2 {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}

Me dice: "Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida."

:'(

Anónimo

JEDIMASTER, ya he corregido en el código, es que lo había puesto para usarlo con fuentes y colores, sin pensar que en algunas plantillas el color se cambia directamente en el html.

Ahora el color se cambia en el código por el que se quiera.
Lo que no entiendo :S es eso de que el borde te sale en distintos colores...

Unknown

Gracias!!!

Otra duda:

Usé el código que me diste para centrar los widgets,y veo que sólo funciona en internet explorer,porque en Firefox no me funciona,es decir,no me aparecen centrados los widgets.:S

Ah!!!Creo que para "randomizar" los colores del borde de las imágenes hay que borrar la clave de color.

Anónimo

JEDIMASTER, ¿a que código te refieres? :-X

Unknown

Hola! me encanta tu blog, es muy útil para mi que soy novata!!
Quiero quitar los bordes pero SOLO DE ALGUNAS imágenes, y no acabo de entender el proceso que explicas!! :((

Unknown

Ahora sí lo logré!!!!!!!!!!!!!!!!!!!!Qué felicidad!

Anónimo

Beatriz V.P. siento no haber llegado antes :-(
Pero ves, lo conseguiste tu sola, a veces nos rendimos demasiado pronto...¿verdad? Debes confiar más en ti misma para estas cosas, no es difícil.
¡Enhorabuena!

Anónimo

Este truco sí que pude hacerlo de una jeje. Quería una firma para todos mis post y salía con el molesto recuadro blanco.
Gracias Rosa! Saludos

Unknown

si! pensé que no había entendido nada!!! pero me dijo "pos a ver qué pasa!!" y...
¡funcionó!
Ay Rosa!!! eres una genia!!!
Lucero

Unknown

muy bueno tu blog.. me podrias ayudar a quitarle los bordes a los banners publicados en mi blog a traves d html javascript?.. los coloca automaticamente la plantilla, no el botón.. agradeceria mucho tu ayuda.. ;) saludos!

Anónimo

onlywebfm , localiza este código en tu plantilla:
img {
border: 0px
}

Justo debajo pega esto:
a img{ border-width:0}

Maite

Sabía que había visto este truco en algún sitio... gracias Rosa, no paso mucho por aquí pero como el mes pasado me leí todas tus entradas cuando necesito algo se donde está más o menos :D

Martín

Gracias Rosa! muy bueno
punquinbund.blogspot.com

Motoramica | Historia del Motor

Rosa!
Hola
Tengo un problema con algunas imagenes. Resulta que cuando las pongo en modo "HTML/JAVASCRIPT" me salen con un borde. En explorer ese borde se ve en azul y en Firefox se ve en verde. Es necesario ponerlas en "html" porque necesito poner varias en fila, silas pon en imagen normal saldrían unja debajo de la otra.

Gracias por tu ayuda

Motoramica | Historia del Motor

Aclaración: La imagenes van puestas así como estan en la página principal del Escaparate, van arriba una seguido de otra, pero a mi me salen con bordes cuando las pongo allá arriba, sin embargo, si pongo imagenes Javascript en el sidebar, no me aparecen con esos bordes.

Anónimo

Denshou Coloca esto en el CSS (antes de ]]></b:skin>):

a img{ border-width:0;}

marta

y si solo quiero eliminar el borde de la imagen de cabecera???
como le ago???

SALUDOS y gracias por la prontitud en la que contestass

I LOVE YOU ROSA :D

Anónimo

master Depende para que blog sea...tienes un montón en tu perfil :S
Normalmente se hace aquí:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Donde pone border: 1px cambias el 1 por 0

CTenisMuimenta

ola me podias ayudar con mi blog?es que en todas las imagenes tengo un borde blanco rodeandolas, y queria que solo se viera las imagenes, nada mas, sin ningun borde!

por favor ayudame

escribime a este email por favor: miguelmrng@hotmail.com

muchas gracias

Anónimo

S.D No envío emails... solo respondo los que me envían.

Localiza esto:
img {
background: #FAFAFA;
border: 1px solid #0F7ACC;
padding: 6px;
}
Y borralo.

Lui-Ka! x3

Buenas, muchas gracias por este post me ha ayudado bastante pero, tengo otro problema.
En mi post las imagenes que subo se ven muyy separadas cuando las posteo y quisiera que esten juntas sin dejar espacio.
¿Como modifico el gran espacio entre las imagenes de un post?

Anónimo

Lui-Ka Tu plantilla no es de Blogger original, así que lo único que veo que pudiera controlar eso es este código:

.post_thumbnail {
padding: 6px;
background: #eee;
border: 1px solid #ddd;
margin: 0 10px 10px 0;
}

Ahí deberías reducir el padding e incluso el margin (menos de 10px)...

Miriam

Hola, Rosa. Tengo problemas para quitarles el borde a las fotos.. He intentado todo lo que pone en esta página y en el post de "quitar borde a las imágenes" y nada, no lo consigo.

No me deja poner todo lo de edición HTML pero en border aparece esto:
"><img border="0"
Muchas gracias por adelantado.

Anónimo

Mirian Localiza esto en tu plantilla:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 4px;
background: #ffffff;
border: 1px solid #660000;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

De la primera línea de ese código elimina esto:
.post-body img, .post-body .tr-caption-container,

No guardes los cambios sin mirar antes en vista previa, pues es una plantilla de las nuevas y no estoy segura si sirva...

Andrés Pintor

Hola Rosa. La verdad es que estoy muy fascinado con tu blog. Yo soy profesor de Ciencias Sociales e instalé el menú con sub-menús en mi blog. Se ve fantástico. El problema que planteo es el siguiente:
Un amigo también lo ha copiado y lo que le ocurre es que al pasar el mouse por las pestañas, las subpestañas se despliegan pero sólo un poco quedando el resto de las subpestañas como por debajo del cuerpo del blog.
Comprendo que has dedicado mucho tiempo a ese tema y que somos muy, muy, pero que muy pesados. Si tu encuentras una solución y me la puedes ofrecer te lo agradecería.
Gracias de antemano.

Anónimo

Andrés Pintor Precisamente cerré los comentarios en esa entrada porque el menú no va bien en algunas de las nuevas plantillas de Blogger... y si. ese es el problema, los submenues se "esconden" debajo del cuerpo del blog... para solucionar esto habría que ver cada caso por separado y hacer cambios, no en el menú, sino en la plantilla, lo cual sería para mi un trabajito de chinos, ya que es complicado el manejo de estas plantillas fuera del Diseñador...

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