Adicionando outra coluna no tema do novo Blogger
Date: Sexta-feira, Agosto 3rd, 2007 at 1:45 pm
Esse post foi feito a pedidos, prá que eu mostrasse como adicionar uma outra coluna no template do blog. Antes de mais nada, a fonte está no blog Hackosphere (foi lá que eu li, traduzi e testei). Algumas explicações. Todos os que mudaram para o novo Blogger (xml), sabem que há uma grande diferença entre visualizar ou ter o preview do seu tema no novo sistema. No novo Blogger, a visualização das alterações do template só são vistas on-line (aceito sugestões se alguém souber outro jeito). Assim, as modificações no tema são praticamente todas feitas no painel de controle do seu blog, na seção Modelo e na edição do html. Então, aconselho aos que forem, não só adicionar uma outra coluna no blog, como fazer toda e qualquer mudança no tema, que ela seja feita em um blog de teste (se ocorrer um erro, não se perderá nada importante). Também é importante que você saiba um pouco de CSS, já que é preciso fazer ajustes adicionais no CSS e body (corpo) do tema (como no width, margin etc), se uma das sidebars for empurrada prá baixo. Agora, o que você tem que saber:
1. O novo Blogger tem 3 definições CSS para o wrapper: #outer-wrapper - define todo o blog #main-wrapper - define a coluna/parte central do blog (onde vão os posts) #sidebar-wrapper - define a sidebar 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; … }
4. Agora que o CSS está ok, vamos fazer as mudanças no body (corpo) do template. Ache a div sections da main-wrapper e da sidebar-wrapper e adicione o código em vermelho logo abaixo ou acima do main-wrapper (exemplo: se a sidebar-wrapper está abaixo, a newsidebar-wrapper vai acima e vice versa.
<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>
Após fazer as alterações e salvar, se você for ao Template, e em Elementos de Página, você vai ver 2 sidebars. Você pode então mover os elementos entre elas, e adicionar novos elementos também. Espero que tenha ajudado!
Agosto 3rd, 2007 at 4:04 pm
ótimo tuto! não recebi o e-mail, mas já está tudo ok.
bjs
Agosto 4th, 2007 at 5:20 am
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..!!!
Agosto 4th, 2007 at 7:22 am
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.
Agosto 4th, 2007 at 7:32 am
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?
Agosto 4th, 2007 at 7:50 am
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…
Agosto 4th, 2007 at 11:25 am
muito bom o tuto, isso ai é realmente uma coisa que bate.
Continuo a recomendando.rs
Bj
Certim.COM
Agosto 4th, 2007 at 11:37 am
Oi Guilherme. Obrigada. Bjos
Agosto 23rd, 2007 at 6:04 am
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.
Outubro 28th, 2007 at 11:09 am
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?
Outubro 28th, 2007 at 11:24 am
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.
Outubro 28th, 2007 at 11:29 am
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.
Outubro 28th, 2007 at 11:40 am
made warez, veja com a Erica (temas Bujiru), ela adpta temas do WP. Bjs.
Outubro 28th, 2007 at 5:49 pm
Claudya, te mandei 1 email =)
Outubro 28th, 2007 at 5:56 pm
Eu entrei em contato com a Erica ^^
Obrigado pela ajuda.
Outubro 29th, 2007 at 6:15 am
Made Warez, ok. Se puder ajudar de alguma forma, me fale. Bjs.
Novembro 9th, 2007 at 6:57 pm
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
Novembro 10th, 2007 at 8:27 am
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.
Abril 22nd, 2008 at 7:35 pm
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?
Abril 27th, 2008 at 2:14 am
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.
Maio 3rd, 2008 at 10:58 am
Renata, dá certo sim, revise o código, com calma e tente de novo! Pedro, obrigada, esse tutorial foi testado, e dá 100% certo.
Maio 6th, 2008 at 8:43 pm
caraca.. consegui nao … meu ajuda ae…
Maio 11th, 2008 at 4:41 pm
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…
Maio 22nd, 2008 at 8:39 pm
eu não consegui aumentar a coluna!! =(
será q alguém pode me ajudar !!!
Maio 26th, 2008 at 6:11 pm
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
Setembro 4th, 2008 at 1:16 pm
adicione o código em vermelho? kd o vermelho?
Setembro 11th, 2008 at 1:51 pm
burity, arrumei, o código em vermelho está aí.