efectos post

¿Cómo añadir fondos transparentes en Blogger?:

Para ello necesitas conocer la class o id a la cual le asignarás la opacidad. Utilizaré como ejemplo los posts (Entradas).

La clase que define una entrada corresponde a ''post''. Como es una clase y no un ID con el que se trabaja, la sintaxis CSS es la siguiente:

.post {
atributos css
}

Cuando hayas encontrado el valor .post en tu plantilla procederemos a añadir el color de fondo y el nivel de transparencia de la siguiente forma:

background-color: rgba(63, 72, 204, 0.5)

Explicación:

• El primer valor (63) corresponde a rojo.
• El segundo valor (72) corresponde a verde.
• El tercer valor (204) corresponde a azul.
• El cuarto valor (0,5) corresponde al porcentaje de transparencia del fondo.

Para añadirlo a una entrada (post), deberá quedar de esta forma:

.post {
background-color: rgba(63, 72, 204, 0.5);
otros atributos de las entradas
}

Recuerda que se puede utilizar para lo que desees, yo lo utilicé en las entradas para tener un ejemplo con el cual trabajar.

MÁS EFECTOS

.post {
color:#000000;
padding:4px 18px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

Edita el valor 8 resaltado en color verde por una cifra superior o inferior para añadir menos o más opacidad -respectivamente- a las entradas. Ten en cuenta que no debes incluir un valor que sobrepase el 9 o que sea inferior al 1.

Para añadir una imagen o un color de fondo al post, utiliza el atributo background bajo .post { tal y como se muestra a continuación:

.post {
background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 transparent;

Reemplaza URL DE LA IMAGEN por la dirección de la imagen.

Utiliza esta otra línea en caso de querer el fondo en color:

background:#cccccc;

#cccccc es el código del color escogido. Edítalo a tu gusto accediendo a la tabla de colores.

Guarda la plantilla y comprueba el resultado en varios navegadores para asegurarte que la opacidad se aprecia bien.