Dividir a Sidebar em Colunas no Blogger

Você já deve ter observado que aqui no meu blog as minhas colunas laterais são dividas com 1 coluna larga no topo(superior), 2 colunas laterais estreitas no centro e 1 coluna larga no bottom (inferior).
Com essa divisão, podemos aproveitar melhor o espaço no template, a sidebar fica com mais espaço para os elementos , o que nos dá mais opções de utilização.
Resolvi ensinar como eu dividi a sidebar em colunas.
Vou utilizar aqui nos exemplos as medidas que eu utilizo aqui no Template do blog, mas você deverá alterá-las de acordo com as medidas do seu template, não esqueça!

[alerta]Importante:
Os novo templates do Blogger , Designer de Modelo, possuem a opção de dividir a sidebar em colunas diretamente pelo painel do blogger, sem a necessidade de inserção de códigos, basta ir no menu “modelo >>personalizar” e escolher a opção de layout, salvar e pronto![/alerta]

COMO DIVIDIR A SIDEBAR EM COLUNAS NO BLOGGER:

Este tutorial se aplica apenas para usuários que utilizam os antigos templates padrões do Blogger (Minima), ou templates já modificados.

O 1º passo é fazer um backup do seu Template para evitar transtornos, se algo sair errado.

2º Passo – retire todos os widgets existentes na sua sidebar. Mova-os para o Footer ou para a área de post.

3º passo – Aplicar os estilos, determinando a largura de cada coluna e a flutuação, e para isso, vá em”modelo” em “Editar HTML”, (não precisa clicar em ‘Expandir modelos de widgets’), e procure pela tag abaixo:

#sidebar-wrapper {
width: 370px; /* ajuste a medida */
float: $endSide;
word-wrap: break-word;
overflow: hidden; 
}

E acrescente logo abaixo:

#sidebar-top {
width: 360px; /* ajuste a medida */
float: right;
}
#sidebar-left{
width: 180px; /* ajuste a medida */
float: left;
}

#sidebar-right {
width: 180px; /* ajuste a medida */
float: right;
}

#sidebar-bottom {
width: 360px; /* ajuste a medida */
float: right;
}

No Template Mínima, por exemplo, a #sidebar-wrapper, possui uma largura (width) de 220px;.
Você deve ajustar a medida das colunas de acordo com o modelo do seu template, não esqueça!

Agora devemos fazer com que seu HTML reconheça as colunas que você definiu os estilos, e para isso você deverá acrescentar a id a cada section do corpo HTML.
Localize o seguinte código:

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

E substitua por:

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

<b:section class=’sidebar’ id=’sidebar-left’ preferred=’yes’/>

<b:section class=’sidebar’ id=’sidebar-right’ preferred=’yes’/>
<div class=’clear’/>

<b:section class=’sidebar’ id=’sidebar-bottom’ preferred=’yes’/>
<div class=’clear’/>
</div>

Visualize para verificar se deu tudo certo e salve!