Dividir o Footer em colunas no Blogger

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Há várias maneiras de aproveitarmos melhor o espaço no template, principalmente para aqueles que contém muitos widgets.
Já vimos aqui Como dividir a sidebar em colunas, agora você vai aprender como dividir a área do footer em colunas.

Os antigos templates padrões do blogger (Minima) e, em alguns templates já modificados, possuem apenas uma coluna no Footer, e dividindo o Footer em colunas, o seu blog fica com mais espaço para os elementos , o que nos dá mais opções de utilização.

[alerta]Importante:
Os novo templates do Blogger , Designer de Modelo, já possuem a opção de dividir as colunas do footer diretamente pelo painel do blogger, sem a necessidade de inserção de códigos.
Se você usa template Designer de Modelo e quiser dividir o footer em colunas nestes modelos, basta ir no menu “modelo » personalizar » layout” e escolher a opção de layout, salvar e pronto![/alerta]

Lembre-se que este tutorial se aplica apenas para templates Minima ou modificados. Você vai aprender a criar 4 colunas no Footer: 3 colunas laterais e uma no ‘bottom’.

[becape]O 1º passo é fazer um backup do seu Template para evitar transtornos, se algo sair errado.[/becape]

2º Passo – retire todos os widgets existentes na sua área do Footer. Mova-os para a sidebar, até finalizarmos todas as modificações.

3º Passo – Modificando o código:

No painel do Blogger, acesse o menu “modelo”, clique em “Editar HTML”, (não precisa clicar em ‘Expandir modelos de widgets’), e procure pela tag abaixo:

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

SUBSTITUA tudo pelo código abaixo:

<!-- Início do Footer-->
<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 33%;margin: 0px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes' style='float:left;'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 33%;margin: 0px 4.5px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes' style='float:left;'>
</b:section>
</div>

<div id='footer-column-right' style='float:right; width: 33%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes' style='float:right;'>
</b:section>
</div>

<div style='clear:both;'/>

<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>

</div></div>

<div style='clear:both;'/><!-- Fim área do Footer-->

Visualize, antes de salvar!
Atenção-> Ao visualizar você ainda não verá as colunas adicionadas no seu template, pois ainda não aplicamos estilos e nem acrescentamos os wigtes a elas. É o que faremos a seguir.

4º Passo – Aplicando os estilos ás colunas:

Colocarei abaixo apenas alguns exemplos de estilos aplicáveis, mas você deverá personaliza-los de acordo com seu template e gosto.
Nesta parte do código ficam os estilos de cores,é onde você pode aplicar fundo(background), bordas, cores e tamanhos da fonte etc. Use a criatividade.
Vamos as aplicações:

Volte na edição “HTML” do seu template e procure pelo trecho correspondente ao código CSS do Footer.
Geralmente está como este abaixo:

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

E SUBSTITUA todo ele pelo código abaixo:

/* Footer
----------------------------------------------- */
#footer-wrapper {
background: #efefef; /* --- escolha a cor para o background --- */
border: 1px solid #fff; /* --- escolha a cor para a borda --- */
width:660px; /* -- aplique a largura de acordo com a sua área do template -- */
clear:both;
letter-spacing:.1em;
margin:0 auto;
padding:5px; /* --- escolha a distância da borda --- */
}
#footer-column-container {
background: #ccc; /* --- escolha a cor para o background --- */
border: 1px solid #fff; /* --- escolha a cor para a borda --- */
padding:5px; /* --- escolha a distância da borda --- */
}
.footer-column {
margin: 2px; /* --- escolha a distância das colunas --- */
background: #ccccff; /* --- escolha a cor para o background --- */
border: 1px solid #fff; /* --- escolha a cor para a borda --- */
padding:5px; /* --- escolha a distância da borda --- */
color: #ccc; /* --- escolha a cor para a fonte --- */
line-height: 1.5em; /* --- escolha o tamanho da linha --- */
}
.footer-column h2 {
font-size: 12px; /* --- escolha o tamanho da fonte de título --- */
color: #cc0000; /* --- escolha a cor para a fonte --- */
border-bottom: 1px solid #fff; /* --- escolha a cor para a borda --- */
text-align: center; /* --- escolha o alinhamento do título --- */
}
.footer-column ul { /* --- configurações da lista --- */
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.footer-column li { /* --- configurações dos ítens de lista --- */
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
line-height:1.5em;
}
.footer-column .widget { /* --- medidas para os widgets --- */
margin:0 0 1.5em;
padding:0 0 1.5em;
}
#footer-column-bottom { /* --- configurações da coluna do bottom --- */
text-align:center;
}

Salve as modificações!

Veja na ilustração abaixo, um exemplo de Footer divido em colunas:

Lembre-se:eu apenas utilizei um exemplo de estilos que você pode acrescentar ao conteúdo das suas colunas do footer, mas você deve modificá-los de acordo com seu template.Para facilitar, eu destaquei os campos onde você pode personalizar.
Importante: pode ser que no seu template, o código do 4º passo, esteja diferente. O importante é que você deverá procurar pelo trecho referente ao CSS do footer para fazer a substituição.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn