Enmarcar las imágenes de tu blog

Tal vez quieras enmarcar las imágenes de tu blog con un borde colorido y agregar un fondo de un color específico para alegrar un poco tus entradas.

Hay varias formas de añadir bordes a una imagen. En esta entrada podrás conseguirlo añadiendo un bloque de propiedades en tu plantilla y utilizando después un div.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade lo siguiente:

#marcobalcn img {
border: 2px solid #c3c3c3;
background: #ffffff;
padding:5px;
display:block;
}

Ahora podrás editar las propiedades del marco, pero antes necesitas conocerlas:

- border: 2px solid #c3c3c3; Es la línea del borde.

El grosor es de 2px pero puede aumentarse o disminuirse el valor para agrandarlo.

El estilo de borde es solid (normal). Puedes elegir otros bordes, como dotted (punteado) o dashed (lineal) entre otros ^[+].

#c3c3c3 es el color del borde. Puedes elegir tu color / tonalidad favorita usando la tabla de colores.

- background: #ffffff; Es la línea del fondo.

Para cambiar el color actual (#ffffff / blanco) utiliza la la tabla de colores.

Una vez hayas terminado de editarlo todo, guarda la plantilla:




Ahora, para aplicar el marco en cualquier imagen, ve a una entrada cualquiera.

Pega este bloque de código:

<div id="marcobalcn">
<img src="URL DE TU IMAGEN">
</div>

Sustituye URL DE TU IMAGEN por la dirección de tu imagen ^[+] y publica la entrada.

Nota:

Para no tener que copiar y pegar el código de la caja en tu blog cada vez que quieras usarla, introdúcelo en la plantilla de entrada que nos ofrece blogger ^[+].