Como adicionar 2 colunas no footer do blog

Por vezes não fica bom adicionar muitas widgets nas colunas laterais, pois pode causar muita poluição visual. Nesse caso, você pode incrementar seu blog usando também o espaço do footer, ou seja, o rodapé. Os templates oferecidos pelo Blogger vêm com um rodapé que ocupa a largura toda do blog. Você pode dividir esse espaço em colunas.

Há vários tutoriais ensinando como adicionar 2, 3 e até 4 colunas no footer, mas testei alguns deles e somente obtive exito com o acrescimo de 2 colunas. Se quiser ver o resultado visite meu outro blog  clicando em Mariana Belem Show e observe como ficou. O código que segue abaixo foi para adiconar 2 colunas na cor cinza. Você pode alterar para a cor que preferir.

1) Antes de mais nada, salve seu template baixando o modelo completo;

2) Mova temporariamente todos os elementos que estão no seu footer para a sidebar, pois , ao criar as duas colunas, você pode perdê-los;
.

3) Em editar html (não precisa expandir o modelo), procure por:

#footer

Você encontrará algo como:

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Trata-se do código do footer que já existe. Você pode deixá-lo ali, assim terá a opção de utilizar esse espaço além das 2 colunas que serão criadas;

4) Acrescente logo abaixo o seguinte código:

#footer-wrapper{background-color:#666666clear:both;width:100%;}
.footer-column{text-align:center;margin:0;width:48%;}
.footer-bottom{text-align:center;padding:10px;}

5) Depois, procure o código abaixo:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

6) Substitua-o por:
<div id='footer-wrapper'>
<div class='footer-column' style='float: left;'>
<b:section id='footer-left' preferred='yes'/>
</div>
<div class='footer-column' style='float: right;'>
<b:section id='footer-right' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='footer'>
<b:section id='footer-botom' preferred='yes'/>
</div>
</div>

7) Clique em Visualizar. Se estiver tudo certo, clique em Salvar Modelo.

Agora é só acrescentar as widgets que você quiser. Vale lembrar que o código está preparando para a cor de fundo cinza (#666666), mas você pode alterar a cor de background e os pixels de margin e padding, para se adaptarem ao formato do seu blog.

Leia também:
Título do blog em movimento