Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

01 abril 2007

Alterar a aparência das colunas


Para fazer alterações de bordas e plano de fundo nas colunas do template, procure no código do mesmo:

#main-wrapper {
background-color:;
border: ;
margin-left: 0px;
width: 400px;
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 */
}

#sidebar-wrapper {
background-color:;
border: ;
margin-right: 0px;
width: 165px;
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 */
}

Acrescente as linhas em negrito, se já não existirem no seu código

Onde
#main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;

Em border você estabelecerá, como vimos anteriormente a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, é só colocar:

border-top: 1px solid #00000; (largura e cor somente como exemplos)
border-left: 1px solid #000000;

Assim a coluna terá borda somente no topo e na lateral esquerda. Se deseja borda em toda volta da coluna é só colocar:

border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)


Width estabelece a largura da coluna.



Artigos Relacionados

43 comentários:

Anônimo disse...

Pow cara,BRIGADÃO!
continua postando ae... ta me ajudando pra caramba...mas ae,olha meu blog: http://promosdelost.blogspot.com/ .
Como eu que eu mudo a cor da outra coluna ?! :P
Brigadão!

Anônimo disse...

Parabens pelo blog.
Vo troca meu templates, novamente, só que agora vai ser bem mais facil. Ainda mais com tuas dicas ;)

Crazypsico disse...

e para aumentar a quantidade de colunas

. disse...

Oi
Você sabe colocar barra de rolagem na coluna do meio(3 colunas) .

Obragada!
sue

Frank-RS disse...

E ai mestre, tu ninja mesmo, gostei do teu blog, to apreendendo bastante, pois to tentando encrementar o meu, to no começo mais um dia chego lá, abraço !!!

Letycia disse...

Olá... nossa, adorei seu blog... muito bom mesmo, ainda mais tendo essas dicas todas para o novo estilo do Blogger... adorei... o meu ainda está no clássico, pois não sabia como mexer direito no novo, mas agora, acho q vou conseguir!!!

tenha um ótimo final de semana!

Ariane disse...

Oi Letycia, obrigada! Fico muito contente de poder ajudar. Abraços!

Maria Luiza disse...

Oi, quero te parabenizar por este espaço nota 10!!!
Eu sou novata em blog mais o meu sonho era montar um personalizado p/ minha filhota Maria Luiza de 1 aninho e 4 meses... aqui achei um super fofo e vou coloca-lo como templaste p/ o blog dela... obrigada por dividir conosco tanto carinho e dedicação...

veja lá como está ficando o bloga da minha bonequinha e depois logo estarei modificando o meu tbm

www.babyrossmann.blospot.com

o meu: www.malurossmann.blogspot.com

Bjs e fique c/ Deus!!!

Rafael disse...

Primeiramente eu queria lhe parabenizar pelo blog que já me ajudou muito.
Dá uma olhada no meu blog aí por favor. Eu queria saber como que coloca borda na coluna que está à direita para "separa-la" da coluna do meio. Obrigado. http://total-downloads.blogspot.com/

Carol Carvalho disse...

Ola!Suas dicas são ótimas.
Mas tem umas coisinhas que não consigo fazer!
Eu não consigo encontrar imagens na web pra postar,não consigo encontrar nenhuma imagem para fazer o meu Link-me...
Se puder me ajudar!
Sei la alguns endereços onde possa encontrar imagens para postar no blog!!Gratis de Preferencia rsrsr
desde ja agradeço!!!!
Até mais!!!!!
http://carolight.blogspot.com

CRIS disse...

oi gostaria de mudar o pçano de fundo do meu blogspot mas não tem ido muito resultado .se poder me ajudar agradeço desde já

CRIS disse...

oi gostaria de uma ajuda no plano de fundo do meu blogspot que estou querendo mudar e não consigo obrigada desde já agradeço...

Downage disse...

velho eu sou o adm do downage, mas o meu template n tem a tag main-wrapper e sidebar-wrapper

Andréa "R" disse...

Olá Ariane!
Eu li teus desabafos(como vc diz)e li tbm vários tutoriais teus já e achei muito interessantes e estão me ajudando muito,eu sou mais que novata em questão de bolgs mais com a tua preciosa ajuda estou começando a entender um pouquinho disso(do HTML),que é pra mim um bicho de 7 cabeças mais um dia eu chego lá!!!
Eu estou aqui para te agradecer pela ajuda,pelas dicas e por tudo que vc ensina incondicionalmente.
Eu fiz um blog pra mim e usei um dos teus templantes e ficou MARAVILHOSO,porem eu dei um toquezinho pessoal nele e gostaria que vc quando tivesse um tempinho viesse me fazer uma visitinha,meu blog ainda é um bebezinho ou seja é um começo de blog mais tenho intenções faze-lo prosperar. :-)
O end.dele é: http://raiodesolelua.blogspot.com/
Espero que goste e não fique chateada comigo pelo meu toque pessoal que dei nele!
Um dia ainda venho te chamar para ver o blog que ei de fazer sozinha,depois de tantas dicas que vc dá acho que serei capaz disso.
Um abração bem grande pra vc minha professora! :-)

Anônimo disse...

Oi, Ariane, você sabe como deixar o fundo das colunas transparentes?Coloridas,mas transparentes?
Obrigada.bJs

Ariane disse...

Ella, use este código:

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

UNIK GYMDANCE disse...

Bom dia..
Tenho organizado meu blogger por este meio, e de agradeço, pois sem este não seria possível uma vez que sou realmente muito leiga no assunto.
Tenho uma dúvida no meu blogger não consigo fazer um alinhamento central do titulo do texto como fazer?
http://unikdance.blogspot.com/

Ariane disse...

UNIK, procura por :
.post h3 {
margin:.25em 0 0;
e altera o valor de margin para:
margin: 0 auto 0;
vê se dá certo e me conta, abraços!

Rodrigo disse...

Oiiii, eu quero colocar um widget, com aqueles numeros "1, 2, 3..." na verdade são 3 widgets em um...


entende né?

Ariane disse...

Rodrigo, não, não entendí :-(

Andre Freitas disse...

Ola antes de tudo gostaria de parabenizar pelo blog, eu sou novo nisso e estou tentando aprender,consegui colocar a nova coluna mas eu gostaria de saber como coloca-la do lado esquerdo desde ja agradeço ate mais

Produtos Importados Da Europa® disse...

Boa tarde,

gostaria de saber como faço pra eliminar uma coluno do meu Blog, e deixa uma sò + larga, pq dessa maneira com 2 colunas, as palavras saem fora do espaço!

Na espera de uma resposta agradeço desde já.

Lazaro Splesci
E-mail:

Ariane disse...

Produtos Importados, o template q vc usa é todo com imagens, qualquer alteração irá desfigurá-lo todo. Recomendo um outro template mais fácil de manipular, ok? Abraços

Anônimo disse...

Bem, Estou tendo um pequeno problema com as colunas.
Eu coloquei + 1 coluna.
Coloquei o espaço como você disse em outro post.
Só que os cantos Redondos das Colunas não ficaram certo, Correspondendo a ordem.
Nesta Imagem diz tudo:
http://xs434.xs.to/xs434/08492/arrumar574.jpg
Se puder dar uma olhadinha rápida para entender a situação e me dar essa forcinha, Grato.

Ahhhh tem uns links no seu Menu que estão repetidos ;D

Anônimo disse...

Fiz em um blog de teste e usei uma Template minima do blogger eu coloco esse codigo como mostra ai as cores não mudam ficam na mesma eu coloquei o fundo lilás editando em "cores e fontes" e as colunas no html eu coloquei brancas insirindo o codigo da cor branca "#FFFFFF" do jeito que mostra aqui e as cores das colunas não mudaram será que tem como você verificar pra mim? Se sim fico agradecido esse é o link do blogue de teste esta do mesmo jeito que editei por favor pode ver se fiz algo errado agradeço desde já...

http://estetesteeete.blogspot.com/

Anônimo disse...

Desculpa Ariane mas eu mesmo olhando melhor, quer dizer insistindo em consiguir descobrir meu erro eu obtive sucesso eu estava esquecendo de colocar no final do codigo da cor #FFFFFF; << rs! estava colocando assim >> #FFFFFF <<< hahahaha!!! valeu pelos tuto que vem me ajudando muito desculpa ter colocado dois comentários é que quiz avisar antes que você responda sem precisão abraços....

Filipe Brás disse...

Boas Ariane!
Como posso dar menos espaçamento entre por exemplo os links uteis e o Recomendo, fica quase dois dedos de distancia na coluna lateral e só queria por exemplo um dedo! é que assim fico com uma coluna lateral muito extensa devido ao espaçamento exagerado!

Ariane disse...

Filipe, vc pode aumentar a largura da sidebar ou aumentar a largura do main. pode ainda dar margen aos dois: uma margem à esquerda para main e uma a direita para sidebar, de uns 8px, ai elas se juntam.

Filipe Brás disse...

epode me explicar como fazer isso no codigo HTML?
obrigado

Eduarda disse...

olá! O seu blog é muito útil porque ajuda imenso quem não percebe nada de htmls e assim...
Eu tou a ver este post sobre largura, mas não encontrei do comprimento da coluna. Como a gente altera o comprimento(altura) da coluna?

Desde já obrigada pela sua atenção.

H K Merton disse...

OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO, OBRIGADO!..

=D

Ariane disse...

de nada, de nada, de nada, de nada.... :D

Miguel disse...

Olá. Tenho seguido por algum tempo este blog que me tem sido muito útil.

No entanto, estou com um problema no meu blog. A Coluna principal "corta" um pouco os vídeos que ponho do Youtube.

Como não posso colocar a morada do blog para que visualisem, como me poderão ajudar?

Laerte Vasques disse...

Olá Ariane.
Criei uma coluna do Lado esquerdo.
Como coloco a coluna branca por dentro?

Ariane disse...

Laerte, em qual dos seus blogs vc colocou?

Nick disse...

Parabéns pelo blog!
Eu só tenho uma dúvida.....
Como eu faço para deixar redonda aquela linha que tem em blogs?
Visita o meu blog: http://nickcine.blogspot.com
Se vc souber manda um e-mail pra mim?!
nickkodda@hotmail.com

Anônimo disse...

Obrigado pela dica!
Gostei bastante...
Agora já sei como alterar algumas coisas.

vitor moutte disse...

estou tentando montar uma coluna apenas no blog.. mas na parte de baixo ainda aparece o background. onde mudo isso?

obrigado, parabens pelo blog.

comenta em m-u-v.blogspot.com ou me add vimcf@hotmail.com

:*

Renan disse...

Muuuito bom seu blog \o/

ajuda demais

Filipe disse...
Este comentário foi removido pelo autor.
rick disse...

Olá!
Queria saber como fasso para quando o mouse passa em cima de algum icone, banner etc, acender uma luz branca em cima do objeto que a seta está obr!
Meu blog: www.timedosdownloads.blogspot.com

scharlott disse...

Oi Ari, sou a Scharlott.
Tenho uma duvida e acho que só você pode me ajudar.
Já procurei pela internet mas não achei nada que explicasse bem...
Quero que as colunas do meu blog fiquem semi-transparentes entende?

Meu msn é scharlott_russel@hotmail.com
Venho acompanhando seu blog a algum tempo e já me ajudou bastante.
Parabens e sucesso!
Abraços

Anônimo disse...

Oi, sou bruno e gostaria de tirar a duvida?
no meu template nao tem o width do mainwrapper não. eu quero diminuir um pouco o tamanho da coluna mas, não consigo. no meu tenplate é assim:
#main-wrapper {overflow:hidden;}

.clear {clear:both;}

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {text-align: center; }

e agoa como faço pra diminuir o tamanho dela.

o meu blog caso voce queira visualizar pra saber do que eu falando é: http://hiperfastdownload.blogspot.com ////

será que eu vou ter que escolher qualquer um padrão e depois vir musando ele aos poucos?

desde já gratp pela atenção