Blogger: bonito efecto con las imágenes para tu blog

A veces, darle un toque de originalidad a tu blog puede ser algo muy simple. Apenas un toquecillo de magia en las imágenes.

Por ejemplo:

Una ligera inclinación y un sutil movimiento al pasar el ratón sobre ellas.


Es un efecto elegante que le dará un toque de distinción a tu blog en Blogger.

Para hacerlo simplemente tienes que agregar los siguientes parámetros a la hoja de estilos:

.post img { -webkit-transition: -webkit-transform .15s linear;  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); padding: 5px 5px 5px 5px; -webkit-transform: rotate(+2deg); -moz-transform: rotate(+2deg);
} 
.post img:hover { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg);
}

¿Dónde colocar el código anterior?


En el panel de control de tu blog de Blogger entra en "Plantilla".

Luego en "Edición de HTML" y "Continuar".

Busca en el código:

]]></b:skin>

 Y coloca los parámetros anteriores justo antes.

Guardar plantilla... y listo.

A partir de ahora todas las imágenes insertadas en los artículos exhibirán este efecto.

Puedes ver otro ejemplo en este otro blog con una plantilla por defecto de Blogger y algunas imágenes más: La nuda esperantisto.

¿Te gustó?

Déjanos un saludito en los comentarios... anda payo.