Aprenda a Adicionar uma Coluna ao 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 ter float: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):

e cole imediatamente ANTES este:

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:

Alinhando as Colunas

Vou usar, novamente, o Template Mínima (do Blogger), como exemplo.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
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 */
}

Recapitulando: Outer-wrapper é a largura total do template, por isso, ao acrescentar uma coluna, você deve somar os valores da largura de todas as colunas e o valor total não pode ultrapassar o valor da Outer-Wrapper (width= largura). Aqui, por padrão, a largura total é só de 660px e para inserir uma nova coluna é preciso aumentar este valor, ou a coluna desce.Vamos aumentar para 850px e inserir uma nova coluna de 200px. Vai ficar assim:

410px (main) + 220px (sidebar) + 200px (newsidebar) = 830px

Inserindo a coluna, não esqueça de posiciona-la (float) e tenha atenção para que, quando se insere uma nova coluna, ela está vazia (não tem elementos de página), portanto, quando você visualizar não vai ver nada e a coluna do post vai tomar o lugar dela. Explicando melhor: você tem um Mínima e colocou uma nova coluna com float: left; mas visualizou e o que estava à esquerda era a coluna do post. Salve, vá em Modelo e você verá a coluna lá. Coloque algum elemento de página e pronto, a sidebar aparece e a coluna do post vai para o centro da página.

No meu exemplo ficou uma sobra de 20px e a nova coluna que inserí à esquerda, ficou colada na coluna do post:

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

#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
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;
border: 1px solid $bordercolor;
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 {
width: 200px;
border: 1px solid $bordercolor;
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 */
}

Veja a imagem correspondente (clique para ampliar):

Veja que só inserindo coluna sem determinar margin, a nova coluna e a coluna do post ficaram grudadas. Vamos arrumar isto:

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

#main-wrapper {
width: 410px;
border: 1px solid $bordercolor;
margin-left: 7px;
border: 1px solid $bordercolor;
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: 210px;
margin-right: 5px;
border: 1px solid $bordercolor;
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 {
width: 200px;
margin-left: 5px;
border: 1px solid $bordercolor;
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 */
}

Veja o que eu fiz: empurrei as duas colunas laterais a uma distância de 5px das margens e coloquei uma margem de 7px da coluna do post para a esquerda. O que aconteceu? Uma das colunas desceu, por que extrapolei a conta: 5px+5px+7px= 17px. Aí você me diz, mas não era uma folga de 20 px? Era, se eu não estivesse usando bordas. Veja que todas as colunas tem 1px de borda, 1px cada lado=2px e somando as tres colunas=8px a mais na nossa conta. O que eu fiz? Repare que neste ultimo código a sidebar está agora com 210px e não mais com 220px como antes. Ficou assim:

Problema de coluna resolvido e sem massagem... (não resistí )

Agora vamos para o texto. Você vê na imagem que o texto está grudado nas bordas por que os templates do Blogger, principalmente o Mínima, não tem margem nenhuma nas colunas, Então vamos colocar. Primeiro o do post. Encontre este código:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Apague os valores em margin e coloque:
margin: 10px;

Agora procure este trecho, que se refere as colunas sidebar e newsidebar:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

onde estiver margin, apague os valores e coloque 5px. O resultado até agora é esse:



Bem melhor, né? Mas olha como o título do blog está estreito em proporção ao template novo...Vamos arrumar isto também!

encontre este trecho:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Modifique o valor de width para um que corresponda à medida nova do template. No meu exemplo eu coloquei 840px;. Ficou assim:



Bem melhor do que no começo, não?

Créditos ao Templates novo Blogger