Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog. Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta: ...e, inmediatamente antes, pegamos el siguiete código: .post img, table.tr-caption-container {
padding: 0px;
border: 8px solid #fe4a4a;
}
|
Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos: - El resaltado en
este color adjudica un espacio entre el borde y la imagen, que en este ejemplo no existe ya que es de cero pixeles. Si queremos que haya ese espacio cambiamos el cero por el número de pixeles que le dé el espacio deseado.
- El resaltado en
este color adjudica el ancho al borde.
- El resaltado en
este color es la propiedad que le da un estilo al borde. Ese estilo puede ser:
dotted: borde en línea punteada.dashed: borde en línea discontinua.solid: borde normal o en línea continua.double: borde en línea doble.groove: borde con efecto ranura o acanalado.ridge: borde con efecto cresta, rugosidad o cordoncillo.inset: borde con proyección o perspectiva hacia adentro.outset: borde con proyección o perspectiva hacia afuera.
- El resaltado en
este color es el código hexadecimal del color adjudicado al borde.
Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):
Imagen sin borde |
|
Código | Borde |
.post img, table.tr-caption-container {
padding: 0px;
border: 5px dotted #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 5px dashed #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px solid #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px double #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px groove #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px ridge #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px inset #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px outset #fe4a4a;
} | |
|
14 comentarios :
Hola! Probé con todos los códigos y todos se ven iguales :/, liso y blanco, pero gracias! Se ven mejor así las fotos que sin nada :)
Aini, Revise que el código esté correcto, incluyendo el código hexadecimal del color que le está poniendo al borde. Este código se probó con todos los navegadores y con todos funciona bien.
Saludos.
Queria dar las gracias por este sencillo truco, me ha funcionado perfectamente.
Muchas gracias
¡Felicitaciones Marga!
Buen día, yo llegué aquí buscando eliminar los bordes que traia por defecto mi template, espero me sirva, saludos cordiales!
¡EXCELENTE! ¡Muchas gracias! ;)
Estupendo!
Sencillo y efectivo.
Pero hay algo que me gustaría corregir: cuando pongo una leyenda a una imagen, sale también el reborde a su alrededor, y no queda bien. ¿Podría eliminarse?
Gracias
perfecto..... funciona perfectamente
hola que tal, y como hago para colocar el borde a una imagen de la entrada, no a todas.
Estudio Contable FyS,
La respuesta está en este tutorial:
http://bloguermast.blogspot.com/2015/04/borde-imagenes-blogger.html
Saludos.
¡Gracias! No tenía ni idea de cómo hacerlo.
www.caminantenohaycamino.com
¡Con mucho gusto, Ana y Juanna!
Muchas gracias! Me funcionó muy bien.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.