Saiba como ..."Adicionar uma coluna no template"

"Usando um template Mínima do Blogger como base 
para este tutorial, entenda que a 

estrutura das 

colunas se apresenta desta forma, no

 CSS:"



/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
   width: 410px;
  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 {
   width: 220px;   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 */
}

Onde Outer-Wrapper é a maior DIV do 

template 

 e 

contém todas as outras 

(header, 

main, 

sidebar, 

footer) 




Main-wrapper é a coluna do post 


e 



sidebar-wrapper

 é a coluna lateral (perfil).


Para adicionar uma nova coluna oposta

 a sidebar, é


 necessário primeiro 


criar espaço para ela 



dentro de


 Outer-wrapper. 


No template Mínima a largura de 

Outer-Wrapper (a largura de uma coluna 

está em 

width) é de 660px e a soma da largura de 


main-wrapper (410px) 

e sidebar-

wrapper(220px) 

dá 

um 

total de 630px 



Veja a imagem abaixo:

Então,  
para acrescentar uma nova coluna 

 é preciso aumentar o espaço,  

a largura de Outer-Wrapper.

Para acrescentar uma nova sidebar,

...copie o código abaixo 

...e acrescente logo após os códigos para 

sidebar-wrapper:



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

Note que sidebar-wrapper tem float: right (flutua à direita) e newsidebar-wrapper tem que terfloat:left (flutuação à esquerda).

Lembre-se:  
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>

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

fonte e créditos:                                                                                                                      
templatesparanovoblogger