sábado, 9 de abril de 2011

Como aumentar ou diminuir o tamanho da área de postagem do blog

Aumentando área de postagem no blogger

Deixe o espaço de seu conteúdo do tamanho desejado com este pequeno tutorial. Mas além de mostrar como aumentar o tamanho da área de postagem, você aprenderá também a aumentar e diminuir outras áreas, como a sidebar (coluna) e a folha da página (coluna principal). Tudo em 1 só tutorial =]

Primeiramente, já logado no blogger, vá em “Design” – “Editar HTML” e procure pelo trecho mais abaixo. Caso o código CSS não esteja na seguência como você vê, procure por pedaços, primeiro #outer-wrapper {…} , segundo #main-wrapper {…} e por útimo o trecho #sidebar-wrapper {…}.
Obs – os 3 pontinhos nas chaves significa os códigos CSS contido dentro do mesmo conforme os trechos abaixo.

#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 */
}

Como você pode perceber, todos os trechos possuem o código WIDTH, que está destacado, e cuja função é determinar a lagura em px.

O trecho de #outer-wrapper {…} é a ID da folha da página.

O trecho  #main-wrapper {…} é a ID da coluna principal do blog, onde localiza-se a área do post.

O trecho #sidebar-wrapper {…} é a ID da coluna lateral do blog.

Tome muito cuidado ao alterar os tamanhos, recomendo que aumente os mesmo tamanho para cada um deles. Por exemplo, se você colocar mais 50px no valor de WIDTH do tamanho da folha da página (#outer-wrapper) coloque mais 50px nos demais trechos também.

Ou se preferir, não altere o tamanho da folha da página, apenas altere o tamanho da coluna principal (#main-wrapper) para um tamanho maior e diminua o tamanho da coluna lateral (#sidebar-wrapper) com as mesma quantidade de pixels da coluna principal.

Por exemplo.

#main-wrapper {
margin-left: 5px;
width: 600px;           /* AQUI EU ACRESCENTEI 50px*/
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: 200px;         /* AQUI EU RETIREI 50px*/
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 */
}

Depois de fazer as alterações, salve o modelo.

Espero que tenha intendido, mas se tiver dúvidas, deixe um comentário.

Marcadores: , , ,

36 Comentários:

Às 16 de junho de 2011 23:21 , Blogger Enzo Penharbel disse...

Olá meu blog não possui essas tags o que devo fazer?
OBS; Meu template é o Red White Web 2.0

 
Às 17 de junho de 2011 11:43 , Blogger Códigos Blogger disse...

Qual o endereço do seu blog?

 
Às 18 de junho de 2011 21:47 , Blogger Enzo Penharbel disse...

Então...
Agora o blog está com o template diferente,mas o endereço do blog é www.memeking.blogspot.com ,fiz apenas uma tirinha (o blog vai ser tirinhas com memes..) para teste,e queria ajustar a sidebar dentro da tirinha,a tirinha só pode ficar em ''tamanho original'' se não fica pequena para não ter que salvar no site que eu faço e depois passar para o paint...
Será que poderia ajudar?

 
Às 2 de agosto de 2011 15:48 , Blogger Admin disse...

Boa tarde, sou novata aqui e to precisando muito da ajuda de vc que é experiente no assunto, eu tenho um site de downloads Tudo Gospel Downloads eu tava mechendo no html e eskeci de salvar antes --' ai quando fui ver a 1ª postagem ficou muito separada da 2ª postagem, sendo que da 2ª postagem em diante o espaçamento esta normal. Ja fucei demais meu html mais nao consigo axar essa brecha alguem poderia me dar uma brecha do que pode ter ocasionado isso?

Outra coisa fui tenta pega um layout salvo anterior quando coloquei esses espaçamento continuou --' alguem me ajudaaaaaaa?

http://www.tudogospeldownloads.com/

meu template é todo HTML .XML

 
Às 4 de agosto de 2011 00:17 , Blogger Códigos Blogger disse...

No seu HTML Tem um trecho que começa assim:

<ins style="display:inline-table;

Pesquise por esse trecho, e em seguida selecione de "<ins" até fechar o código, no caso até o segundo "</ins>"

Exclua essa parte e veja.

 
Às 13 de agosto de 2011 20:23 , Blogger Irismar Oliveira disse...

Amiga preciosas dicas, me ajudou muito pois troquei o templaste e quando fui ver estava cortando a postagem e buscando na net ajuda as tuas dica forma muito boa.

valeu

UM bom FDS

 
Às 12 de setembro de 2011 22:53 , Blogger Leonardo Marioto disse...

Olá, meu blog é o seguinte: http://lmarioto.blogspot.com/

Eu gostaria de aumentar a área de psotagem. Como voce pode ver, eu consegui aumentar a área do post, porém fica uma parte em branco, e eu queria que o texto fosse aumentado tambem, e ocupasse esta parte que está em branco. Aumentando o tamanho das frases na tela. Tem como fazer isto ?

Desde já agradeço.

 
Às 13 de setembro de 2011 15:14 , Blogger Códigos Blogger disse...

@Leonardo Marioto Pelo o que eu vi aqui, a postagem não apresenta nenhum espaço branco a não se a pequena margin que não vejo problema nenhum. Você já consertou?

 
Às 21 de setembro de 2011 07:13 , Blogger Ricardo Pereira disse...

Obrigado pelas dicas
Finalmente consegui editar.
www.mestrefinanceiro.com

 
Às 28 de setembro de 2011 14:46 , Blogger Pimenta Biquinho - Adriana disse...

A Pagina de postagens do meu blog esta minuscula, o que eu faço hein, não pra ver nada por lá!!??Help me please!!!!!!!

 
Às 29 de setembro de 2011 10:07 , Blogger Códigos Blogger disse...

@Pimenta Biquinho - Adriana Entrei mo seu blog e não vi problema nenhum. Pode ser mais específica?

 
Às 4 de outubro de 2011 18:58 , Blogger MAURICIO disse...

Boa noite,

Como eu faço para chegar o rodapé do blog mais próximo da postagem.

ver blog. calopsitar.com.br.

Muito obrigado,

 
Às 4 de outubro de 2011 20:37 , Blogger Códigos Blogger disse...

@MAURICIO Olá Maurício, tudo bem? Você poderia ser mais específico?

 
Às 27 de outubro de 2011 10:59 , Blogger MAURICIO disse...

Bom dia!

Vou tentar ser.

Quando uma pessoa vai ler uma postagem do meu blog, o item POSTAR COMENTARIO, fica muito distante dos itens: POSTAGEM MAIS RECENTE, ÍNICIO E POSTAGEM MAIS ANTIGA. Eu queria diminuir este espaço.
Se você entrar no meu blog (www.calopsitar.com.br) e pedir para ler uma postagem voce vai observar a distancia.
Desde já agradeo.

mauricio
www.mauricioluiz@globo.com

 
Às 27 de outubro de 2011 11:08 , Blogger MAURICIO disse...

Bom dia!

Vou tentar ser.

Quando uma pessoa vai ler uma postagem do meu blog, o item POSTAR COMENTARIO, fica muito distante dos itens: POSTAGEM MAIS RECENTE, ÍNICIO E POSTAGEM MAIS ANTIGA. Eu queria diminuir este espaço.
Se você entrar no meu blog (www.calopsitar.com.br) e pedir para ler uma postagem voce vai observar a distancia.
Desde já agradeo.

mauricio
www.mauricioluiz@globo.com

 
Às 5 de novembro de 2011 16:55 , Blogger Eterna Graça disse...

Não localizei esses códigos em meu blog. Uso um modelo simples, com 3 colunas.
Em outro blog até encontrei como aumentar os espaços da coluna do meio (área de postagem), mas não conseguir reduzir na primeira coluna, com isso alguns gadgets ficaram em cima da postagem (alguns gadgets foi possível reduzir a margem, mas em outros não teve jeito).
Na coluna de direita não consegui fazer nada.

 
Às 21 de novembro de 2011 15:03 , Blogger Richelle Castro ∞ disse...

Olá quero que vocês me tirem uma dúvida, bom, eu coloquei o código #outer-wrapper { em cima de ]] > e o div dele eu coloquei embaixo de < / head > o mas não está funcionando! Qual é o certo a fazer?

Obs.: as tags aqui eu coloquei espaços porque quando eu coloco certinho dá erro.

 
Às 22 de novembro de 2011 08:27 , Blogger Códigos Blogger disse...

Mas as tags já devem estar em seu HTML, é só procurar apertando CTRL + F e fazer as modificações.

 
Às 21 de dezembro de 2011 10:10 , Blogger geovany disse...

eu não consigo diminuir a parte da postagem eu coloco no main 500 ou 530 mais nunca pega ajuda ae pf

 
Às 21 de dezembro de 2011 10:18 , Blogger geovany disse...

meu blog esses aki de http://tiste01lol.blogspot.com é um blog de teste para o meu blog oficial Magnatas Revolutionary

 
Às 22 de dezembro de 2011 08:49 , Blogger Códigos Blogger disse...

Geovany, você tem que alterar o valor de width. O valor deve ser em pixels. Exemplo:

width: 500px;

 
Às 26 de dezembro de 2011 21:46 , Blogger Matheus disse...

Por favor me ajude.
faz +ou- um mes que fiz meu blog e nele eu posto videos so que o tamanho do video fica passando da area de postagem , eu ja diminui o video so que ainda nao coube e eu nao quero que ele fique muito pequeno, ai vem minha pergunta como eu aumento o tamanho da area de postagem ? , eu ja tentei do jeito que vc explicou so que nao achei nenhum desse codigos no html , o que eu faço ? por favor me ajude , desde ja agradeço

 
Às 8 de janeiro de 2012 19:29 , Blogger ♠ Jão Bless ♠ disse...

Não Encontro Tutoriais Para Fazer Isso no WordPress =/
Preciso Alterar as Larguras da Área de Post e Sidebar Num Template que era do WordPress e Foi Convertido Para Blogger!
Os códigos aparentemente são do WordPress pois nunca vi códigos tão diferentes em um template!

 
Às 30 de agosto de 2012 19:24 , Blogger Rogerio Correa disse...

ola, muito bom o tutorial, mas não consegui ajustar o tamanho das paginas que crio no blog, as postagens ficam normais, mas quando vou clicar na pagina que criei dentro do blog mesmo, ela simplesmente não aparece completa. tipo, não consigo visualizar nenhuma das páginas internas criada no blog, podes me ajudar?

como estou editando o blog, ele está em particular somente para autores, se vc puder me ajudar posso liberar pra vc ver, aguardo se contato!

 
Às 14 de novembro de 2012 15:21 , Blogger RUBENS SCAPONE disse...

Este comentário foi removido pelo autor.

 
Às 14 de novembro de 2012 15:25 , Blogger RUBENS SCAPONE disse...

Olá, meu blog tem uma distância muito grande entre as postagens, gostaria de saber como reorganizá-los, ja tentei de tudo mas continua a mesma coisa, se puder da uma olhada lá para ver o desastre http://scapone.blogspot.com.br/, por favor se puder ajudar deixo desde já meus agradecimentos!

 
Às 7 de janeiro de 2013 21:41 , Blogger Girls x BoysTeen disse...

o meu nao tem nenhum desses codigos:x me ajuda pelo amor de Deus paguei um menino para fazer meu tema ele cagou nele :/

 
Às 8 de junho de 2013 21:07 , Blogger @WillCenter disse...

Gostei da matéria, ampliei meu campo da postagem, porém, o campo aumentou mas a postagem continua como antes, ela ficou centralizada, não se adequou ao novo tamanho, as imagens ainda ficam cortadas e tals =/

ex: http://www.planetaon.net/2013/06/do-brasil-para-o-mundo-conheca-p9.html

Abraços!! Se tiver a solução, tente me avisar pelo twitter: www.twitter.com/willcenter ou algum contato do site. Bjs >.>

 
Às 1 de novembro de 2013 11:39 , Blogger Milton Kennedy disse...

Cara, parabéns pelas dicas, mas eu gostaria de saber como acrescentar (automaticamente) uma quebra de linha após o título da postagem, ou seja, saltar uma linha depois do título. Fazer isto manualmente levará um tempão.
Desde já obrigado.

 
Às 7 de novembro de 2013 12:30 , Blogger Robson Morais disse...

Boa tarde!!
Eu tambem tenho um blog e gostaria de mais sugestoes pois estou apenas ncomecando.
Este e meu link:
www.rm2comunicacao.blogspot.com
valeu!!!

 
Às 11 de novembro de 2013 13:06 , Blogger Pedro Vytor disse...

Como aumentar o número de postagem na primeira página do blogger???
já fui em configurações aumentei número, e não passa de 11 postagens...

Por favor!!!!

site: www.vytordownloads.com

 
Às 12 de novembro de 2013 17:09 , Blogger Andre Nascimento disse...

o meu template e warmmag e queria deixa as imagens menores

 
Às 11 de dezembro de 2013 16:00 , Blogger Marcelo Augusto disse...

Obrigado,me ajudou muito,mais ainda tenho muito trabalho pra fazer no meu site

 
Às 6 de abril de 2014 11:15 , Blogger Murilo Pedroza disse...

No meu caso é o contrário , estou criando um template no dreamweaver e gostaria de saber como adicionar esta área de postagem , será que vocês poderiam me ajudar ?

 
Às 13 de junho de 2015 00:06 , Blogger Glemerson vieira santo disse...

ola amigo td? então queri saber se alem da largura sera que da diminuir a altura?
desdeja agradeço!
meu blog http://www.foxfilmesrmvb.com/

 
Às 6 de janeiro de 2016 11:19 , Blogger Fabio Rodrigues disse...

Olá,

Recentemente eu instalei um template em meu blog, mas to com uma dificuldade, o tamanho do banner não me agrada eu queria poder aumentar a altura, mas não sei como fazer.
Obrigado.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial