Transformar um blog de 2 colunas num blog de 3 colunas

Neste tutorial vou explicar como se constroi ou transforma o teu blog de duas colunas, num blog de 3 colunas. Este era o nosso blog no início.A base deste tutorial é o template “Minima” do Blogger.
Este template é o mais simples de transformar uma vez que é o formato mais simples no que diz respeito a margens. Logo que transformes o teu blog num de 3 colunas será mais fácil depois alterar o tamanho das fontes e cores, por isso deixamos isso para depois e vamo-nos concentrar no layout.

Em primeiro lugar grava o teu blog, se houver algum problema podes sempre recuperá-lo.

Selecciona «Transferir Modelo Completo» (ver letras azuis) e guarda esse ficheiro no teu computador.
Primeiro ESCOLHE o template “Minima” e depois segue estas instruções (deverá aparecer "Minima" no local onde está o rectângulo vermelho):

Vai a Template>Edit HTML, e NÃO selecciones a caixa "Expandir modelos do widget" (onde está a elipse verde).
Agora procura no HTML esta secção:
*

#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 */ }
Copia esta secção e cola-a logo por baixo. Vamos alterar os elementos assinalados a vermelho para o seguinte:
#left-sidebar-wrapper (isto torna o CSS único para esta secção) float: left (isto faz com que a nova coluna passe para a esquerda da coluna principal)
Isto vai dar a base para a nova coluna que criaremos de seguida
Agora precisamos de encontrar esta secção abaixo:

Imediatamente antes desta secção devemos colar o seguinte fragmento de código:

Deixem-me explicar os diversos elementos deste código para perceberem o que fizemos:
div id='left-sidebar-wrapper'> Esta parte diz ao browser que a coluna do lado esquerdo existe, e para procurar no CSS o tipo de barra.
*

b:section class='sidebar' id='left-sidebar' preferred='yes'> Esta parte diz ao browser qual a tipologia da coluna e de todos os widgets a incluir. O identificador deste elemento tem que ser "left-sidebar" para que seja único, senão pode haver problemas de visualização. É preferível fazer assim, mesmo que nem sequer se utilize widgets nessa coluna.
*

Se fizerem preview ao vosso template irão reparar que a coluna da direita para já estará por baixo da coluna central (principal). Isto acontece porque ainda não alteramos as medidas das colunas, e ainda só permite ter uma barra lateral. Agora necessitamos expandir as colunas para acomodar a nova barra lateral.

*
Procurem esta secção no HTML do vosso template:
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
Necessitamos aumentar a largura em 220 pixels, por isso teremos que aumentar o valor a vermelho para 880px.

*
É também conveniente aumentar a largura do cabeçalho para 880px, para que se adeque às novas medidas do teu blog:
#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
É melhor gravar agora o novo template. A nova barra ainda não é visível pois ainda não foram instaladas novas aplicações (Widgets). Após gravar ir a Template>Page elements no dashboard do Blogger.

*
O layout deverá ser parecido com isto:

Nesta imagem nós já tínhamos adicionado vários widgets / mini aplicações à coluna da esquerda recém-criada.
*
Mas ainda não acabámos! É provável que ao adicionar elementos à nova barra, eles se sobreponham à coluna principal do blog.
Isto acontece porque não definimos espaço entre a nova coluna da esquerda e a coluna principal. É necessário criar este espaço no HTML do template. Para fazer isso vamoa adicionar margem à coluna da esquerda. Encontra o seguinte fragmento de código e acrescenta aquilo que está a vermelho:
#main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
Isto define uma margem de 20px entre a nova coluna à esquerda e a coluna principal. Devem igualmente assegurar o ajuste da outer wrapper de 880px para 900px para assegurar que a largura do blog é a suficiente para acomodar esta nova margem também. Se fizerem preview ao vosso template deverá assemelhar-se com este:

Gravem e apreciem o novo blog com 3 colunas!

Podem configurar igualmente a nova coluna para ficarem com a coluna principal à esquerda e duas colunas à direita se preferirem. Basta para isso colocarem float:right;

*

Nota - a última medida sublinhada a vermelho pode ter que ser ajustada para 10px, ou outro valor... Basta irem experimentando :)