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).

25 abril 2007

Aumentar largura das colunas

Para aumentar a largura das colunas do template:

Procure no código:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}

#main-wrapper {
margin-left: 5px;
width: 550px;
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 {
margin-right: 0px;
width: 250px;
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 */
}


Tudo o que está contido em #main-wrapper se refere à coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

Tudo o que está contido em #sidebar-wrapper se refere a coluna do perfil. Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template: obedeça a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.

Atenção!

Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....

Artigos Relacionados

57 comentários:

Helena disse...

ola amiga

vim te perguntar

se depois vc me dá um dica como consertar o problema em meu blog?

meu msn helena.s-gv@hotmail.com

serve tabem como i-mail

Anônimo disse...

Oi Ariane, sou o Junior do Blog do JUNIORBOYROCK, eu te add no msn, aceite-me por favor.
Abraço!

Anônimo disse...

Olá,

Seu blog está entre os mais acessados no Rank do BlogGeral! Parabéns!

Divulgue o BlogGeral. Nós divulgamos você.
Pegue nosso selo e veja como é fácil.

Abraços!
Sucesso.

Deleite Crônico disse...

opa,amigo peguei um template aq do seu blog, ta quase perfeito consegui arrumar boa parte da forma que eu queria, porem só não consigo mudar o cor do plano de fundo,no fontes e cores aparece como branca mas a cor na verdade é outra,por lá consegui alterar todas as cores menos essa,se puder ajudar...



Valeu




http://deleitecronico.blogspot.com/

Bustamante disse...

ola!
nossa seu blog tá me ajudando mto.. parabéns..
mas vc sabe como faço pra adicionar mais uma coluna(fikar com 3) no blog?
se souber.. poderia me dizer??
abraço

Mauro disse...

eu tava precisando mesmo destas dicas, minhas propagandas estavam ficando pela metade devido a pagina estar "muito fina", você não imagina como eu estou contente.

Dica: o ideal é ir visualizando para ver quando ficou bom e só depois salvar.

Tom disse...

Ei muito show o seu blog, parabens eu peguei um dos modelos que vc deixou pra download e fiz algumas alterações mais deixei os creditos como vc pediu, mais uma fez obrigado e continue assim, se possivel dá uma olhada lá pra ver como ficou.
http://nossoslances.blogspot.com/

Bruna disse...

oi!! peguei o template de rosas e queria saber porque que meu texto nao cabe em uma das caixinhas..é a descrição do blog! vai em brublogando.blogger.com.br e dá uma olhadinha..ai vc pode, por genteliza, responder essa duvida para brudoloco@gmail.com
bjs e brigadaa

Ariane disse...

brubru, o template em sí não tem nenhum problema, testei ele aqui, repetindo a descrição varias vezes para exemplificar: http://asdeespadas.blogspot.com/

No entanto, olhei o codigo fonte do seu blog e o template foi alterado com erros. Uma nova coluna foi inserida, mas não houve alteração da largura total do template (Outer-wrapper) o que desfigurou todo o blog.

Anônimo disse...

oi
portanto nós não podemos modificar a largura do outer-wrapper?
como posso deixar espaço entre a coluna main e sidebar? (apenas um espaço em branco para os posts não ficarem colados ao que está na sidebar?

obgdo

Ariane disse...

choppy, claro que vc pode alterar a largura da outer-wrapper, o ideal é que sempre fique tudo proporcional. Para aumentar a distância entre as colunas vc tem que alterar margin. Se a coluna está à direita da main, por exemplo, coloque em main margin-right: 10px, por exemplo. Vai modificando os valores e visualizando até ficar bom

Larissa Hardt disse...

Oi! Tentei aumentar a largura da coluna principal do meu blog, mas não deu certo. O máximo era 700px, e o original era 428px. Mudei para 560px, vizualizei e não deu certo. Tentei de novo e não deu. Fiquei com medo de salvar e estragar o blog todo. Sou completamente dummie no assunto... Tem como vc me dar um help? Meu blog é http://sohardt.blogspot.com

Valeu.

Larissa

Ariane disse...

larissa, vc precisa aumentar a largura da outer-wrapper primeiro, que no seu template é de 700px. Deixa maior e depois aumente as colunas dentro desta dimensão

Larissa Hardt disse...

Brigada, Ariane. Agora deu certo. Falta só eu arrumar a foto que ficou pequena. Se eu não conseguir, vou te aporrinhar de foto, pode? Brigada de novo. Bjs, Larissa

benelli disse...

OI olha estas ajudar bastante mas estou com problema nao consigo encontrar a opçao dos marcadores é que eu queria pro uns marcadores e nao consigo...

Tecalex disse...

Olá Ariane, posso te incomodar mais uma vez? Será que vc pode me explicar como proceder para saber quantas vezes um link da minha página foi clicado( Quantos hits teve aquele determinado link) . Se possível te agradeço mais uma vez pelo carinho, caso contrario te agradeço pela atenção que tem dado a todos.

Ariane disse...

benelli, fiz um post inspirada na sua questão


alex, incomodo nenhum, seu eu puder ajudar, por que não? Eu gosto muito do Google Analytics, é uma excelente maneira de controlar links.

Gabriel disse...

Bom post, e vou deixar aqui uma sugestão,já que também não sei como fazer isso hehe. Uma coisa que várias pessoas que conheço que usam o blogger querem saber: Como aumentar a distância entre os posts

Helfenstein disse...

Reforço a dúvida acima....

Você saberia como gaço para aumentar a distância entre os posts?

Michel Santana disse...

Olá, estou com um pequeno problema no meu blog. Acabei de colocar um template Secret nele e quero tentar diminuir a coluna da esquerda dele. Eu ja ate diminui a main, porém só consigo estreitar as palavras, a coluna nao vai.

Voce pode me ajudar??

Ariane disse...

Michel, o template Secret é uma imagem só, não tem como alterar.

sergio glenes disse...

Olá...
fiz uma alteração na coluna dos posts no meu blog. Acontece que eu também queria que as imagens postadas acompanhassem a largura da coluna... é possível?
Agradeço desde já a dica.

Ariane disse...

Sergio, para isso vc precisa aumentar o tamanho das imagens qdo posta, seja na opção do Blogger, seja direto no código da imagem.

Filipe Brás disse...

Podes me explicar como posso aumentar a largura e altura das imagens/fotos, já aumentei as colunas e pus as fotos na opção "grande" mas mesmo assim queria maior, como posso fazer???

Ariane disse...

Filipe, clicando na imagem vc pode arrastar os cantos e aumentar ou então clicar em Modo HTML e colocar as dimensões que deseja dentro do código da imagem, em style, como mostro abaixo, em negrito:
style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;width: 500px; height: 400px;"

os valores são só um exemplo, vc coloca o tamanho que quiser.

Filipe Brás disse...

Pois, o problema é que no HTML eu não encontro nenhum codigo igual a esse, já fiz procurar, control + F, e pus cursor, pointer, e não encontra nada, e mesmo procurei de cima a baixo e nada!
e aumentando a imagem nos cantos ela fica distorcida!
diz qq coisa e obrigado!

Filipe Brás disse...

Boas ariane não encontro esse código html!

só encontro isto:
.post img {
margin:0 0 5px 0;
padding:4px;
border:0px solid #556677;

e olha que já procurei bem!

baladeiro disse...

teu blog tá massa cara, tá me ajudando muito...
valew e sucesso!!!!

Cleisson disse...

Eu posso aumentar o tamanho no outer-wrapper vc acha que vai ficar legal. Eu acho minha templete muito pequena 700px total.
seu blog e o melhor que conhece de apoio a blogueiros.
obrigado.
vlw
meu imail é hcfonseca007@gmail.com

AGITA RESPLENDOR disse...

PARABÉNS MUITO BOM SEU BLOG!

Hêider M. Sousa disse...

Oi, estou com um sério problema. Acontece que: quando eu publico algo, o blog fica como se "comesse" o post, como se tivesse ultrapassado a linha de parágrafo, então o texto fica cortado...alguma dica?

Ariane disse...

Sr.Menezes, no Firefox eu vejo seu blog normal

Ariane disse...

Cleisson, pode aumentar sim; qto ao q fica melhor, depende da quantidade de colunas, widgets, etc. abraço

Matheus Cesco disse...

Ola Me Add No Msn Ai Vc ME Ajuda Eu Nao INtendi Nada AHUhuauha
MAlz

Vanderhugo disse...

Preciso da sua ajuda...
sou um analfabeto nesses assuntos e queria que as colunas do meu blog fossem mais largas. Gostaria da sua sugestão, tipow:
meu blog:(to criando:) www.vanderhugo.blogspot.com
modelo que eu gostaria de seguir (em termos de largura: www.blogisolda.blogspot.com

seria pedir muito, se vc puder dar uma olhadinha nos dois e me orientar?
Obrigado!

Ariane disse...

Vander, este template q vc está usando não é aconselhavel mudar, pois as colunas são feitas com imagens e se alterar fica deformado. Se quer colunas bem largas, sugiro o template Mínima.

Tirinhas Mr. Lag disse...

Olá

Gostei dessa dica

Obrigado

Fernanda Bastos Bijoux disse...

Ariane,

Tudo bem? Segui suas instruções para aumentar as colunas do meu blog (fernandabastos.com) mas a imagem não acompanha o aumento das colunas. Você poderia dar uma olhada e me sugerir o que eu posso fazer?

Muito Obrigada!

Augusto disse...

Valeu, me quebrou um galho, muito bom post!

MOISESALBA disse...

ola,tenho um blog tambem (moisesalba.blogspot)e comecei a gostar agora de mexer na aparencia dele e descobri muita gente legal passando muita dica, quase uma faculdade online, isto é bom, pois muita gente não tem tempo e din-din para poder curtir isto aqui, teu blog é muito legal, informações preciosas e de forma simples, vou seguir teu blog e coloca-lo no meu como link ou baner, vi que alguem perguntou se da para passar de duas para tres colunas, o meu é o minima que é com duas, ser for possivel e poderes colocar a dica como fazer em um post vai facilitar para muitos que gostariam de poder mudar sem mudar o template.
PARABENS PELO SEU TRABALHO OU HOB, GRANDE ABRAÇO.(moisesalba@gmail.com)

Vanderhugo disse...

Valeu, Ariane...
Obrigado!!!

Nuno de Mattos Capeletti disse...

Olá. Primeiro tenho a obrigação de dizer que este blog é pra lá de informativo, sem falar na sua utilidade.

Mas queria perguntar se os modelos de blog disponibilizados pelo blogger tem um tamanho de outer-wrapper máximo? porque escolhi o tema "" e,como ele é arredondado nos cantos, quando aumento suas larguras ele fica com a borda reta e com a marca da borda arredondada original no meio da barra, como se houvesse um corte.

abraço

Nuno de Mattos Capeletti disse...

ah, esqueci de uma coisa, o texto também não acompanha a largura, ou seja, a coluna fica maior mas o texto fica na largura original.

Thallys Gomes disse...

Olá Ariane!
Gostaria de agradecer a você!

Graças ao seu blog e à sua ajuda consegui me aperfeiçoar bastante e transformar um blog porcaria (no caso o meu) em um bom!!!

Muito obrigado!!!

Ah! E não deixe de postar mais e mais dicas aqui!

Toda vez que vou fazer alguma alteração no código do meu blog eu passo aqui primeiro!!!

Brigadão!!!

Unknown disse...

Muito obrigado pela dica. Seu blog é demais! Tá ajudando muito!!
O cabeçalho do meu estava "engolindo" os marcadores auehahea

THANX

alds.huxley disse...

muito boa a sua explicação !!!

Kelvin Pinho disse...

como diminuir a coluna do post selecionado, eu consegui na pagina inicial, mas se clico pra ver somente o post ele fica grande demais!

Envie-me uma reposta para: suporte_webmaster@msn.com

Grato.

F.Veronezi disse...

O unico Blog que realmente me ajudou, milhoes de obrigados mesmo

**TopGang** disse...

Oii ,eu baixei um template aki do seu blog que se xama (template blue)eu axei ele muito bonito e queria usar ele em meu blog so que ao colocar ele no meu blog eu persebi que a coluna do meio é muito grande ,e vendo ese post seu pensei que conseguiria diminuir o tamanho da colona mais eu nao consegui =( .eu queria sabe se voce poderia me ajudar ??se voce quiser me add no msn topgang_cs@hotmail.com ok xauuu....

Anônimo disse...

Nossa, muito obrigada. Aumentei só um pouco no blog e ficou perfect!

Beijos

Anônimo disse...

Eu sempre quis aumentar a coluna de postagem do meu blog, mais nunca conseguia! vc explicou direitinho vlw mesmo!

PAULO VALIENGO disse...

Oi Ariane.
Queria te agradecer pela dica de como colocar 3 colunas no blog.
Segui o seu "mapa da mina" e deu tudo certo.
Valeu mesmo!
Um grande abraço e muito obrigado.
Paulo.
paulovaliengocomunicacao.blogspot.com

Anônimo disse...

Show de bola, me ajudou muito com o meu blog.
Obrigado Ariane!

Marcelo Souza disse...

Ariane, fiz mudanças na largura do blog, mas não foram aplicadas quando abro no Explorer. Queria saber como mudar isso!!!Você poderia ajudar a fazer as aplicações tbm no explorer???
http://sosvip.blogspot.com/
Olha a diferença no firefox e explorer.

Ariane disse...

Marcelo Souza, este template que vc está usando tem hacks para o Internet Explore e vc precisa retirar eles. No caso, o principal é na medida de main-wrapper e está assim:

#main-wrapper {
margin-left: 8px;
margin-top: 20px;
width: 700px;
_width: 490px;

apague o que está em negrito. Tudo o que é precedido de underline é código interpretado apenas pelo Internet Explore, ok?

SpecTrading disse...

Ajuda?? Estou montando um blog porem quando mudei o layou dele os videos do youtube nao aparecem mais na pagina principal, e se eu quizer ver o video tenho que entrar no post, mas no template simples era possivel acessar o video da pag. principal, sem entrar no post, eu acho que pode ser configuração do tamanho do post que aparece na pag. principal ou coisa do tipo, sera que podem me ajudar?? Grato

Ariane disse...

SpecTrading isso acontece por que o seu template tem resumo automático de postagem e os vídeos só podem ser vistos no post completo.