Primer Tutorial: Efectos en las Imagenes de tu Blog

Bueno he decidido hacer este tutorial porque varias personas me han preguntado cómo le hago los efectos de opacidad y del borde a mis imágenes. La verdad es que le da un aspecto muy bonito a las imágenes y es bastante sencillo, pero cualquier duda me dejan un comentario, sí? Comencemos.Click en "Sigue Leyendo"...

1. Van a la pestaña Plantilla de su blog, y entran en la Edición HTML
2. Buscan en el código (CTRL+F para que salga el buscador) lo siguiente:

.post-body img  

Y tienen que borrar todo lo que aparece hasta el } algo así:

  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

3. Cuando lo borraron, copian y pegan este otro código:

padding: 9px;
background: url('url de tu imagen');
opacity:.72;
filter: alpha(opacity=72);

Y luego, pueden cambiar los valores, acá les explico para que sirve cada uno.

+ padding es el "ancho" del borde, pueden hacerlo más grande o más pequeño, a su gusto.

+ background es el fondo:

- puede ser una imagen, en cuyo caso sólo reemplazan el url de la imagen por el link de la imagen que quieren que se vea de fondo o;

- puede ser un color; en tal caso tienen que borrar url('url de tu imagen') y reemplazarlo por el código del color que quieran, por ejemplo: background: #ff0000;

+ opacity es la opacidad de la imagen, podes subir o bajar, como gusten, pero fijense que siempre coincidan el valor de este campo y filter

4. Lo que sigue es para los efectos de cuando pasamos el mouse por encima de las imágenes. Justo debajo del código anterior, pero después del corchete } pegan lo siguente:

.post-body img:hover {
padding: 9px;
background: url('url de tu imagen');
opacity:.99;
filter: alpha(opacity=99);
}

Y bueno, los campos son lo mismo... pueden cambiarlos o dejarlos igual. No lleven la opacidad más allá de 99 porque no va a servir el efecto.

Luego guardan cambios y los efectos deberían apreciarse :) Espero que se haya entendido, que les guste y les sirva. Cualquier duda, ya saben que aquí estoy. Besos! :D

Creditos: (X)