Ir al contenido principal

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.

Comentarios

Entradas populares de este blog

Megapost discografías de metal [MEDIAFIRE]

Aquí le presento esta gran colección discografías de metal en MEDIAFIRE!! son en total 47 discografías!!!  estan disco por disco en una carpeta para cada banda...


Para los que pidan pass:

metalbajo0.blogspot.com

¿Sabías esto? Curiosidades para culturizarse

¿Sabias esto? Hola! en este post les voy a mostrar algunas curiosidades, no enfocadas a un tema especifico.. sino a todo en general...
Para que se culturicen!

EMPECEMOS...



T I T A N I C



En 1898, catorce años antes de que el Titanic zarpara, el marino estadounidense Morgan Robertson escribió una novela llamada Futilidad, sobre un lujoso barco que se hunde en su viaje inaugural al chocar contra un iceberg en el Atlántico. La nave, era la más grande del mundo, con un casco triple e imposible de hundir. Sus pasajeros eran la crema y nata de la aristocracia y además, no había suficientes botes salvavidas. El nombre de la embarcación era, créalo, El Titán.



LA IZQUIERDA y LA DERECHA



¿Sabías a qué se debe la denominación de DERECHA E IZQUIERDA de las tendencias políticas? En la Asamblea francesa de 1789, los conservadores se sentaron a la derecha del presidente de ésta y los radicales lo hicieron a la izquierda.



IRANGATE, PEMEXGATE, etc.



¿Sabes porqué a varios escándalos políticos se les l…

Las 40 mejores fuentes grunge de DaFont.com