Fondo de entradas transparente para blog blogger

Para lograr que nuestras entradas luzcan transparentes debemos editar la plantilla de tu blog de blogger. Para esto debes seguir los siguientes pasos:










1. Ingresar a la pagina de blogger: blogger

2. Ingresamos a la opción plantilla:

3. Luego de ingresar a plantilla ingresar a Edición de HTML

4. Seguir y apretar continuar

5. En Edición de HTML hacer check en la opción de Expandir plantillas de artilugios.

La única dificultad está en encontrar cuál es el selector que forma los posts. Si ya estás familiarizado con tu plantilla sabrás cual es, si no, empieza por buscar .post que es la denominación más habitual.

Una vez localizado, se trata de insertar la propiedad que indica la opacidad de la capa. Cómo cada navegador usa una distinta, para cubrir el máximo posible de situaciones, utilizaremos todos los conocidos:

.post {
overflow:visible;
position:relative;
background:#cccccc;
margin:.5em 0 1.5em;
border:4px solid #990000;
padding:20px 30px 10px 30px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity: 0.9;
-khtml-opacity: 0.9;
}

Aca en mi caso yo no encontre .post pero lo hice en #content y funciono igual:

#content {
background: #FFFFFF;
float: left;
width: 600px;
margin: 5px 0px 0px 0px;
padding: 10px;
color: ##000000;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity: 0.9;
-khtml-opacity: 0.9;
}

Las cinco últimas líneas son las que habría que insertar. Los parámetros de las dos primeras van desde 0 (transparencia total) a 100 (opacidad total). Las tres últimas van desde 0.0 hasta 1.0. Cambiando esos valores podremos conseguir una mayor o menor transparencia que la del ejemplo. Teneis que utilizar el mismo porcentaje para las cinco propiedades, porque si no, en cada navegador se vería de una manera distinta.

Igual que hemos hecho con las entradas, se puede hacer con la barra lateral, la cabecera, el pie... o con todos a la vez. Sólo hay que aplicarlo en la clase correspondiente de nuestro CSS.