Para adicionar uma 3a. coluna, você precisa definir um novo wrapper, ou uma #newsidebar-wrapper (#novasidebar-wrapper). Ache a definitção de #sidebar-wrapper, copie/cole e renomeie-a para criar a nova wrapper (new wrapper).
2. Esses wrappers podem ter diferentes widths dependendo do seu tema. Você terá que arrumar os widths desses 4 wrappers para que eles fiquem certos. Eu aconselho a colocar o width do outer-wrapper em 750px, main-wrapper em 400px e cada sidebar-wrapper em 150px. Importante: a soma do main+sidebars não pode ultrapassar o outer-wrapper, ou seja= 750 > 400+150+150.
3. Não se esqueça de acertar a propriedade do float desses wrappers. Por exemplo, se a sidebar-wrapper tem o float: right, a nova sidebar-wrapper (newsidebar-wrapper) terá o float:left e vice versa (a menos que você queira que elas fiquem ambas de um lado só). Ainda, ajuste a margem esquerda e direita (left or right margin) do main-wrapper de modo que haja espaço entre a nova coluna e o main.
Resumindo, um exemplo das configurações:
#outer-wrapper {
width: 750px;
…
}
#main-wrapper {
width: 400px;
margin-left: 20px;
…
}
#sidebar-wrapper {
width: 150px;
float: right;
…
}
#newsidebar-wrapper {
width: 150px;
float: left;
…
}
<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>
<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’false’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>
24 Responses for "Adicionando outra coluna no tema do novo Blogger"
ótimo tuto! não recebi o e-mail, mas já está tudo ok.
bjs
Sou webdesigner, mas posso dizer que às vezes tenho um trabalhão pra descobrir o que é o que no html do blog….rssssss…se bem que hoje em dia já me acostumei..!!!
ariane, então tá tudo certo…
dolci, vc. deve saber muito mais que eu então, pois sou uma web designer amadora (rs). Bjos. prá vcs.
Oi Cláudia,
Fiz como você ensinou e no meu caso não funcionou. Que tipo de modelo você salvou para fazer as transformações?
No que fiz, ficou uma coluna menor, um espaço vazio ao lado e a maior do lado esquerdo.
Alguém tentou fazer e deu certo?
jackson: sim, dá certo sim, tanto é que foi por esse tuto que o Ramani (Hackosphere) e o Hoctro (Hoctro) entre outros, fizeram todos os temas do novo Blogger em 3 colunas. O tema que eu adaptei aqui no meu blog foi feito dessa forma. Ocorre que, como eu falei no post, vc. tem que saber mexer (pelo menos um pouco) no CSS, pois terá que fazer ajustes, como no seu caso, espaços vazios e colunas de medidas diferentes tem que ser acertadas…
muito bom o tuto, isso ai é realmente uma coisa que bate.
Continuo a recomendando.rs
Bj
Certim.COM
Oi Guilherme. Obrigada. Bjos
Claudya, excelente post! Já me pediram várias vezes essa explicação, mas ainda não arranjei tempo pra fazer… Agora você me salvou, vou referir o pessoal pra cá, e vou indicar seu post lá nos meus blogs.
Jóia mesmo! Eu estou atrasada com tudo, como sempre, mas assim que puder arrumar o blogroll do Blog Templates vou te linkar lá. Parabéns mais uma vez pelo seu trabalho!
Beijos.
Cara eu fiz tudo certo ^^
A coluna entrou normal
Só que ela não fica com o mesmo estilo da coluna da esquerda
http://mwb-en.blogspot.com/
Tu sabe o que pode ser?
made warez, como eu não edito temas baseados no WP, e o seu é assim, aconselho vc. a falar com o editor do tema, pois, deve ser algo relativo as medidas da sidebar.
Difícil =/
Eu achei no Jackbook e não falo inglês.
Vou ver com o cara que traduz meu blog original (www.mwbra.com) pra o inglês.
Muito obrigado pela ajuda viu.
made warez, veja com a Erica (temas Bujiru), ela adpta temas do WP. Bjs.
Claudya, te mandei 1 email =)
Eu entrei em contato com a Erica ^^
Obrigado pela ajuda.
Made Warez, ok. Se puder ajudar de alguma forma, me fale. Bjs.
e uma coisa.
u meu template nao tem nada do q esta ai e eu precisava mesm d add 1 coluna. pf manda 1 email para danieljcr9@gmail.com ou se preferir add me no msn danieljcr9@hotmail.com
e mt importante msm. bgd
NokiaBoy, atendimento exclusivo estou cobrando de acordo com o que a pessoa quer. Se quiser, me mande um e-mail em claudya65@hotmail.com explicando o caso.
Não deu certo aparece a seguinte mensagem de erro: “Open quote is expected for attribute “{1}” associated with an element type “id” , o que significa?
Pois é…. tentei outros métodos para adicionar a terceira coluna e tal, mas todos falharam!!!
Então, evidentemente, eu não poderia deixar de elogiar o sucesso deste pequeno, mas útil, tutorial. ^^
Obrigado, Claudya.
Renata, dá certo sim, revise o código, com calma e tente de novo! Pedro, obrigada, esse tutorial foi testado, e dá 100% certo.
caraca.. consegui nao … meu ajuda ae…
Marcos, esse código está 100% certo. Revise com calma e repita… Ou então, te aconselho a escolher um tema de 3 colunas pronto e mudar/editar a gosto…
eu não consegui aumentar a coluna!! =(
será q alguém pode me ajudar !!!
Bruno, como já disse, leia o código com calma, siga os passos que dá 100% certo. Ou ache um tema de 3 colunas e mude do seu jeito. Eu posso fazer, mas cobro, se quiser entre em contato em claudya65@hotmail.com
Leave a reply