proximamente menu javascript

3 Columnas en Blogger

Partiendo de cualquier template de blogger, lo que aremos simplemente agregar una columna mediante la edición del codigo del template. Es solo cuestion de agregar un par de lineas. Como ejemplo usare el template de blogger: "Stretch Denim"

Vamos a "Diseno" y luego a "Editar código HTML"

Busquemos en el codigo abajo de "Editar plantilla" el  bloque:

#main-wrapper {  
margin-$startSide: 1%;  
width: 64%;
float: $startSide;  
background-color: $mainBgColor;  
display: inline;       /* fix for doubling margin in IE */  
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 */
}
#sidebar-wrapper {  
margin-$endSide: 1%;  
width: 29%;  
float: $endSide;  
background-color: $mainBgColor;  
display: inline;       /* fix for doubling margin in IE */  
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 */ 
}

Ahora haremos algunas modificaciones en este bloque.

1) Agregar el siguiente  codigo justo abajo del bloque:

#sidebarleft-wrapper {  
margin-left: 1%;  
width: 20%;  
float: left;  
background-color: $mainBgColor;  
display: inline;       /* fix for doubling margin in IE */  
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 */ 
}

2) Ajuste de los tamanos de las columnas. Editando el width de las columnas que estaban por default.

#main-wrapper {
...
width: 56%;
...
}
#sidebar-wrapper {
...
width: 20%;
...
}

Luego de hacer estos cambios a este bloque de codigo solo falta agregar efectivamente la columna al blog.
Busqué el codigo en verde y agrege justo arriba el codigo en rojo.


Con esto basta!! Ahora su blog ya tiene 3 columnas!!