Cursos 24 Horas - Cursos 100% Online com Certificado

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

34 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


    34 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

    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.