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.
31 comentarios:
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
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
muy bueno ese truquito rosita XD
gracias y salu2
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
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
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!
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
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...
JEDIMASTER, ¿a que código te refieres? :-X
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!! :((
Ahora sí lo logré!!!!!!!!!!!!!!!!!!!!Qué felicidad!
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!
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
si! pensé que no había entendido nada!!! pero me dijo "pos a ver qué pasa!!" y...
¡funcionó!
Ay Rosa!!! eres una genia!!!
Lucero
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!
onlywebfm , localiza este código en tu plantilla:
img {
border: 0px
}
Justo debajo pega esto:
a img{ border-width:0}
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
Gracias Rosa! muy bueno
punquinbund.blogspot.com
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
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.
Denshou Coloca esto en el CSS (antes de ]]></b:skin>):
a img{ border-width:0;}
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
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
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
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.
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?
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)...
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.
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...
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.
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.
Comentar con el formulario antiguo