Nueva sidebar dividida en dos

Para explicar estas modificaciones, damos por hecho que la plantilla a la que vamos a hacer los cambios tiene solamente una sidebar y, por descontado, que lo más adecuado sería tratar de hacer los cambios en un blog de pruebas antes de pasarlos al "original".

Para mi ejemplo usaré la plantilla Mínima de Blogger con sus medidas originales.
Haremos todos los cambios sin "expandir las plantillas de artilugios".

[1] Localizamos el código CSS que corresponde a la sidebar que ya tenemos en la plantilla y que será algo como esto:

#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 */

}

Lo copiamos y justamente debajo pegamos la copia y le cambiamos la id, por ejemplo a sidebar-wrapper-doble:

#sidebar-wrapper-doble {

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 */

}

[2] Debajo de ese mismo código que acabamos de añadir, pegamos este otro que servirá para controlar las dos columnas de la nueva sidebar:

#columna-izda {

width: 48%;

float: left;

}

#columna-dcha {

width: 48%;

float: right;

}

[3] Bajamos ahora hacia el HTML de la plantilla para localizar el código de la sidebar que ya tenemos:

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

Añadimos, justo debajo, el código para la nueva sidebar con sus columnas incluidas:

<div id='sidebar-wrapper-doble'>
<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>

Ejemplo de resultado: