Colocar uma Coluna no template do Blogger

Você tem um template que adora e não
está nem um pouco afim de trocar ele só para
conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar
passo-a-passo como adicionar uma nova coluna no template.



Vamos nos familiarizar com o seguinte trecho do CSS do seu template
(pode haver pequenas variações mas o
básico é isso):



/* Outer-Wrapper

----------------------------------------------- */

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

}





Onde Outer-Wrapper contém tudo o que está no
template, main-wrapper é a coluna do post e sidebar-wrapper
é a coluna lateral (perfil).

O que vamos fazer é adicionar outra coluna colando logo
abaixo de sidebar, 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 */

}



Atenção para as medidas: a soma da largura do
post mais as duas colunas laterais tem que ser menor do que o valor
width de Outer-Wrapper. Não esqueça de somar
bordas e o espaçamento que talvez você deseje que
tenha entre as colunas.



Agora desça a página até encontrar
esta parte do código (HTML):



<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

</b:section>

</div>



e cole imediatamente ANTES este:



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



Importante: No HTML os elementos (DIVs) precisam ser dispostos na ordem
estabelecida no CSS. Ou seja, se Newsidebar tem float: left;
(flutuação à esquerda) 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>



Ou seja, Newsidebar flutua à esquerda, Main-Wrapper flutua
à direita e Sidebar-Wrapper flutua à direita e
esta disposição é obedecida no HTML.



Leia também: Como alinhar as colunas e textos do blog