Poner borde a imágenes de una entrada en Blogger

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos: Imagen a la izquierda <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div> Imagen a la derecha <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div> Imagen en el centro <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div> En URL ponemos la URL de la imagen correspondiente. En COLOR ponemos el número correspondiente al código del color que se asigne al borde. Códigos de colores HTML aquí.

Twittear

Poner borde a imágenes de una entrada en Blogger

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos: Imagen a la izquierda <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div> Imagen a la derecha <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div> Imagen en el centro <div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div> En URL ponemos la URL de la imagen correspondiente. En COLOR ponemos el número correspondiente al código del color que se asigne al borde. Códigos de colores HTML aquí.

Twittear

Poner borde a las imágenes de las entradas en Blogger

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: ]]></b:skin> ...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; } Twittear