Cursos 24 Horas - Cursos 100% Online com Certificado

Como adicionar três colunas no footer (Rodapé do blog) - Blogger

47 Comentários Autor : Notícia e blog 31 outubro 2009
Mais Gadget no Footer


Se seu blog está faltando espaço para adicionar Gadgets, adicione mais espaço no rodapé e deixe seu blog com mais Gadgets e mais bonito :-)


Advertências:


Apague todos os Gadgets do rodapé "Footer" "Layout"->"Elementos da página"
  • É indicado salvar antes os Gadgets do rodapé do blog para que não ocorra perdas.
Salve os Gadgets antes de começar! Não só estou pedindo ;-)
1.Acesse o painel do Blogger
2.Vá em "Layout"->"Editar HTML" não marque a "Caixa Expandir Modelos de Widgets"
3.Procure pelo código abaixo "Ctrl e F" :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4.Substitua o código em laranja por este abaixo:
<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

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

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>

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

</div>

5. Agora vamos adicionar a CSS ao blog para que ela controle o espaço entre as colunas, procure pelo código abaixo:
]]></b:skin>
6. Acima do código anterior adicione o código seguinte:
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}

7. Salve as alterações e vizualize.
A area de adição de Gadgets ("Layout"->"Elementos da página") deve ficar como esta imagem abaixo:
três colunas no footer


    47 Comentários

    Brava Malvada disse...
    6 de novembro de 2009 19:37 #

    Maravilhoso!! Nossa Muito obrigada! Já coloquei no meu blog!;)

    Notícia e blog disse...
    6 de novembro de 2009 20:57 #

    @Brava Malvada , Foi um prazer poder ajudar:)

    NYCK DOWNLOADS disse...
    6 de novembro de 2009 21:37 #

    Não achei esse 1º código no meu blog, não consegui muda nada buaaaa :-(

    Notícia e blog disse...
    6 de novembro de 2009 21:44 #

    @NYCK DOWNLOADS , coloque abaixo de <div id='footer-wrapper'> o código 4

    NYCK DOWNLOADS disse...
    6 de novembro de 2009 22:56 #

    eu ja tinha tentado fazer isso alias testei em vários lugares, só consegui colocar em baixo do cabeçalho do blog, mais daí fica ruim né... se poder me ajudar de novo agradeço (:

    Marilucia disse...
    7 de novembro de 2009 13:06 #

    Não conseguir achar a 1ª linha, alias ela não tem no meu blog, pode me ajudar? Gostaria de colocar estas colunas no rodapé do blog, aguardo retorno, obrigada!

    Notícia e blog disse...
    7 de novembro de 2009 13:41 #

    @Marilucia , coloque abaixo de <div id='footer-wrapper'> o código 4

    belinha disse...
    18 de novembro de 2009 13:44 #

    Olá!Cheguei aqui por mero acaso e logo encontrei duas alterações que queria fazer no meu blog.Foi tudo fácil e correu bem.Obrigada!Fou linkar,seguir,etc,etc!!!

    Heróis da Net disse...
    6 de dezembro de 2009 16:00 #

    Sensacional! Tudo o que eu precisa!!!

    psp game wold disse...
    9 de dezembro de 2009 22:18 #

    é isoo ai cara valeu ficou da hora

    G.R.T.O. Força Jovem Guarany disse...
    11 de janeiro de 2010 23:34 #

    sensacional, cara.. me ajudou bastante.. valeu

    http://guaranysportingclub.blogspot.com/

    Dicas e Blog disse...
    16 de janeiro de 2010 00:14 #

    Deu tudo certo e ajudou bastante, VALEUUU!!!

    Rúben Barata Da Silveira disse...
    14 de fevereiro de 2010 19:33 #

    Olá.

    Não tou conseguindo introduzir as 3 colunas no footer, mesmo seguindo rigorosamente todas as instruções.

    Após clicar no botão GUARDAR MODELO aprece a seguinte informação:

    Não foi possível guardar o seu modelo.
    Foi encontrado mais do que um widget com o ID: Text20. Os IDs de widgets devem ser exclusivos.

    Por isso ao apelo a quem ler este comentário para me AJUDAR a resolver esta situação até pq eu já tive as 3 colunas (td certo) no meu blog mas ao querer salvar o template, escolhi outra opção q me fez perder todo o esquema (layout) incluindo as 3 colunas. ALGUÉM ME AJUDE POR FAVOR. MUITO OBRIGADO.

    Notícia e blog disse...
    15 de fevereiro de 2010 09:40 #

    @Rúben Barata Da Silveira , seu problema é fácil de resolver basta mudar a palavra que está em negrito Text20 para ex: Text95

    <div id='footer-columna-contenedor'>

    <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>

    <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>

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

    <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

    <b:section class='footer' id='col-bottom' preferred='yes'>
    <b:widget id='Text20' locked='false' title='' type='Text'/>
    </b:section>

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

    </div>

    Daniele disse...
    7 de abril de 2010 22:43 #

    akii.. nao estou conseguindo nao.. nao acha o codigo em laranja..

    Semnome56 disse...
    26 de abril de 2010 18:40 #

    :'( No template do meu blog não tem o código:
    :'(

    Notícia e blog disse...
    26 de abril de 2010 21:44 #

    @Semnome56, encontre um parecido mas lembre-se faça antes em um blog de teste.

    kaytros disse...
    28 de maio de 2010 14:46 #

    meu blog nao tem os codigos expressos, como façopara colocar

    kaytros.blogspot.com

    Notícia e blog disse...
    29 de maio de 2010 09:39 #

    Basta adicionar o código que você não possui abaixo de:

    <!-- end outer-wrapper -->

    e ai é só continuar o tutorial. Ok, qualquer dúvida é só comentar...

    Felipe disse...
    29 de maio de 2010 14:16 #

    Duvida e fiz consegui tudo certinho mas a coluna de baixo não tem fundo
    fica com o fundo do blog e as coisas escritas, não sei se entendeu, mas é +- isso.

    Felipe disse...
    29 de maio de 2010 15:22 #

    Eu acho que da pra resolver se colocar as colunas pra serem iguais a sidebar, desde já agradeço. Estou achado isso muito dificil se vc puder me ajudar faço um post indicando seu blog que é muito bom. Suceso

    ADM disse...
    14 de julho de 2010 15:15 #

    nao funcionou no meu :(

    Luan Vieira (Adiministrador) disse...
    11 de abril de 2011 12:42 #

    como faço para diminuir porque fico muito grande olha ai http://luanteste11.blogspot.com/

    Luan Vieira (Adiministrador) disse...
    11 de abril de 2011 12:46 #

    outra duvida tem como colocar cor no fundo dos gadgets?

    andrea.cacequi disse...
    6 de junho de 2011 01:14 #

    Olá amigos muti legal...]Fiz todo o processo como ordenado---porém meu fotter ficou lá em cima abaixo do cabeçalho---
    Alguém sabe como me ajudar..


    Valew

    Docinho disse...
    15 de junho de 2011 01:00 #

    Adorei o blog, super fácil as explicações. O meu blog também não possuía o primeiro código que você colocou, mas encontrei a solução nas respostas que você dá aos "perdidos" como eu. Obrigada.

    Letícia Molon disse...
    10 de agosto de 2011 14:15 #

    Como faço pra dividir uma coluna unica em 2?
    No caso meu blog tem a coluna de postagem e uma coluna a direita, e quero manter assim, mas no final da coluna da direita gostaria de dividi-la em 2, como nesse site: http://nomundodoslivros.blogspot.com/
    um dia fiz isso sem querer, mas não sei como que fiz... vc sabe?

    M.Eduarda Mello disse...
    8 de setembro de 2011 18:05 #

    Querida eu consegui fazer no meu, o problema é que esse codigo id='footer-3' showaddelement='yes'/> está no meu blog, no rodape! Não sei o que deu errado para ele ficar lá! AJUDAAAAAAAA, PLEASEEEEEE

    AquA3 disse...
    17 de outubro de 2011 04:30 #

    Interessante, mas se eu fizer isso tiro os direitos autorais do criador do Blog, como posso mantê-lo?

    Abraços

    Leticia Thais Ferreira Russo de Andrade Junqueira disse...
    6 de dezembro de 2011 03:15 #

    eu não consiguiiiiiiiiiiiiiiii

    Pedro Santoro Zambon disse...
    9 de janeiro de 2012 15:22 #

    Consegui incluir, mas os elementos do rodapé ficam muito colados um no outro e nas margens. Como fazer?

    Meu blog é: www.comandologin.com.br

    Ericson Fernando disse...
    11 de janeiro de 2012 02:47 #

    Muito útil a informação desse blog. Recomendo!
    [ www.blogdosocorrista.com ]

    Diego Moreira disse...
    5 de fevereiro de 2012 10:00 #

    finalmente consegui o que eu queria... porem não fikou exatamente do jeito que eu queria só fikou 2 colunas, se alguen puder me dar uma dica eu aceito

    Nadja Silva disse...
    6 de fevereiro de 2012 16:02 #

    Excelente dica, você é muito gentil.
    Obrigada.
    Abraços e sucesso

    Antonio disse...
    14 de fevereiro de 2012 15:25 #

    Galera se não tem é só colocar que fica dai

    Bom eu coloquei no meu blog
    Mas dai não ficou com os efeitos iguais da sidebar tipo com imagem em baixo do titulo fundo branco com bordas arredondadas se possivel entra em contato com a solução

    Anônimo disse...
    26 de fevereiro de 2012 22:35 #

    Ta de Parabéns !!!

    Wii disse...
    4 de março de 2012 17:53 #

    Olá, grato pela informação, consegui com sucesso, porém não consigo alterar a cor dele. alguma sugestão?

    Trollagem Memes disse...
    10 de abril de 2012 20:54 #

    obrigado ajudou muito esse tutorial http://www.trollagem.net/ parabés

    Conexão Alencar disse...
    30 de abril de 2012 21:13 #

    muito bom cara! valeeeu me ajudou muiitooo

    Victor Sousa disse...
    11 de maio de 2012 18:10 #

    Funcionou na perfeição. Muito obrigado

    Zéamerica disse...
    8 de agosto de 2012 18:34 #

    Obrigado ajudou muitooo

    Dulce Miller disse...
    28 de agosto de 2012 06:57 #

    Perfeito, obrigada!!!

    Anônimo disse...
    11 de outubro de 2012 13:13 #
    Vitor Leal disse...
    7 de maio de 2013 14:41 #

    O seu tutorial foi o unico em toda a rede que funcionou! Nossa, muito obrigado mesmo ♥♥

    Leny Iwatani disse...
    16 de julho de 2013 13:49 #

    Olá gostei muito de suas dicas, deu super certo muito obrigada sucesso.

    Leny Iwatani disse...
    16 de julho de 2013 15:30 #

    @AquA3
    Eu consegui fazer sem precisar tirar

    Celly Braga disse...
    26 de outubro de 2013 16:50 #

    oi fiz tudo certinho e deu certo , mas alguns dias depois instalei no template do meu blog um tema mobile dai o rodape ficou com um so gadget do lado direito embaixo da sidebar. sabe dizer o que acinteceu?

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.