14/11/2009

Colocar mais uma coluna no blog

Para colocar mais uma colunas no blog, ou seja, fazer um blog com 3 colunas é um pouco complicado então antes de iniciar recomendamos salvar uma cópia do seu modelo como está antes das alterações. Para fazer isso entre na pagina editar html e clique no link baixar modelo completo, abrirá uma janela de download para você salvar seu modelo, veja aqui mais sobre backup do blog.
Usamos como exemplo o modelo Mínima, então na pagina editar html procure por: #header-wrapper, #outer-wrapper e #footer nestas três partes você encontrará width:660px; troque esse valor por 980px. Agora no trecho depois de  #sidebar{........} coloque isso:

#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Repare se no trecho já existente #sidebar a parte float:....; está com a palavra right, se não tiver altere pois dependendo disso as duas colunas podem ficar do mesmo lado do blog.

Até aqui colocar os estilos CSS que define a largura da nova coluna e aumentamos a largura total do blog. A seguir vamos colocar a coluna propriamente dita, localize:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Logo depois dessa linha você verá os códigos dos gadgets que tem no seu blog, elas são mais ou menos assim:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>

Copie qualquer uma delas e coloque no código abaixo da mesma maneira que fizemos:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

Agora coloque isso antes de:
<div id='main-wrapper'>
<b:section class='main'.....

Isso está poucas linhas acima de onde copiou o código. Preste atenção num detalhe muito importante, por exemplo, se copiou a linha <b:widget id='HTML2' locked='false' title='' type='HTML'/> para colocar no código da nova coluna deve apagar de onde estava ou seja na verdade vamos mudá-lo de lugar e não deixar 2 iguais, se deixar os dois na hora de salvar não vai conseguir pois o blog mostrará conteúdo duplicado.

Agora é só visualizar o blog e se estiver tudo certo clique em salvar. Depois disso é só ir a pagina layout e arrastar os gadgets para a coluna que desejar e assim acabar de organizar o blog do jeito que gostar mais. Caso uma das colunas apareça no final do blog em vez de uma ao lado da outra tente diminuir um pouco a largura da coluna (170px) ou aumentar a largura total do blog (980px).
Veja a mesma explicação na animação abaixo.


Related Posts with Thumbnails

168 comentários:

  1. Ow Cara Deu certo mais
    A outra sidebar ficow em baixo da velha como arrumo isso

    ResponderExcluir
  2. Oi, Fabiano
    Obgda pelas dicas, importantíssimas pra quem está aprendendo.
    Aproveito para pedir uma ajuda:
    quero colocar um nome em imagem no cabeçalho no lado esquerdo do blog, mas quando insiro a imagem, ela vai pro centro. Como faço para que fique no local desejado?
    o blog é este:
    http://somentesilvia.blogspot.com/

    Desde ja, agradeço.

    ResponderExcluir
  3. Valeu pela ajuda
    acompanho o seu blog já faz um tempinho.e praticamente fiz o meu blog com as suas dicas.
    agora com muito esforço consegui colocar três colonas.
    muito obrigada..
    agora é so eu aprender a ganhar dinheiro com meu blog
    risos
    ate mais

    ResponderExcluir
  4. †µℓเ๏๏ .†.קαiм-

    provavelmente se diminuir um pouco a largura das colunas ficarão lado a lado.

    Serenissima

    veja aqui como dividir o cabeçalho do blog

    http://www.dicasparablogs.com.br/2009/10/como-dividir-o-cabecalho-do-blog-em.html

    ResponderExcluir
  5. Fabiano Roberto, tem como explicar como coloca essas linhas azuis ae, bordas sei lá... que tem no seu blog, queria colocar no meu...!! se puder ajudar estarei agradecido!

    ResponderExcluir
  6. Nosso template na verdade é feito com imagens de fundo na pagina editar html no estilo #content-wrapper

    ResponderExcluir
  7. Olá, estou com uma duvida...como coloco aquele gadget que o visitante coloca o endereço de e-mail e recebe atualizações do blog no email? Seria de grande ajuda se me informasse isso. Obrigado

    ResponderExcluir
  8. veja aqui como enviar suas atualizações por email
    http://www.dicasparablogs.com.br/2009/03/enviar-atualizacoes-por-email.html

    ResponderExcluir
  9. Oi! Eu consegui fazer *---*
    mais,as colunas ficaram uma do lado da outra :( eu queria que as postagens ficassem no centro! como eu faço isso?

    ResponderExcluir
  10. May, veja se em #sidebar e #newsidebar, a parte float:... está um com left e outro com right, isso que faz as colunas ficarem uma de cada lado

    ResponderExcluir
  11. Ola sou novo por aqui gostei de suas dicas,gostaria muito de fazer uma coluna so para Parceiros é possivel?

    ResponderExcluir
  12. Dicas PTC
    depois que colocar a coluna pode usar o conteudo que desejar nela

    ResponderExcluir
  13. Como eu coloco uma coluna ou barra não sei ao certo que fique em baixo do banner e em cima das postagens e das colunas??Que nem aquele de colocar link lado a lado mas para colocar texto??

    ResponderExcluir
  14. Xd, é só adicionar um gadget de texto ou html/javascript e depois arrastar até o lugar que deseja

    ResponderExcluir
  15. Fabiano, mas não tem como eu colocar lá.Tipo tem criar uma coluna horinzontal, eu acho que é assim.Como faço?
    Ex:
    _________________________
    | BANNER |
    |_______________________|
    | "Nova coluna" |
    |_______________________|
    | | |
    |Coluna | |
    | 1 | POstagens |
    | | |
    | | |
    |________|______________|
    Entendeu??

    ResponderExcluir
  16. Xd
    veja se é isso que você quer
    http://www.dicasparablogs.com.br/2009/09/como-dividir-sidebar-em-duas.html

    ResponderExcluir
  17. vlw agora consegui colocar, demorou 30:00 e agora deu certo, esse site é ótimo

    ResponderExcluir
  18. Fabiano, agora que eu vin ver isso, mas como eu afasto mas um pouco a coluna esquerda das postages

    ResponderExcluir
  19. Matheus

    você precisa alterar as larguras da coluna, por exemplo, colocando padding-left:5px ou padding-right:5px no código da coluna que deseja afastar, pode usar os dois caso queira espaços nas duas laterais, mas se a coluna for para no final do blog reduza a largura dela, ou seja no exemplo aqui colocamos 5 px de cada lado, então seria correto diminuir 10 px na largura da coluna, mas somente reduza se ocorrer o problema dela ir para o final da pagina.

    ResponderExcluir
  20. no meu caso é padding-left:5 mas onde eu coloco??

    ResponderExcluir
  21. coloque isso no código da sidebar ou newsidebar, dependendo de qual deseja alterar as distancias

    ResponderExcluir
  22. amigo você pode colocar um exemplo do codigo do sidebar e newsidebar com padding-left:5??

    ResponderExcluir
  23. #newsidebar-wrapper {width: 180px;color: #000000;margin-left: 15px;padding-left:5px;float: left;

    ResponderExcluir
  24. amigo deu certinho valeu :D se quiser pode olar ai no meu site o resultado

    ResponderExcluir
  25. Olá,fiz tudo certinho,mas a coluna apareceno final do blog,o que eu devo ter feito errado????

    ResponderExcluir
  26. colocar mais uma coluna no blog é um procedimento complicado mesmo, é difícil dizer o que fez errado, mas tente procurar nos detalhes, as vezes falta ou sobra algum caracter na hora de copiar o código, fechar as chaves, divs...

    ResponderExcluir
  27. Como você criou esse flash? Entra em contato comigo: mayheusera@hotmail.com

    ResponderExcluir
  28. não tem como explicar como criei o flash aqui, precisa ter o programa e procurar tutoriais sobre varios assuntos

    ResponderExcluir
  29. Como se faz essas videos aulas ??
    Que programa vc usa ??
    Flw

    ResponderExcluir
  30. Games Show, a explicação no final dessa postagem fiz usando o flash, ou seja não é um video mas animação

    ResponderExcluir
  31. Coloquei 3 colunas, mas uma aparece quando acaba a outra...
    www.fitlife.com.br

    Como faço???

    ResponderExcluir
  32. fat212, acho que já resolveu o problema, entrei no seu blog agora e pareceu tudo certo com as 3 colunas

    ResponderExcluir
  33. Olha Fabiano ,Eu achei os códigos do começo, só que tao modificados,Apenas o outer-wrapper está como no tutorial.
    Está assim:
    ___________________________________
    #footer {
    clear: $startSide;
    margin: 0;
    padding: 0 20px;
    border: 0;
    text-align: $startSide;
    border-top: 1px solid #f9f9f9;
    ___________________________________
    #header-wrapper {
    background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
    margin: 0 auto;
    padding-top: 0;
    padding-$endSide: 0;
    padding-bottom: 15px;
    padding-$startSide: 0;
    border: 0;
    }
    ___________________________________

    o que eu faço?

    ResponderExcluir
  34. Olá,
    ae povo,
    me passa o HTML disso ai pra eu colocr no meu blog

    ResponderExcluir
  35. Hualyson

    realmente seu template é diferente, pesquise por width: deve encontrar algum com valor alto 660 ou mais, então altere para o 980 e veja se consegue fazer o resto do procedimento.

    qual o link do blog ? assim posso olhar o html dele e responder melhor

    ResponderExcluir
  36. cosmopax
    você precisa alterar o código no html do seu blog ou procurar um template pronto para download

    o código do jeito que publicamos já está pronto, você precisa é colocar no blog

    ResponderExcluir
  37. Olha fabiano, o blog:
    http://www.externatoticoeteco.blogspot.com/

    é o blog da minha escola.
    Eu que administro ele.

    ResponderExcluir
  38. Fabiano Roberto, eu consegui fazer isso q vc disse, só que a coluna do lado esquerdo ficou um pouco pra dentro das postagens,para ficar normal eu altero o tamanho da largura do blog ??? Ou altero o tamanho das postagens?
    Se eu for Alterar em que parte do "editar HTML" eu altero?

    SIm, eu estou mexendo no html blog HISTORIA, tem no menu.

    ResponderExcluir
  39. Fabianooo, Consegui, está tudo bem direitinho, eu alterei o temanho do novo side bar pra o mesmo tamanho do outro, ai deu certo!!!!

    Muito obrigado pela ajuda!!!
    esse é o melhor site para blogs de todos!!!

    Obrigado!!

    ResponderExcluir
  40. Hualyson

    essas outras partes não tem a largura definida, pode tentar colocar mais um coluna no blog apenas alterando o trecho
    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 692px;


    esse 692 é a largura do seu blog, então aumente para 980 e coloque o código da nova coluna como indicamos na postagem

    ResponderExcluir
  41. eu não consseguir achar os nomes #header-wrapper, #outer-wrapper e #footer e nem width:660px; onde fica por favor me responde

    ResponderExcluir
  42. franciscot, clique ctrl F para procurar, mas alguns modelos não tem pq são adaptados

    ResponderExcluir
  43. socorro

    segui seus passos e deu quase tudo certo, mas sempre q eu adiciono a barra a original vai parar lá embaixo do blog. Eu queria que elas ficassem entre a coluna das postagens. Como faço?

    ResponderExcluir
  44. T.R. Freitas, não entendi que barra está falando...

    mas dependendo do que colocar no blog pode dar problemas devido a largura

    ResponderExcluir
  45. Desculpe o termo incorreto é q eu realmente sou leiga no assunto, eu quis dizer a coluna original do perfil e arquivo.

    Eu estou modificando o template basico 'minima' do blooguer e queria ter a sequencia COLUNA NOVA/ POSTAGENS/ COLUNA DE PERFIL E ARQUIVO

    eu só me atrapalho com isso pq o espaço aumenta como vc ensina e eu coloco o codico como vc instrui, mas na hora de tentar mudar o tamanho das colunas como vc sugeriu antes só funciona com a coluna de perfil/arquivo, a outra permanece ou embaixo ou em cima. eu devo tá fazendo alguma coisa errada. Será que se eu te mandar a html, vc corigiria ou ao menos me explicasse onde está o meu erro?

    ResponderExcluir
  46. T. R. Freitas
    geralmente as larguras do blog estão em #main, #sidebar e #newsidebar, diminua um pouco esses valores

    ResponderExcluir
  47. Finalmente descobri o problema.

    era que na parte dos tamanhos não constava as medidas do #newsidebar, aí eu criei uma e agora tá perfeito!

    Valeu pela ajuda! vc por acaso tem dicas de como substituir labels por imagens?

    ResponderExcluir
  48. Oi Fabiano, enfim consegui adcionar a 3 coluna do meu blog, mas ele ficou meio desestrurado, porque só ficaram as separações de gadgets verticais, mais gostaria de colocar divisórias nas colunas.

    Dê uma olhada no blog:

    http://irmandade-do-dragoes-germanicos.blogspot.com/

    ResponderExcluir
  49. Fabiano,

    Com que programa e como você tinha feito aquela imagem que a algum tempo tinha em seu blog, aquela que tinha o nome Dicas para blogs e que ficava indo pra cima pra baixo e prum lado e pro outro batendo nas paredes. ?

    ResponderExcluir
  50. a separação das colunas pode ser feita colocando um borda nas postagem, encontre #main{...
    e coloque border: 2px solid # 000000; dentro das chaves junto com o que já estiver lá.

    veja aqui outros tipos de bordas

    http://www.dicasparablogs.com.br/2008/08/colocar-ou-alterar-as-bordas.html

    ResponderExcluir
  51. o titulo se movendo e quicando nas paredes é feito em Flash, não é uma imagem é animação

    ResponderExcluir
  52. Olá queria sua ajuda em 2 coisas !!quando eu fui dividir o meu blog em 3 ficou o mais bagunça a imagem de cima ocupou quase tudo sei lá não consigui fazer nada (OBS eu sei HTMl mais ai nao consegui)!!e os coisas do meu blog(contador de visitas etc..) vicaram tudo em baixo mais poderia me ajudar?!a outra ajuda que eu queria era como faço Buttons para mandar para blog para ficar como parceiro????OBS meu nome nao é antonio nao quero divulgar meu nome

    ResponderExcluir
  53. colocar mais um coluna no blog é mesmo um trabalho complicado, ainda mais se o modelo que estiver usando não for um padrão do blogger.

    sobre algumas coisas irem para o final da pagina precisa reduzir a largura das colunas ou postagens

    ResponderExcluir
  54. Quando entro na página Editar HTML e pesquiso por esses códigos que tem que trocar o width:660px o width não aparece! o que eu faço?

    ResponderExcluir
  55. Tuts

    o importante é achar a largura que está em #header-wrapper, #outer-wrapper e #footer, talvez não apareça nos 3, mas onde tiver precisa alterar

    ResponderExcluir
  56. quero agradecer a vcs por este site maravilhoso tem me ajudado muito no aprendizado deste meio de comunicação que é o blog. Muito obrigado, boa sorte pra vcs!!!!

    ResponderExcluir
  57. NÃO conseguir!

    Fiz tudo como explicou e ai some a coluna que ja tinha e nõa aparece a outra.


    Me ajudem sera que alguém do blog pode me passar seu e-mail ai eu envio o meu Html e vcs fazem.


    Por favorrr.

    ResponderExcluir
  58. Melissaludy
    colocar mais uma coluna no blog é mesmo complicado, tente fazer um blog para testes e usar o modelo minima nele

    ResponderExcluir
  59. Oi, eu tenho a pouco tempo meu Blog vc acha que consigo fazer essas alterações todas?
    Eu queria colocar uma na direita e outra na esquerda, mais elas são diferentes.
    Para vc entender melhor:
    http://muitas-dicas.blogspot.com/

    ResponderExcluir
  60. João Manoel
    o modelo do seu blog já foi bem alterado, não tem como mudar uma coluna de lado apartir do seu modelo daria quase mais trabalho do que trocar de modelo

    ResponderExcluir
  61. Como eu nao consegui fazer a coluna q ensinou, fiz alguns passos, salvei o HTML, e baixei um template bonitinho, porem a segunda coluna é muita estreita e nao cabe nada, e nao consigo encontrar o codigo para alterar o tamanho.
    Vou te passar o endereço do blog, e se puder dar uma olhadinha... bj

    http://amandoevivendo.blogspot.com

    E ultimamente este blog esta sendo tdo para mim, porem nem conseguir bloquear copia das fotos nao consigo, e tenho varias para postar.
    (Meu outro blog, era mto simples, da web mesmo, por isso queria mais incrementado, mas estou levando uma surra que vou falar viu, rs)

    Bjo e bjo

    ResponderExcluir
  62. Rô Lopes e Mércio Moura

    as larguras das colunas são em width: ...px;

    ResponderExcluir
  63. Olá. Segui os passos e deu tudo certo. Muito útil. Um abraço.

    ResponderExcluir
  64. Boa tarde !

    Bom na verdade eu estou querendo aumentar o tamanho da sidebar ou onde fica as postagens.Eu uso o modelo Denim, eu aumentei a largura do blog e em seguida acrescentei bordas na sidebar e onde fica as postagens,só que no meio ficou um espaço em branco no qual não gostei, você pode me ajudar nisso, já tem alguma postagem sobre esse assunto.Se tiver onde posso encontrar mais fácil pelo blog, ou é aleatório.Desde já agradeço Fabiano.Abraços.

    ResponderExcluir
  65. Megas promoções

    veja aqui sobre larguras do blog
    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html

    ResponderExcluir
  66. Olá. Eu não estou consiguindo fazer. Já tentei varias vezes nas sempre acontece o mesmo. Ou fica uma coluna em cima e os post em baixo, ou fica tudo um em cima do outro. E o fundo fica diferente.
    Meu template é o scriba (acho que é isso) então os nomes são diferentes. Pode me ajudar?

    ResponderExcluir
  67. Flora Sellene
    o problema de uma coluna ou postagem ficar para baixo é pq a largura das colunas mais a postagens é maior que a largura total do blog, ou seja diminua a largura.

    sobre as cores ficarem desiguais veja se está usando imagem ou cor de fundo(backgroud) em alguma das colunas se tiver retire.

    Template do Blog, colunas de tamanhos iguais

    ResponderExcluir
  68. Eu fiz tudo certinho, mas no final, as colunas ficaram juntas do lado direito da tela, quando coloco left e right, na #sidebar e na #newsidebar, a coluna antiga fica embaixo da nova e sobra um espaço entre as postagens e as colunas, o que eu faço?

    ResponderExcluir
  69. Nathy

    veja sobreLargura do Blog

    o problema deve ser que as larguras das colunas mais a postagem estão maiores que a largura total do blog por isso uma delas vai para o final da pagina.

    ResponderExcluir
  70. Coseguii fazer a coluna !!! vlw msm so que não gostei muito xD !!! o nome da nova coluna não fica na msm cor da outra coluna !!! maiis vlw msm!

    ResponderExcluir
  71. Valeu cara! Estava tentando colocar uma oura coluna a um tempo no meu blog e não estava conseguindo até que achei o seu blog. Muito boa explicação.

    ResponderExcluir
  72. obrigado consegui adicionar a coluna !
    porém como eu faço para deixar ela igual a outra coluna pois a original tem um espaço e uma linha de divição entre cada template gostaria de por isso na outra coluna tbm !

    ResponderExcluir
  73. tem que procurar esses estilos que estão configurados para a sidebar e criar um nova para a newsidebar, por exemplo se tiver #sidebar{border: 1px} você deve criar um #newsidebar{border:1px}

    mas veja somente as configurações principais, não é necessário duplicar tudo. e cuidado para não colocar dois códigos para a mesma coisa

    ResponderExcluir
  74. Eu até consegui, só que as postagens ficaram coladas na coluna da esquerda. Como faço para centralizar as postagens?

    ResponderExcluir
  75. Socorro Fabiano! Será que está valendo para o modelo atual do Blogger? Não consegui localizar "#header-wrapper, #outer-wrapper e #footer" nesta ordem, ou não é assim? Ai meu Deus, que negócio dificil este! continuo tentando....grata,

    ResponderExcluir
  76. Liete Alves


    nem todos os modelos tem essas tags, principalmente se baixar o template de algum site.

    mas veja aqui sobre Designer de modelo - Layout e Configurações Avançadas

    ResponderExcluir
  77. Meu blog (http://obairroondemoro.blogspot.com/) é modelo antigo, será por isso? Vou tentar o que vc falou. Muito grata!

    ResponderExcluir
  78. deve ser por causa do modelo antigo sim, deveria mudar para o novo, mas salve os códigos do contador de visitas e todos os outros acessórios antes de mudar

    ResponderExcluir
  79. Fabiano to tentando dividir o blog em três colunas, ma sto com um problema. a coluna da direita fica um pouco em baixo da coluna de postagens, ja tentei diminuir a coluna, aumentar largura e nada disso funciona, fica sempre um pouco mais embaixo. oq pode ser?

    ResponderExcluir
  80. Kelvin, o problema tem que ser nas larguras ou vc não colocou algum código, por exemplo o float:...

    aumente a largura total do blog

    ResponderExcluir
  81. A largura estavam todas corretas, mas o float do main... era pra colocar left, NSB(left), Main(left), SB(right)... isso tudo por causa de 1 palavrinha ¬¬"... mas enfim consegui

    ResponderExcluir
  82. Ola Fabiano Roberto, primeira vez que visito seu blog, e estou tentandop colocar as 3 colunas no meu, mas to perdidiinha, me diz uma coisa, meu blog tem um template personalizado, é essa mesma regra que eu devo seguir, ou há algo de diferente que devo fazer?!
    Desde já grata!

    ResponderExcluir
  83. Suellen+Junior, se encontrar essas tags no seu modelo o procedimento é o mesmo.

    mesmo que seu blog usar outras tags e você souber localizar poderá usar essa explicação para colocar mais uma coluna no seu blog.

    ResponderExcluir
  84. Obrigado a ajuda Fabiano Roberto, nfim consegui colocar a tal 3ª coluna, mas não consigo fazer com que a postagem fiquee no meeio certinho, faço várias alterações nos tamanhos e ela nem sai do lugar, é como se eeu não estivesse alterando nada..Vc poderia dar uma espiadela la e me dizer oque eu posso fazer?
    Obrigado

    ResponderExcluir
  85. no trecho que alterou precisa ir mudando os valores que estão em width para centralizar a coluna das postagens, se alguma das colunas for para o final da pagina é porque a soma das 3 deu mais que a largura total do blog, então diminua uma delas.

    #main-wrapper {
    width: 420px;
    float: left;
    padding -right:15px
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebar-wrapper {
    width: 200px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #newsidebar-wrapper {
    width: 200px;
    float: left;
    padding-left:10px;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    ResponderExcluir
  86. E ai fabiano olha eu mais uma vez te enchendo o saco, rsrsrs, tipo assim, custei mas consigui colocar 3 colunas no meu blog, mas queria deixar um espaco de 1 centimetro mais ou menos entre as colunas, o blog e : www.blogsportmade.blogspot.com

    ResponderExcluir
  87. Oiie
    Alguem pode me ajudar ?
    eu Vi Um menu em uns do seus site "Cidade Web" la tem Uma menu azul..
    Poxa você Pode me Mandar o Codigo dele para Eu Coloca em Meu Blog ?
    Vlw & Obrigado !

    ResponderExcluir
  88. nao consegui :'o
    tipo ... da pra explicar melhor? :X

    esse site é d+ *o*

    ResponderExcluir
  89. Oiie

    E eu Aque de novo :B
    Tipo eu coloquei 2 colunas mais uma ficou mais longe do que a Outra da postagem :(
    Tem como Colocar a POstagem no Meio Das 2 Colunas ???

    EX:

    Coluna | | Coluna
    | 1 | POstagens | | 2 |
    | | | | | | |
    | | | | | | |
    |___|_____|_____|___|___|


    Vlw & Obrigado ! =D

    ResponderExcluir
  90. Olá,

    estou com uma dúvida, fiz tudo certo e ficou com 3 colunas meu blog, só que ai a coluna da postagem ficou mto grudada com a newsidebar, pra alterar isso coloquei o seguinte codigo: margin-left: 15px;padding-left:5px;

    assim como vc tinha tido para o colega Matheus ai. Só que num alterou em nada...
    Minha pergunta é como eu faço pra colocar o coluna da postagem um pouuquinho mais pra direita?

    meu blog: http://anidaf.blogspot.com

    ResponderExcluir
  91. Eva Moon
    entrei no seu blog e só vi o padding na parte sidebar li, não é neste lugar, tem que ser onde aparece somente #sidebar-wrapper

    ResponderExcluir
  92. Onde tem Menu vertical com efeito ?
    Vlw ! & Obrigado ;D

    ResponderExcluir
  93. ainda não publiquei sobre o menu vertical, mas vou fazer isso logo.

    ResponderExcluir
  94. como aumentar a largura do TOPO do blog, sabe? o lugar onde colocamos a imagem com o nome do noss blog, sabe? ahh e tbm quero saber como retirar a rebarba, borda (sei lá como fala) em volta da imagem, sei que deve de ter que tirar algum codigo , só nao sei qual, me ajudem por favor....

    ResponderExcluir
  95. veja aqui sobre Largura do Blog


    a borda deve ter algo aparecido com isso no html do seu blog:
    img{border:1px solid #000000;

    o que estiver depois de border: apague e coloque a palavra none;

    ResponderExcluir
  96. Fabiano eu tentei colocar as 3 colunas mais ficou estranho olha http://mi-coolschool.blogspot.com
    como eu posso ajeitar

    ResponderExcluir
  97. Mi
    se esta falando sobre as colunas ficarem estreitas demais, aumente o valor em #header-wrapper
    Largura do Blog

    ResponderExcluir
  98. eu ja tentei em varios sites, mas não to conseguindo colocar as 3 colunas, é tudo diferente... me ajudem

    ResponderExcluir
  99. Boas, Fabiano eu coloquei as 3 colunas. Só que a coluna do meio (das mensagens) ficou debaixo da que eu criei. Se quiser ver como está o blog é o seguinte http://robertocmfdownloads.blogspot.com

    Veja se me consegue ajudar!

    ResponderExcluir
  100. Roberto Faria
    entre na pagina editar html e procure por:

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;

    apague essa linha max-width:700px;

    ResponderExcluir
  101. Fabiano, obrigado pela a atençao mas não consegui resolver...

    ResponderExcluir
  102. agora você pode também usar os novos recursos do blogger, na pagina designer de modelo http://www.dicasparablogs.com.br/2010/03/mudar-template-do-blog-designer-do.html

    ResponderExcluir
  103. Naum consegui nem chegar á parte do <b:section class='main'... Não entendi mta coisa não...
    Vc poderia me explicar melhor?

    ResponderExcluir
  104. Radikais Getsêmane
    você precisa entrar na pagina editar html, clicar para expandir o modelo e procurar pelos códigos que falamos.

    mas agora é possível Mudar template do blog com a pagina Designer do modelo

    ResponderExcluir
  105. Fabiano fiz tudo certo mas olha como fico as colunas > http://testeacb132.blogspot.com/

    fiz esse blog de teste so para eu fazer as seguintes alteraçoes...mas a #newsidebar e a #sidebar estao coladas..me ajude!

    ResponderExcluir
  106. Olá, Fabiabiano! Não consigo de geito nenhum colocar uma terceira coluna no meu blog. Tento, tento e n consigo. Pra começar, n consigo achar o header, outer e footer p mudar o width p 980. Segundo, não consigo #sidebar{} sosinho, sempre vem acompanhado, tipo #sidebar-wrap {}. Coloco no sidebar-wrap mesmo, e n mudo os width p 980. O resto faço certinho (pelo menos acho que faço certinho). Quando visualizo a coluna ficou embaixo do cabeçalho, encima da coluna de postagens. Énfim, n dá certo. Vc poderia me ajudar? Eu poderia enviar o template p vc colocar os códigos p terceira coluna e me enviar de volta? Já n sou especialista em HTML, e isso tá complicado (pelo menos p mim)...

    Meu blog é www.mjj-fc.blogspot.com.
    Parabéns por esse blog super útil!

    ResponderExcluir
  107. seu blog usa 740 de largura
    #outer-wrapper {
    width:740px;


    precisa aumentar esse valor para colocar 3 colunas

    ResponderExcluir
  108. OLá Fabiano sou fã dos eu blog, até tenhos eu link no meu blog. E agora preciso de sua ajuda, já coloquei a terceira coluna, mais agora com o novo design não precisa disso, ai q acontece? Meu blog ta todo bagunçado, pq além da divisão q fiz tem a do blog, resumo tudo embaixo das postagens. Ou seja como faço para tirar a coluna que tinha inserido?

    Grata

    Ane

    ResponderExcluir
  109. acho que seria mais facil trocar o modelo do que corrigir o atual, mas pode tentar aumentar a largura do blog na pagina designer

    ResponderExcluir
  110. Pow amei o tutorial...sofri um pouquinhO para corrigir o problema das coluna da esquerda ficar colada na coluna de posts..mas pra o pessoal que está com essa dúvida é só ir em:
    #main-wrapper
    e colocar logo abaixo
    margin-left: 5px;
    o valor 5 px vc vai alterando até ficar igual ao da coluna da direita..
    muito obrigada pelo tutO!!

    ResponderExcluir
  111. cara, tem como remover uma coluna?
    meu blog tem tres colunas e eu gostaria de remover a sidebar do lado direito.

    ResponderExcluir
  112. você pode tentar retirar a coluna fazendo o contrário que mostramos aqui, ou usar a pagina designer de modelo

    ResponderExcluir
  113. Fiz e deu tudo certo, mas criei uma Sidebar, na verdade eu queria criar outra coluna, deixando da seguinte forma:

    Coluna | Conteúdo | Coluna

    mas seu tuto funcionou direitinho, parabéns.

    ResponderExcluir
  114. Olá gostaria de fazer Uma assim como eu faço ?
    http://img13.imageshack.us/img13/5764/sidebardividida.jpg

    meu blog é http://brasil-rpg.blogspot.com/ (blog de test.)

    ResponderExcluir
  115. Olá Fabiano, sei que não tem muito a ver com o assunto mas, você sabe de algum programa em potuguês (de preferencia) que eu possa fazer templates? Eu não acho uma template exatamente com a minha cara.....
    Se puder ajudar eu agradeço....

    ResponderExcluir
  116. Ana Carolina
    editar os templates do blogger é meio complicado, acho que o melhor é aprender um pouco sobre html e CSS assim conseguirá fazer as mudanças que deseja nos templates do blogger, não uso programas para editar o blog, apenas para gerar partes do código.

    ResponderExcluir
  117. Ja rodei tudo q foi parte do google e n encontrei o que queria..
    tlvz vcs possam me ajudar!

    queria saber como colocar 3 colunas, so q no topo, no caso jah existem duas, o cabeçalho e outa embaixo p adicionar um gadget, queria mais uma coluna embaixo dessa do gadgetto msm tamanho das duas de cima, como faço ?
    desde de jah agradeço !

    ResponderExcluir
  118. marcos... tente usar os novos templates... neles isso é automatico

    fazer essas alterações no html pode gerar erros... e ainda não temos tutoriais sobre isso

    ResponderExcluir
  119. ja procurei em varios lugares e não encontrei..
    tlvz vcs possam me ajudar !

    queria saber como colocar 3 colunas horizontais no topo do blog, no caso jah existem duas, a do cabeçalho e mais uma p adicionar um gadget, queria saber como colocar mais uma embaixo dessa do gadget, do msm tamanho das duas de cima!?

    ---------------- cabeçalho
    ---------------- gadget
    ---------------- <---quero mais uma assim

    desde jah agradeço !

    ResponderExcluir
  120. postei mais um comentario, pencei q o primeiro n tinha ido pq minha net caiu, ok, vou tentar outro template !

    brigado !

    ResponderExcluir
  121. No meu blog não encontrei nehum dois #header-wrapper, #outer-wrapper e #footer , e agora ?

    ResponderExcluir
  122. talvez seu blog seja com os templates novos, então pode mudar o numero de colunas na pagina design do modelo

    ResponderExcluir
  123. Olà Fabiano, li os comentàrios e parece que sò voce pode me ajudar! Hà uma semana, do nada, sem nenhuma alteraçao, sem nenhum post novo, nada, a segunda coluna do meu blog foi parar embaixo de todas as postagens. Jà fiz o que voce disse para fazer em um caso assim (remover posts, fotos, videos, etc), jà alterei a largura das colunas... e nada. Nao sei mais o que fazer. Estou enlouquecendo. Me ajude, por favor!!

    ResponderExcluir
  124. Gisa
    você deve ter feito alguma alteração no html do seu blog... infelizmente não tem como reverter precisaria ter um backup do template ou trocar por outro... achar e corrigir erros é muito dificil

    ResponderExcluir
  125. Do seu jeito não deu certo, mais deu pra dar uma idéia de como a coisa funciona e conseguir fazer vlw :)

    ResponderExcluir
  126. Ariel, os templates variam bastante... por isso não funciona em todos

    ResponderExcluir
  127. Coloca esse tuto no seu blog http://ow.ly/6Elv3 eu tava procurando essas semanas mais não achei e desisti e hoje achei na sorte procurando outra coisa xD

    ResponderExcluir
  128. isso acontece sempre comigo... achar uma coisa quando estou procurando outra....

    esse é um dos motivos que sempre tenho que fazer uma "faxina" no menu de favoritos do navegador

    ResponderExcluir
  129. Essa dica serve pra quem usa um template já pronto? por que eu não achei nenhuma dessas palavras acho que o meu não tem como colocar mais uma coluna? eu uso o template night-sky ):

    ResponderExcluir
  130. como eu movimento a sedebar do cabeçalho para o meio....

    ResponderExcluir
  131. como separo as sidebar do blog

    ResponderExcluir
  132. pelo que falou seu template tem alguns erros..


    >Android HD 3D e anonimo


    pois normalmente a sidebar acompanha o cabeçalho...

    mas procure por estilo sidebar que tenham o codigo float, margin..

    não tenho como explicar melhor, seria necessário fazer testes com o blog

    ResponderExcluir
  133. fabiano no meu blog esta ficando uma linha de marcação embaixo das postagens ou toda ves que eu coloco augum gadiget..como eu fasso pra tiralas....desde ja agradeço..abraços

    ResponderExcluir
  134. Anônimo
    procure por border no seu html... talvez no estilo .widget{...

    ResponderExcluir
  135. Oi Fabiano, deu tudo certinho, só queria que você me ensinasse a por a margem entre entre as colunas ( direita, postagem, esquerda)!

    tô começando a contruir um template a partir do Modelo mínima.

    VER COMO TA: http://largurateste.blogspot.com/

    ResponderExcluir
  136. @Jessi Potter se está começando agora, é melhor usar um dos novos modelos que são mais faceis de colocar outra coluna (pagina desing do modelo)

    se o seu template não tem aquela pagina o jeito é usar os códigos como mostramos neste tutorial ou trocar o template

    ResponderExcluir
  137. @Fabiano Roberto

    Fabiano, eu ja sou acostumada com código html ja faz um bom tempo, só que eu sempre pegava templates com colunas pré-definidas e apenas ia costumizando o temanho cor, as vezes o lugar dependendo da necessidade do meu site. Só que eu querendo fazer o meu próprio adicionando as colunas pra ficar do jeito que eu quero, por isso tava precisando de uma ajuda só pra por a margem que exatamente não sei onde por... help me?

    ResponderExcluir
  138. Fabiano, já consegui adicionar o espaço entre as colunas
    margin-right: 5px;
    margin-left: 5px;

    esse código funciona tbm pra separar os gadgets?

    ResponderExcluir
  139. O Fabiano eu consegui arruma Valeu, mas eu tive que aumentar o tamanho do width para 1150px. Deu tudo certo só que o quando vou na aba layout ela ta desconfigurada, e uma parte da coluna da direita esta fora da tela, tem como arruma?

    Ajuda ai!!!

    ResponderExcluir
  140. é por causa da largura 1150 deve ter outras partes com larguras menores.

    é melhor usar um template padrão do blogger assim não terá esse erro

    ResponderExcluir
  141. Oi, Fabiano!

    Tudo bem?

    Muito legal o seu blog, como tem me ajudado.

    Só estou com uma dúvida:

    É possível eu colocar um anúncio abaixo do título do blog (abaixo do cabeçalho)?

    Já testei os “Elementos de Página” mas não deu certo, porque o modelo de meu template não permite, então decidi experimentar o código diretamente dentro do template, mas não consegui achar onde colocá-lo. Abaixo ou em cima de qual Tag?

    Você poderia me dar uma força?

    Desde já agradeço!

    Muito obrigada!

    Lara

    ResponderExcluir
  142. esses códigos só funcionam se o seu template for dos modelos antes da pagina design do modelo

    veja se no seu template tem os trechos que mostramos aqui, se não achar é porque é outro modelo então não tem como alterar usando esses códigos

    ResponderExcluir
  143. se colocou a coluna usando esse tutorial ou um similar tem que alterar novamente os códigos desfazendo o processo de adicionar a coluna

    ResponderExcluir
  144. Oi Fabiano, fiz conforme vc explicou porém qdo vou visualizar apresenta o seguinte erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:widget" must be terminated by the matching end-tag "".

    Error 500

    Agradeço muitissimo se vc puder me ajudar. Abraços

    ResponderExcluir
  145. provavelmente algum detalhe que faltou.
    por exemplo aspas ou sinal < / ' > faltando ou sobrando

    ResponderExcluir
  146. Eu kero alcontrario.
    Eu tero tirar uma coluna.
    Eu já tentei usar a pagina designer de modelo. e não conseguir.
    P.s.: meu modelo tem duas colunas do lado esquerdo (<--). E eu só kero uma.
    Oke eu faço???

    ResponderExcluir
  147. Jhon LucCas :) os novos template são diferentes se o seu modelo tem erros talvez seja melhor trocar o template. É possivel corrigir os erros mas precisa entender um pouco de html e fazer testes até achar a solução.

    normalmente a pagina designer do modelo funciona perfeitamente.

    ResponderExcluir
  148. Fabiano quero o contrário.
    Em vez de colocar, quero tirar uma coluna.
    Como faço isso?

    ResponderExcluir
  149. Natalia seria mais fácil fazer isso com um template que funcione na pagina design do modelo, então seria só selecionar o layout que deseja


    se não teria que tentar fazer o procedimento do tutorial ao contrário mas é um pouco complicado

    ResponderExcluir
  150. Olá, eu gostaria de saber como eu faço para mudar esse detalhe do meu sidebar, gostaria de tira-lo do meio e colocar apenas na direita pq assim ficariam gadgets um abaixo do outro e nao ao lado como mosra as duas colunas acima. Muito obrigada =)

    http://i1358.photobucket.com/albums/q775/Rosenarmr/Untitled_zpsb66797d1.jpg

    ResponderExcluir
    Respostas
    1. esse seu template é bem modificado, eu não tenho como responder isso somente olhando a imagem.

      tente adicionar os gadgets que você quer e depois arrastar para o lugar que deseja. Caso não seja possivel arrastar veja aqui:
      Problemas para mover ou adicionar gadgets do blog

      Excluir
    2. não tem como arrastar pq ele só fica no meio, abaixo da postagem e eu quero esse detalhe a direita abaixo das duas colunas =(

      Excluir
    3. se baixou o template pronto de algum site para fazer esse tipo de alteração precisa entender de html e fazer varios testes... (na maioria das vezes é mais facil trocar de template)

      se for um modelo padrão do blogger é possível alterar o layout pela pagina design, veja aqui:
      Designer de modelo - Layout e Configurações Avançadas

      Excluir
  151. Eu continuo usando o modelo antigo, mas não sei o porquê de eu nunca achar esses códigos no meu Blog, queria muito add mais uma coluna.

    ResponderExcluir
  152. os códigos mudaram ...

    mas na pagina modelo > personalizar (Designer de modelo do Blogger)

    entre em layout lá tem a opção do template com 3 colunas.

    ResponderExcluir
    Respostas
    1. A questão que esse Modelo antigo não tem essa opção Fabiano, só consegue mudar pelos códigos html, mas eu to tentando aqui. Vlw!

      Excluir
  153. está cada vez mais difícil achar códigos para os modelos antigos do blogger

    talvez seja melhor mudar para um novo.

    no começo pode parecer meio estranho de usar, mas aos poucos você acostuma

    ResponderExcluir