Crear una nueva sidebar

Para crear una nueva Sidebar o Columna en el blog primero nos vamos a Diseño: Edición HTML y buscamos Outer-Wapper...

/* Outer-Wrapper----------------------------------------------- */

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 {
width: 220px;
float: $endSide;
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 */
}

Necesitamos modificar el tamaño del Outer-Wapper, Main-Wapper y Sidebar-Wapper.

Ojo: Podemos jugar con el tamaño de estas opciones para agrandar y achicar todas las columnas...


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Lo modificamos en vez de 660px le ponemos 750px o 950px eso depende del tamaño qie desees las columnas. Al modificarlas quedarian de esta forma

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Luego modificamos el Main-Wapper

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Al igual que el Outer-Wapper el width se modifica en vez de 410px lo cambiamos a 400px, eso tambien va a depender del tamaño del Outer... **No se olviden podemos jugar con los tamaños**

Al finalizar quedara de la siguiente forma:

#main-wrapper {
width: 400px;
float: $startSide;
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 */
}

Bueno chicas ya casi terminamos, ahora es el turno de modificar el Sidebar-Wapper

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Cambiamos el width en vez de 220px ponemos 150px, como les vengo diciendo todo depende del tamaño del Outer, ya que tenemos que cuadrar las tres columnas que son las dos siderbar y el main "el main es donde publicamos".

Al realizar el cambio nos quedara algo así...

#sidebar-wrapper {
width: 150px;
float: $endSide;
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 */
}

Luego colocamos justo despues del codigo lo que esta en negrita:

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
}

Al añadir este codigo debemos decidir de que lado queremos la columna si a la derecha o izquierda... en algunos caso el codigo HTML nos pide la ubicación de la siguiente forma: para la derecha float:$endSide; y para la izquierda float:$startSide;
Así podemos ubicar las sidebar a los lados del blog.

Por ultimo nos ubicamos en: div id='content-wrapper'

y añadimos el siguiente codigo

Guardamos y listo...

Suerte... cualquier duda solo preguntame :)