Dividindo a Sidebar em duas

Em vez de ter várias colunas, tenha uma sidebar dividida em duas, igual a nosso aqui do Ajuda no Blogger:

Faça sempre o backup de seu template antes de mecher nele! Não sabe fazer backup? Clique aqui!

Para fazer isso, vá no seu blog, “Layout” > “Editar HTML”. NÃO precisa selecionar a caixinha “Expandir modelos de widgets”. Procure pelo seguinte código:

#sidebar-wrapper {

Abaixo de #sidebar-wrapper {, terá outros códigos, que pode estar diferente com o exemplo abaixo:

#sidebar-wrapper {
width: 400px;
margin: 2px;
float: right;
background: #ffffff;
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 */
}

Abaixo do trecho acima você coloca: 

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

Agora procure por:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

O trecho em negrito acima, representa a gadget em sua sidebar. Pode ser que em seu html, não tenha o trecho em negrito ou pode ter mais de um trecho em negrito.

Coloque o código abaixo entre </b:section> e </div>:

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

Ficando assim por exemplo:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>

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

</div>

Salve e veja como ficou.

Se o header e o footer ficaram pequenos ou disporporcionais, mude-os:

Procure:

#header-wrapper {. Abaixo deste tag, vai ter a linha width. Mude o número da linha width. Número maior, maior fica o header, número menor, menor fica o header.

Se por exemplo a linha é:

#header-wrapper {

width: 600px;

Mude o número!

Agora procure por: #footer {

Faça a mesma coisa que você fez com o header. Mude o número da linha width.

E se as colunas ficaram pequenas, altere os valores:

Procure por: #sidebar-wrapper {

Mude o número da linha width. Igual você fez com o header e o footer.

Para finalizar, se sua coluna das postagens ficou pequena, mude os valores.

Procure por: #main-wrapper {

Mude o número da linha width. Igual você fez com o header, o footer e a sidebar.

Fonte:  El Escaparate de Rosa