Dividir el SideBar en dos

Una cosa que me han preguntado bastante por msn y por email es como dividir la sidebar de nuestro blog en dos. Hoy les voy a enseñar como tener una sidebar doble debajo de la sidebar de nuestro blog. No es muy dificil, pero les recomendaría que presten mucha atención a los siguientes pasos:

[1] Para empezar vamos a Diseño > Edición de html y buscamos #sidebar-wrapper, deberías encontrar algo como esto (lo rojo puede varior según las modificaciones que hayamos hecho antes):

#sidebar-wrapper {
width: 300px;
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 */
}

[2] Justo debajo del código presentado anteriormente debemos pegar lo siguiente:

#sidebar-wrapper-nueva {
width: 300px;
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 */
}
#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

[3] Modificamos lo que está en rojo por el ancho de nuestra sidebar. Por ejemplo, si nuestra sidebar tiene un ancho de 200 px, cambiamos lo que está en rojo por el número 200.

[4] Ahora busca en tu plantilla <div id='sidebar-wrapper'> y deberás ecnontrar algo como esto:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

[5] Debajo pegamos lo siguiente:

<div id='sidebar-wrapper-nueva'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section><b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>

<div style='clear: both;'/>
</div>

Con esto ya será suficiente para que tengamos nuestra sidebar doble debajo de la sidebar común de nuestro blog. Un saludo.

Nota: Debemos tener en cuenta que si el espacio de nuestra sidebar es muy pequeño, el diseño de nuestra sidebar dividida en dos será un poco feo.

Vía