Efecto de opacidad en tu blog

Hace unos dias vi en el blog de Gem@ una forma de editar el css para que se hagan transparencias en las columnas de la sidebar, la cabecera y la columna de los posts, es totalmente personalizable y que muy vistoso.



Primero que nada...

Etramos a Blogger, vamos a Diseño/edición HTML ahí mismo vamos a agregar los codigos nesesarios. Lo que esta con color blanco es lo que está en la plantilla, el texto color gris es lo que vamos a agregar.

Añadiremos opacidad a header, la cabecera de nuestro blog:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #135070; /*Si no querés borde borrá esta linea*/
background-color:#135070; /*El color de fondo se puede personalizar*/
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
}

Main. Espacio de las entradas.

#main-wrapper {
width: 410px;
float: $startSide;
border:1px solid #135070;/*Si no querés borde borrá esta linea*/
background-color:#135070;/*El color de fondo se puede personalizar*/
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Columna o sidebar:

#sidebar-wrapper {
width: 220px;
float: $endSide;
padding: 5px;
border:1px solid #135070;/*Si no querés borde borrá esta linea*/
background-color:#135070;/*El color de fondo se puede personalizar*/
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

El resultado de estos cambios daría como resultado algo asi(sin imágen de fondo):



Nos falta añadir la frutilla de postre que sería una imagen de fondo y lo haremos localizando body al principio los CSS.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-color: #056cb1;
background-image: url(url-de-la-imagen); /*La direccion de la imagen de fondo, por ejemplo: http://hosting/carpeta/imagen.jpg*/
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
border-color: #ffffff;
border-width:0px ;
border-style: solid;
}

El cambio es asombroso ¿verdad?



El resultado no es más que un ejemplo, si jugás con los valores de la opacidad y el color de background tendrás una plantilla personalizada a tu gusto.