Colunas no Rodapé do Blogger + Template

Colunas

O tutorial mais pedido pelos leitores compulsivos vai finalmente ser atendido. Hoje vou mostrar como colocar duas colunas no rodapé do seu blogue no Blogspot.

Antes de começar, os avisos paroquiais: Essas configurações são um pouco complicadas e demandam certo conhecimento em códigos HTML e CSS. Por precaução tente antes num blogue de testes e faça o backup do seu template antes de começar.

Cansei de ouvir gente choramingando com o template quebrado dizendo que foi culpa minha, mas não usou um blogue de testes e nem fez backup. Já vou avisando que casos assim nem publico mais o comentário! Se vire!

Foi usado o template Minima, padrão do Blogger como exemplo, se você usa um template diferente ou personalizado as configurações podem variar bastante.

Dito isso, vamos começar com o rodapé (footer) em duas colunas, ideal para templates estreitos, com apenas uma coluna na barra laretal.

O que vamos fazer é localizar todos os trechos de código originais relativos ao rodapé, tanto no CSS como no HTML, e substituí-los pelos códigos compulsivos personalizados. Portanto todos os elementos do rodapé, caso existam, serão perdidos.


1 - Localizar e substituir o código CSS:
O primeiro passo é localizar o código CSS. Entre na edição do seu template, NÃO marque Expandir modelos de widgets e procure (Ctrl + F) pelo seguinte trecho:
/* 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;
}
Substitua tudo pelo seguinte código:
/* Footer em colunas by UsuárioCompulsivo
----------------------------------------------- */
#footer-wrapper{clear:both;width:100%;}
.footer-column{text-align:left;margin:0;width:48%;}
.footer-bottom{text-align:center;padding:10px;}

2 - Localizar e substituir o código HTML:
Agora vamos fazer o mesmo com o trecho de código referente ao HTML, localize:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
E substitua tudo 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> <!-- end footer-wrapper -->
Visualize para testar, se não ocorrer nenhum erro salve e seu rodapé em duas colunas estará pronto! Agora é só incluir os elementos de página que você desejar, nos novos locais disponíveis:

Colunas Template

E o resultado:

Template Compulsivo Duas Colunas

+ Template pronto para Download
Para os mais preguiçosos ocupados, segue o link para download do template Minima Padrão do Blogger, com a customização compulsiva para o rodapé em duas colunas já aplicada. Não retire os créditos!

©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
P.S.: Aguardem, em breve o tutorial e o template pronto para download, com o rodapé em três colunas!

Imagem do cabeçalho: Chiara Marra

Comentários

  1. Hey Compulsivo, mandou bem no Tutorial hein!
    Agora uma dúvida que veio com a leitura do post:

    Eu tenho um layout modificado, ainda não coloquei duas colunas, mas, no meu código aparece o Footer, mas no layout, onde podemos adicionar elementos etc etc etc, ele não aparece. Qual o possível problema e como posso procurar por soluções?

    ResponderExcluir
  2. Priscilla, dei uma olhada no código fonte do seu template. É o seguinte o identificador "footer-wrapper" que já existe no trecho CSS do seu template é que define a formatação dos créditos do autor do tema apenas.

    Para que seja possível incluir novos elementos no seu rodapé é necessário adicionar a linha abaixo no trecho HTML do seu template:

    <b:section id='footer' preferred='yes'/>

    Lá onde diz: "RECUERDA QUE ESTA PLANTILLA ES GRATUITA..."

    Ou você pode seguir este tutorial. Substitua os trechos referentes ao footer-wrapper, tanto no CSS como no HTML, pelos códigos compulsivos e teste...

    []'s
    Compulsivo

    ResponderExcluir
  3. Eu sabia!! Vc quer ser malvado mas é um amor de criatura! Disponibilizou o template pronto, é muito bonzinho! :-)

    ResponderExcluir
  4. Sou não Ariane, eu sou mau! Este template pronto está cheio de segundas intenções ;-)

    Você sabe o quanto é chato quando alguém quer colocar a culpa na gente por não ter conseguido aplicar um tutorial.

    Por isso disponibilizei o download. Quem não conseguir pode pegar o template pronto para usar ou estudar o código.

    []'s
    Compulsivo

    ResponderExcluir
  5. Valeu Compulsivo pela dica! :-D

    Estou fazendo alguns testes...

    Hehehe ainda não consegui colocar o footer com fundo azul, e nem trabalhar com as margens... direita e esquerda. Ou Colocar uma imagem azul nos títulos...

    Mas paciência, logo aprendo.

    Um grande abraço.

    By

    ResponderExcluir
  6. @Whebson, com certeza aprente. Ainda mais com uma atitude positiva como a sua! Procure uns tutoriais sobre CSS para te orientar. Mas não desista!

    []'s
    Compulsivo

    ResponderExcluir
  7. Ariane, conhece aquela música da Jovem Guarda?
    "Tenho que manter a minha fama de mau"
    hahahahahaha
    Ele é uma gracinha, isso sim!
    Valeu Compulsivo!

    ResponderExcluir
  8. Não, não... Eu sou mau mesmo, juro! Até uso desodorante com CFC!

    []'s
    Compulsivo

    ResponderExcluir
  9. Olá compulsivo!
    Como posso mudar de cor as colunas?
    Abraços!

    ResponderExcluir
  10. @Evangelista, se você procurar no Google por "Cores CSS" vai encontrar bastante material...

    []'s
    Compulsivo

    ResponderExcluir
  11. Mais qual o código devo trocar?

    ResponderExcluir
  12. @Evangelista, isso pode variar de um template para outro. Não tenho como saber sem olhar o código. Se tiver interesse num serviço personalizado, entre em contato através do formulário e solicite um orçamento.

    []'s
    Compulsivo

    ResponderExcluir
  13. Bom se for assim, vou preparar uma lista para orçamento, certo?
    Vou preparar e mando! Num vai enfiar a faca em! rsrs
    Abração!

    ResponderExcluir
  14. @Evangelista, demorô!

    []'s
    Compulsivo

    ResponderExcluir
  15. $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
    :-)

    ResponderExcluir
  16. Koé compulsivooooo!!
    Essa foi show hein, e foi na hora certa! Tava já pensando em trocar meu Template, só q isso é um vício... você troca uma vez depois fica sempre querendo trocar...rsrsr

    Justamente por que eu queria umas colunas em baixo....

    Nota 10 Compulsivo!

    ResponderExcluir
  17. Tem como fazer esse mesmo procedimento mas na parte superior?

    ResponderExcluir
  18. @ITURAMAMANCADA, sim com algumas alterações...

    []'s

    Compulsivo

    ResponderExcluir
  19. to querendo fazer com um plano de fundo preto nas duas fechando tudo me diz ai onde mudo as tags se poder é claro.

    ResponderExcluir
  20. @ITURAMAMANCADA, infelizmente não tenho como ajudar individualmente a todos que me pedem. Sua pergunta já foi respondida nos comentários...

    Se tiver interesse num serviço personalizado, entre em contato através do formulário e solicite um orçamento.

    []'s
    Compulsivo

    ResponderExcluir
  21. Como eu uso este código no template Addicted feito por você ?

    ResponderExcluir
  22. @Matheus, este código não foi escrito para ser usado naquele template. Mas você pode substituir no CSS e no HTML tudo que for referente ao FOOTER ou FOOTER-WRAPPER pelo código fornecido, mas vai precisar ajustar depois...

    []'s
    Compulsivo

    ResponderExcluir
  23. /me a dizer "Compulsivamente" Obrigada!
    :D

    (aliás IRC poderia voltar!!! bons tempos os da brasnet)

    ResponderExcluir
  24. Compulsivo, a notação no código do meu template é diferente. Ao ínvés de wrapper, é wrap. Então fiz o seguinte, não apaguei nada, coloquei seu código acima do rodapé que eu tenho e funcionou. Como esperiência, criei um novo background e o resultado você pode ver. Estou no aguardo do código com três colunas, que imagino que seja o mesmo, mas com a inclusão de uma nova div class e b:sections... Acertei??? :o)

    ResponderExcluir
  25. Cidão, foi devido ao fato do código mudar de um tema para outro que resolvi disponibilizar o template pronto com as colunas no rodapé já aplicadas...

    []'s
    Compulsivo

    ResponderExcluir
  26. Muito obrigado ^^
    ainda n colokei no site principal mas estou aproveitando todas as suas dicas XD
    so estou agura editando algumas coisas
    vlws mesmo ^^

    aka
    por acaso teria algum hack de formulario de cadastro??
    eu juro que ja procurei mas parece que so existe para wordpress em que e bloqueado alguns links no site e so se logar que libera mas em blogger...
    se voce conhecer lagum por favor ... XD

    vlw mesmo

    ResponderExcluir
  27. @Gama, acho que isso que você procura, não existe para o Blogspot.

    []'s
    Compulsivo

    ResponderExcluir
  28. Muito bom! Essa dica deixou o layout do meu blog bem melhor , vlw mesmo!

    ResponderExcluir
  29. Sera que voce pode me dar uma ajuda? Tem como eu deixar essas duas colunas como se estivessem em uma caixa? para diferenciar a cor dela da cor de fundo do meu template

    ResponderExcluir
  30. @Rafa, tem sim como fazer essas alterações que você quer. Mas infelizmente não tenho como ajudar pessoalmente a todos que me pedem, pois não tenho tempo.

    Se você precisar de alguma configuração personalizada, solicite um orçamento através do formulário de contato.

    []'s
    Compulsivo

    ResponderExcluir
  31. Ok, eu entendo, vlw mesmo assim...^^

    ResponderExcluir
  32. Caro Compulsivo,
    Tenho um blog em padrão mínima dark 2 colunas (http://gravetos-berlotas.blogspot.com/). Como meu monitor é 19" WScreen, gostaria de aproveitar e acrescentar uma 3ª coluna à esquerda do monitor, ou seja, as postagens ficariam centralizadas e cercadas por 2 colunas. Como devo proceder já que sou um semianalfa em HTML? Já tentei, em blogs-teste, alguns modelos disponibilizados e diversos problemas ocorreram como links desaparecerem, etc.

    ResponderExcluir
  33. @Gravetos, você deve pesquisar no Google até encontrar a informação que precisa. Se tiver dificuldade, solicite um orçamento através do formulário de contato.

    []'s
    Compulsivo

    ResponderExcluir
  34. ahh que pena mas de kuaker forma irei continuar procurando issu ara o blogspt srsr awe akabei de editar mas eu n colokei no foote da pagina eu colokei no footer do post e que no d apgian num fikou muito bom mas depois eu passo para o blog que uso por enkauto estou editando no meu de teste XD

    ResponderExcluir
  35. @Gama, não entendi nada, favor traduzir em português...

    []'s
    Compulsivo

    ResponderExcluir
  36. traduzindo para portugues com calma e sem sono:
    ah que pena(referente ao formulario de cadatro no blogspot)mas que qualquer forma continuarei procurando...

    acabei de editar mas não coloquei no footet da pagina e sim no footer do main (onde fica a postagem)mas não ficou bom...depois apsso para o blog que eu uso mesmo pois eu fiz no de testes...

    agora atualizando eu coloquei no site principal que eu uso, o storm-ex a inicio ficou ruim porque não ficava dentro do main(a parte das postagen no cnetro bla bla) mas olhei diretim o codigo e aprendi como colokar so precisei usar parte do segundo codigo :D

    axu que ate fikou legalzin ahh adorei akela coisa de galeria em destaques eu tava preparando ja o flash --' mas ai conheci isso aki XD
    muito obrigado ahhh akilo dos gadgets na pagina principal ou não tambem e ROX!!

    vlw cara suas dicas sao dez

    ResponderExcluir
  37. compulsivo, não sei se ja foi perguntado, mas como faz para ficarem tres espaços em vez de dois??? eu fico meio encucada de mudar algumas coisa no template pq os codigos que tem no meu são sempre diferentes desses mostrados...

    ResponderExcluir
  38. @Ya, em breve num tutorial compulsivo perto de você... Mulher agoniada!

    []'s
    Compulsivo

    ResponderExcluir
  39. kkkkkkkkkkkkkkk.... não consigoooo... a agonia faz parte do meu ser!! hehehe

    Vou ficar aguardando... to mudando o meu template no blog teste, mais ainda falta muita coisa...!

    ResponderExcluir
  40. Eai meu caro Compulsivo...
    ótimas essas colunas para rodapé, valeu mesmo pela dica.
    Mas quando eu instalei elas no meu template coloquei uma TERCEIRA coluna usado o seu código mesmo e resolvi avisar já que quem bolou o código foi você originalmente.
    É isso.. até

    ResponderExcluir
  41. @Bantu, a casa agradece as referências, muito obrigado!

    []'s
    Compulsivo

    ResponderExcluir
  42. Olá Usuário Compulsivo! Eu sempre visito aqui e adoro as coisas que faz e sua dedicação. Instalei um template e estou com uma dúvida: exatamente neste link, como pode ver, eu não consigo alinhas as sidebars corretamente. Tentei float, mas nada dá certo. O que será que fiz de errado? Poderia me ajudar? Se preciso, envio o código para você.

    Grata pela atenção.

    Insubmissa

    ResponderExcluir
  43. @Insubmissa, não costumo prestar assistência técnica personalizada, mas vou abrir uma exceção, pois gosto do seu blogue.

    Isso que está acontecendo no seu template, é até certo ponto comum. Já vi acontecendo em vários blogues. Quando não tem conteúdo na coluna principal, a segunda sidebar "cai" para o local onde estaria o texto.

    Percebi que no seu caso isso só ocorre com o menu em abas. Para resolver, você deverá deslocar todo o código do menu em abas para dentro das DIVs da sua sidebar.

    Mas isso pode desconfigurar o menu em abas, tem que testar para ver o que acontece...

    []'s
    Compulsivo

    ResponderExcluir
  44. Fico muito agradecida pela exceção, de coração. Vou tentar fazer isto, e dando certo, dou um grito de obrigada...rsrs

    Uma tarde cheia de flores para você.

    A Insubmissa

    ResponderExcluir
  45. Você é simplesmente o máximo. Funcionou.

    Deixo-te uma frase de agradecimento:

    "Nunca encontrei uma pessoa tão ignorante que não pudesse ter aprendido algo com sua ignorância."

    ( Galileu Galilei )

    A Insubmissa

    ResponderExcluir
  46. @Insubmissa, you're wellcome!

    []'s
    Compulsivo

    ResponderExcluir
  47. Oi , consegui fazer isso, obrigado. Mas tenho um problema, sempre que coloco ad sense no rodape ele simplismente nao apareçe, nao sei o que fazer, testei outros templates e sempre esse erro.

    Gostaria tambem de saber se tem tutorial para alargar a barra lateral

    vlw!

    ResponderExcluir
  48. @RW, só são permitidos apenas três anúncios por página, você observou este detalhe?

    []'s
    Compulsivo

    ResponderExcluir
  49. Olá, UsuárioCompulsivo.

    Qualquer elemento que tento inserir no rodapé não estão mais aparecendo? Você poderia me orientar? Retirei os códigos e coloquei novamente mas não resolveu...

    Isso ocorreu no dia que coloquei um banner e depois retirei e aí deu aquele problema que mencionei no grupo de não poder mais visualizar...Será que tem alguma relação, como não entendo quase nada, acho que fiz alguma coisa errada...

    ResponderExcluir
  50. Infelizmente não sei dizer...

    []'s
    Compulsivo

    ResponderExcluir
  51. Compulsivo, como faço para alterar a largura das colunas? é que estou (tentando) criar meu template próprio, mas o tamanho das colunas é ignorante! Queria colocá-las na largura do Main-Wrapper (550 px), mas fica (automaticamente) na largura do Outer-Wrapper (800px), e não encontrei nenhum código referente ao tamanho delas. Se puder me ajudar, muito obrigado!

    ResponderExcluir
  52. @Kazuya-kun, se a largura das colunas não está definida, você deve incluir essa definição...

    []'s
    Compulsivo

    ResponderExcluir
  53. Compulsivo, meu template só possui uma coluna lateral no perfil. Gostaria de torná-la dupla. Já andei olhando os tutorias lá no Tamplates Novo Blogges, mas a coisa não sai! Sabe quando tem aqueles alunos que só conseguem aprender a matéria com um determinado professor? Acho que é esse o meu caso. Obrigado.

    ResponderExcluir
  54. @Marcos, isso é o tipo da coisa que é fácil de fazer, mas difícil de explicar. Além disso, o tutorial da Ariane é muito bom... Mas quem sabe num futuro improvável...

    []'s
    Compulsivo

    ResponderExcluir
  55. Isso varia muito mesmo de template para template não é?

    Estou usando o Blogger Addicted

    http://usuariocompulsivo.blogspot.com/2008/05/template-compulsivo-blogger-addicted.html

    Queria colocar 2 ou 3 colunas no rodapé!

    Abraços

    ResponderExcluir
  56. @zumbartes, se você puder aguardar alguns dias, em breve vou lançar um template tudo em um com a maioria dos hacks compulsivos já incluídos e totalmente personalizável sem edição de códigos...

    []'s
    Compulsivo

    ResponderExcluir
  57. Opa Compulsivo vlw mesmo cara!

    Esse super template vai ser baseado no addicted?

    Fico aguardando!

    Um abraço

    E parabéns pelo blog!

    ResponderExcluir
  58. Não @zumbartes, seguirá o padrão Minima para facilitar a personalização, pois a maioria dos tutoriais usa como exemplo este padrão.

    []'s
    Compulsivo

    ResponderExcluir
  59. Obrigadão Compulsivo pela dica espero que vc me add nos seguidores valeu!!

    ResponderExcluir
  60. Muito boa esta dica. Estava precisando disto mesmo. Meu rodapé estava horrível. xD O que achei estranho foi que primeiro eu procurei no Google (eu também...) e você não apareceu na lista dos primeiros, Compulsivo. Eu peguei foi o blog do CrazySeaWolf e na postagem ele referenciava este blog; foi de lá que vim. ;)

    Mas foi ótimo, e funcionou direitinho. Parabéns!

    Abraços

    ResponderExcluir
  61. Incluí as colunas. Incluirei conteúdo amanhã nelas. Serão muito importantes para distribuir informações no blog. O seu blog tem me ajudado muito na reorganização do layout do meu. Obrigado!

    ResponderExcluir
  62. O Comulsivo só quero saber de uma coisa espero respostas sobre, tipo eu baixei esse template minima que vc deixou disponivel com as duas colunas no rodapé coloquei no meu blog de teste fiz varias alterações o que eu queria saber se posso tirar aquelas imagens que fica na base do template "rodapé" e inserir um link seu não quero retirar os creditos mas vou edita-los tipo colocar by copulsivo e alterado por by Poesia algo parecido posso fazer isso se autorizar faço caso contrario eu vou ter que fazer tudo do zero rs! Espero que possa xD...

    ResponderExcluir
  63. Compulsivo,estava procurando este tuto a algum tempo...eu fiz a modificação mas deixei a coluna centralizada também.E era isso que eu queria!
    Muito Obrigada
    Agora só falta eu colocar outra coluna lateral no perfil,pro meu blog ficar do jeito que eu quero.
    []s

    ResponderExcluir
  64. cara estava procurando algo para o template que coloquei no meu blog normal ao extremo e achei esse artigo muito bom, e peguei ele fiz no meu template, só que eu não entendo neca de pitibiribas deste troço...pois não é que deu certo as colunas foram criadas normal meu blog tá funcinando numa boa...valeu mesmo..passa lá para ver o resultado. bjs.

    ResponderExcluir
  65. Compulsivo, ótima dica. Só tive que fazer algumas alterações no tamanho para se adaptar ao meu layout.
    Eu não tenho lá muitos conhecimentos acerca de html, CSS, ou qualquer outra dessas linguagens, sou jornalista e "analfabeto" nessas coisas . Mas com a ajuda de outros blogueiros venho conseguindo implementar boas alterações numa página que era bem "básica".
    A partir de um tempate básico do blogger e pude criar uma página que, acredito, está ficando minimamente personalizada (com certeza com erros, mas personalizada, rs).
    Seu site tem me ajudado bastante nessa nova tarefa de "blogueiro", obrigado e parabéns.

    ResponderExcluir
  66. Daew Compulsivo...

    Kra, primeiramente, muito obrigado pelo tutorial, me ajudou muito na construção do meu novo blog...
    Entretanto, queria já avisar sobre um erro na escrita do código...

    no último quadro com códigos, vc escreveu "footer-botom" o que na verdade seria "foot-bottom".
    Esse erro irá gerar alguma dor de cabeça caso alguem queira fazer algumas alterações mais tarde, mas não é nada muito dificil de arrumar, nao é mesmo?
    Bem, mais uma vez, vlw o tuto o/

    ResponderExcluir
  67. Olá,
    primeiramente gostaria de dizer que seu blog é muito legal, ja li praticamente ele todo. Adoro as dicas e ja usei muitas...
    O meu template eu baixei no Btemplates (Cristal Blue) que alterei quase nada. Tentei colocar o rodapé e acaba dando mensagem de erro (tag aberta) não manjo muito de html (sou curiosa e só). Mas graças a sua dica de Backup meu blog passa bem...rs (eu queria colocar 3 colunas como o seu)
    valeu e muito sucesso pra você
    = )

    ResponderExcluir
  68. O meu código CSS é bem diferente e meio complicado, e no meu HTML não há o código necessário ao passo dois, isto é, o código de footer é bem diferente. Há como adaptar?

    Mais uma pergunta, e vez de dois elementos, podem ser inserido três no rodapé?

    Muito obrigado

    ResponderExcluir
  69. No meu template não tem o código :
    /* 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;
    }


    Dai não da pra colocar as colunas.

    ResponderExcluir
  70. Uma pena, o meu também não tem esses códigos que vc pede pra substituir :(

    ResponderExcluir
  71. Gostei de seu blog, tem informações úteis para quem deseja ser um blogueiro. Sucesso!!!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio