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á emwidth) é 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>