Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1484305732
Vida do cache: 1485601729
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Footer Tutoriais Blogger

Dividir o Footer em colunas no Blogger

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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

23 Comentários

  1. Kira Mieko disse:

    Olá… no meu caso, eu gostaria de adicionar um espaço para gadget ali no footer. Vi que pode ser feito quando se tem o attribution, mas eu retirei o meu já tem um tempo. Tem algum código para adicionar mais um gadget ali embaixo, no footer, embaixo ou em cima das três colunas?

    • Vanessa disse:

      Vc adiciona qtos gadgets quiser, em todos os locais que aparecer “adicionar gadget”.

      • Kira Mieko disse:

        Oi Vanessa… Então… Como eu disse, eu não consigo adicionar um gadget no footer que pegue o footer inteiro. Porque ele está dividido em três colunas, como aqui, do jeito que foi mostrado nesse tutorial. Só dá pra adicionar gadgets pequenos (nas três partes separadas do footer). O que eu quero fazer é adicionar um gadget em cima ou embaixo dessas três colunas que o footer foi dividido. Mas, obrigada flor. Beijinhus!

  2. Hélio disse:

    Graças a sua ajuda, consegui criar um rodapé com 3 colunas, mas só um detalhe, não precisei substituir um pelo outro, só coloquei antes.

    Obrigado sua LINDA!

  3. Bruxx disse:

    Oi Clau, tudo bem?
    O meu blog não tem o trecho abaixo, como devo proceder?

    /* 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;
    }

    Desde já antecipo meus agradecimentos.

  4. Soraya disse:

    eu n sei mexer mto mas li mto os cdigo do theme de designer de modelo e achei como dividor os elementos

    ex.

    —–x——–

    > onde estar '3' são os numero a serem divididos , meu template era dividido em 2 e fiz em 3 perfeito ficou

  5. .:: Clau ::. disse:

    «O» msd «?»
    Não tem como eu te dizer e nem como ajudar,pois algumas linhas de código podem variar de template para template, e não há como eu saber.

  6. «O» msd «?» disse:

    Oi Clau, queria saber o seguinte, sei que você não é nenhuma GURU do Blogger mas, o segundo código que você mandou inserir no HTML pelo menos aqui no meu template eu não consegui achar. Eu uso os modelos de template do Atisteer e gostaria de saber o seguinte…
    Se alem dessa linha de código existe alguma outra com a mesma funcionalidade? Talvez o código esteja com outro nome.
    Thanks!

  7. Andreza disse:

    Ai o meu nunca da certo, desisto!

  8. .:: Clau ::. disse:

    Felipe Correia
    Não tem como eu te dizer e nem como ajudar, pq qdo se trata de template já modificado, os códigos podem estar diferentes mesmo e não há como eu saber.
    O q posso te sugerir é q vc teste substituindo essa parte q vc citou pela q está no tutorial.Mas faça um backup antes,pq se algo der errado terá como vc voltar ao modelo.

  9. Felipe Correia disse:

    Olá Clau, Gostei muito da dica, mas meu template não tem o primeiro código que esta lá!
    Tem um código que se refere ao footer assim: div class='footer', tem alguma coisa a ver?
    Nesse footer tem duas "div" que eu coloco os créditos e tal…
    Mas não colo widgets nele!
    Se puder me ajudar!
    Agradeço!

  10. .:: Clau ::. disse:

    admin
    Obrigada por avisar. Já corrigi 😉

  11. admin disse:

    Tem um erro no codigo :

    Na div v id='footer-column-left'

    tem dois width

  12. Lucas disse:

    obrigado clau

  13. .:: Clau ::. disse:

    Lucas
    O proprio Designer de modelo já oferece opções para incluir colunas diretamente nas configurações na aba design.

  14. Lucas disse:

    clau,e para quem està usando o template designer de modelo?

  15. Gilberto Araujo disse:

    Olá Claudia,

    Consegui resolver o problema. Como eu não queria barra de rolagem vertical, determinei overflow:hidden no body e resolvi dois problema de uma só vez: sem barra de rolagem e sem o espaço que estava sobrando abaixo do footer.
    Obrigado pela atenção.

  16. Gilberto Araujo disse:

    Olá Claudia, quero parabenizá-la pelo belo template e pelas valiosas dicas do blog, sempre que preciso (e repare que preciso muito) recorro a ele.
    Bem estou com uma dificuldade com o footer de um blog que estou customizando. Há um espaço enorme após o footer e não consigo encontrar no código como tirá-lo. poderia me ajudar?
    http://adoisprodutora.blogspot.com/
    desde agradeço pela ajuda. Gilberto

  17. ::Clau:: disse:

    @JACK:
    Eu publiquei o código para dividir o footer em colunas e está bem explicado e já disponibilizei alguns templates com o footer dividido. Procure no menu que vc encontra.

  18. JACK disse:

    se nao for muito icomado pq nao sei mexer html
    postar com fundo preto ou sinza esse template

  19. JACK disse:

    coloca esse template pra gente baixar ou mande pelo email
    amorimar@oi.com.br brugaduu

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.