Efectos Para imágenes de Blogger

Hola este es el segundo tutorial que hago hoy *-* y consiste en como poner efectos en las imágenes de Blogger.No es nada dificíl.
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  
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
 Y tienen que borrar las 4 o 5 líneas que les aparecen justo hasta el } (el corchete NO lo borren), van a ser algo como esto:
  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 a ver, pueden cambiar los valores, acá les explico 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, lo que se ve en el borde. 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: #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); 
Espero que las ayudo este tutorial *-*
Si tienen alguna duda comenta *-*
Besos. 






0 comentarios:

Publicar un comentario