Adicionar Coluna ao Blog

1º passo é fazer um backup do seu Template para evitar transtornos. Vá em "design" >>"editar html" e clique em "salvar modelo completo".


Agora você precisa se familiarizar um pouco com o seguinte trecho do codigo em seu Template para poder entender a funcionabilidade dele. Aconselho que leia este artigo:
Elementos Básicos do Blogger.

Agora vejamos como adicionar uma nova coluna sidebar ao template:

Procure por esta parte do codigo HTML (use ctrl+f se preferir):

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}

#main-wrapper {
margin-left: 3px;
width: 468px;
float: left; (ou $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 {
margin-right: 0px;
width: 210px;
float: right; (ou $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 */
}

Lembre-se que Outer-Wrapper é onde contém tudo o que está no template, main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (coluna do perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar-wrapper, este código:

#newsidebar-wrapper {
margin-left: 0px;
width: 210px;
float: left;
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 */
}

Se você quiser aplicar estilos a essa nova coluna, como cor de fundo, por exemplo, você deverá incluir a linha de código nesta parte.
Por exemplo: aplicar cor de fundo, inclua:background: #000;
na linha #newsidebar-wrapper

Atenção: Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora procure esta parte do código HTML:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

e cole ANTES dela:

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

Lembre-se que os elementos precisam estar dispostos na ordem estabelecida no HTML.
Se a 'Newsidebar' tem float: left; (flutuação à esquerda) o elemento 'div' deve ser colocado no HTML ANTES da 'div' Main-Wrapper, ficando assim:

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


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>


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

Neste exemplo, newsidebar-wrapper (nova coluna) flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita.

Editando a largura das colunas:

Procure no código:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:0px;
text-align:left;
font: #000000;
background-color: #ffffff;
}

#main-wrapper {
margin-left: 5px;
width: 450px;
float: left;
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 {
margin-right: 0px;
width: 250px;
float: right;
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 */
}

#newsidebar-wrapper {
margin-left: 0px;
width: 250px;
float: left;
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 */
}

Lembre-se que:#main-wrapper se refere à coluna do post, se você quiser aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.#sidebar-wrapper se refere a coluna do perfil, os valores de WIDTH devem ser alterados. Lembre-se de configurar a largura que está estipulada em #outer-wrapper , sem ultrapassá-la.#newsidebar-wrapper se refere a nova coluna. Os valores de WIDTH devem ser alterados de acordo com o mesmo que você estabeleceu na coluna #sidebar-wrapper.

Se você aumentar a largura das colunas sidebar, deve observar qual a largura que está estipulada em outer-wrapper e em main-wrapper, e deve ajustá-las. Caso contrário seu template pode ficar com uma aparência desconfigurada.

Dica: O ideal é estabelecer uma largura width:1000px para outer-wrapper,
width:450px para main-wrapper e width:250px para sidebar.