Personalizar imágenes en Blogger

En el siguiente tutorial veremos cómo dar efectos y atributos a las imágenes en Blogger, usaré algunos ejemplos y daré algunos códigos para que ayudarlos un poco más.

Es importante saber que se pueden editar las imágenes (o cualquier tipo de contenido) de forma independiente y sin necesidad de afectar a todas. En esta oportunidad les mostraré cómo personalizar las imágenes de las entradas, ya que en la mayoría de los blogs se pueden distorsionar muchos elementos si les damos atributos a todas.

Paso 1: Editando las imágenes de las entradas:

Para ello, crearemos la sintaxis básica en CSS:

.post img {
acá añadiremos los atributos de las imágenes;
}

En ella daremos los atributos que estimemos necesarios, ya sean bordes, espaciados, alineaciones, etc., todo dependerá de nuestra habilidad con CSS.

Veamos algunos ejemplos de imágenes personalizadas:

Imágenes con borde blanco y sombras:

Código:

.post img {
background:#fff;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #969696;
padding: 6px;
max-width:500px;
}

Imágenes con reflexión (No funciona en Firefox ni Internet Explorer):

Código:

.post img {
border:2px solid #2d2d2d;
box-shadow:2px 2px 2px #2d2d2d;
max-width:500px;
margin:0px auto;
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
}

Imagen con borde y transición (Petición de un usuario- No es lo mismo que lo de esta entrada).

Código:

.post img {
background:#2d2d2d;
border:1px solid #000;
border-radius: 4px;
padding: 4px;
opacity: 0.7; /*Opacidad inicial*/
}
.post img:hover {
background:#a84300; /*Color del efecto*/
padding: 4px;
border:1px solid #000;
opacity: 0.9; /*Opacidad al pasar el mouse*/
-webkit-transition-duration:900ms;
-webkit-transition-iteration-count:1;
-webkit-animation-timing-function:ease-out;
-moz-transition-duration:900ms;
-moz-transition-timing-function: ease-out;
}

Bordes con redondeado parcial:

Código:

.post img {
background:#f5f5f5;
border-radius:20px 0 20px 0px;
border:1px solid #969696;
padding: 14px;
box-shadow:2px 2px 2px #c0c0c0;
}

Cualquier código que quieras utilizar deberás pegarlo antes de:

 ]]></b:skin>

Recuerda que estos son sólo ejemplos, puedes hacer mucho más con las imágenes.

Importante:

Es posible editar las imagenes de otro contenido como la sidebar, cabecera, etc editando el selector, veamos un ejemplo:

.sidebar img {
atributos;
}

Con ese elemento aplicamos los atributos a las imágenes de la sidebar.

Extra: Corregir ancho de las imágenes demasiado grandes:

En algunos blogs las imágenes cuando las dejamos con el tamaño original y estas son demasiado grandes, estas sobrepasan el ancho de la entrada. Para corregirlo deberás añadir la siguiente línea en los atributos:

max-width: 600px;

A algunos ejemplos les he aplicado el atributo, les corresponde a ustedes elegir un valor adecuado.

Importante:

Si la imagen pierde la relación de aspecto con este truco, deberás añadir también la siguiente línea:

max-height:auto;