Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Iniciantes Postagens Vanessa S.

Personalizar Área total de Postagem (main)

Este é mais um post da serie sobre Variaveis CSS e os Elementos do Blogger para iniciantes.
Aqui vamos falar sobre a variavel “main” , que corresponde coluna da área total de postagem do blog.
Nos templates minima e na maioria dos templates modificados,este trecho está representado pela seguinte variavel:

 
#main-wrapper { 

Já nos templates Designer de Modelo,este trecho está representado por:

 
.main-outer { 

Nos templates Designer de modelo, existe a coluna central da área de postagem, que está representada pela variável

.main-inner 

Dependendo do modelo este trecho poderá estar assim:

.main-inner .column-center-inner 

Visualize a imagem abaixo para entender melhor qual área corresponde à coluna da área total de postagem do blog e a coluna central da área dos posts.

((Clique na imagem para ampliá-la))

A coluna da área total de postagem na imagem acima está personalizada com a cor amarela.
A coluna central da área total de postagem está personalizada na cor azul.

Alterar o tamanho da coluna na área total de postagem

Em .main-inner, (trecho em azul na imagem acima) você pode alterar o tamanho da coluna de post, aumentando ou diminuindo a largura desta coluna, e para isso você deve alterar os valores que estão em “width” (= largura).
Se você aumentar a largura da coluna central na área total de postagem, você deve observar qual a largura que está estipulada em #main-wrapper (ou .main-outer) e deve ajustá-las.Ou seja, você deve verificar qual a largura estipulada na coluna da área total de postagem do blog. Caso contrário seu template pode ficar com uma aparência desconfigurada e em alguns casos, a coluna da sidebar acaba indo parar abaixo da coluna de postagens. Portanto, sempre verifique os valores de width e ajuste-os de modo que a soma total das larguras das colunas não ultrapassem o valor estabelecido para largura.

 

Colocar fundo (background) na coluna da área total de postagem

Se você quiser, você pode colocar um background (fundo)na coluna da área total de postagem, acrescentando uma cor ou uma imagem, ou até mesmo as 2 coisas, mas para isso, você deverá acrescentar o elemento ‘background’ ao codigo CSS:

#main-wrapper -> templates mínima ou modificado
.main-outer -> designer de modelo

Veja exemplos:


 #main-wrapper { 
background: #36648B url (URL DA IMAGEM) repeat;
 } 

ou


 .main-outer { 
background: #36648B url (URL DA IMAGEM) repeat;
 } 

Caso queira incluir uma cor de fundo apenas para a coluna central da área de postagem, você deverá acrescentar o elemento ‘background’ ao codigo CSS:


.main-inner .column-center-inner {
background:#36648B;
padding:10px;
}

Veja mais informações sobre como modificar o background

Adicionar borda na área total de postagem

é só adicionar a seguinte opção ao código CSS:
border: 1px solid #000000;

Leia alguns artigos que tratam sobre personalização de bordas:

  1. Personalizando Bordas no Template
  2. Criar bordas arredondadas com CSS3

Adicionar ou Alterar margens na área total de postagem (margin e padding)

Se você achar que a área total de postagem( #main-wrapper ou .main-outer) ou a coluna central da área de postagem (.main-inner) precisa de margens, para ficar mais longe ou mais perto de determinado elemento, adicione o trecho abaixo (caso seu template já tenha esse trecho você apenas modificará os valores:
margin: 0px 0px 0px 0px;

Modifique 0 (zero) para o número que você quiser que fique sua margem, visualizando sempre antes de salvar, para ver o resultado que ficou.
Lembrando que na linguagem do código o sentido de Margin é horário, ou seja, o primeiro corresponde ao topo, o segundo corresponde à direita, o terceiro corresponde abaixo e, o quarto corresponde à esquerda!
[dica]Lembre-se “margin” corresponde à margem que é a relação entre um elemento e outro (coluna e área de postagem, por exemplo).
padding” é a distância das bordas da área de postagem para seus elementos internos.[/dica]

Para alterar a distância entre bordas e os elementos internos (padding) faça o mesmo procedimento da margem.
Padding: 0px 0px 0px 0px;

Se quiser aprender mais sobre “padding e margin” , leia o artigo que fala sobre Diferenças entre Margin e Padding.

Esses são basicamente os elementos que podemos alterar ou acrescentar na área total de postagem.

Se quiser continuar a seguir os demais tutoriais sobre Personalização da área do post, leia o próximo tutorial desta série:
Personalizar a área do post (parte 1) que trata sobre DATA, POST, CORPO DO POST, PARAGRAFO DO POST E O TITULO DO POST.

[alerta]Os código aqui apresentados foram retirados dos antigos modelos padrões do blogger, template mínima, e dos atuais modelos padrões,designer de modelo(modelo Simple).[/alerta]

Artigo atualizado em jun/2012.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

11 Comentários

  1. wallyce disse:

    olha so to com uma duvida eu fiz um template so que nao sei como inserir post nele..
    ele tem as divs todas

    queria saber qualç codigo devo inserir para pode aplicar postagens neles ou seja queria o codigo referente aos posts

    eu uso o blogger

  2. Guilherme disse:

    Boa tarde,

    Gostaria de saber como fazer para criar essa barra de compartilhamento, como barra de separação em cada postagem, onde há os botões do twitter, facebook, google+ e o link de leia mais.

    Obrigado.

  3. Faz um tutorial de como deixar a imagem 100% nos posts!
    xroooo’s!

  4. .:: Clau ::. disse:

    Artenix
    Lamento, mas não há como eu saber a respeito do seu template, sendo assim, não terei como ajudar.

  5. ARTENIX disse:

    Clau! não consegui colocar uma imagem na Main-wrapper, que no meu blog é a area que nao tem imagem, assim como, nao consegui no footer onde esta os coment recentes,

    dava para vc ver, http://www.artenix.com.br

    E muito obrigado, por toda as suas dicas, elas trasformaram meu site!

  6. MOVIE Edição Básica disse:

    legal.. preciso acrescentar alguns elementos ao meu blog para ajudar os internaltas que visitam o blog. vou tentar alguns tutoriais. abraço

  7. .:: Clau ::. disse:

    Leonardo
    Se precisa de atendimento individual e particular, solicite orçamento através do formulário de contato, por favor.

  8. Leonardo disse:

    Olá Clau, estou com um problema. Bom o que eu quero fazer em meu blog, é pegar a parte da postagem deste layout q coloquei neste blog teste http://oiioiooi.blogspot.com e colocar essa area de postagem igualzinha no meu blog http://www.candelabro10.blogspot.com . Tem como fazer isso?

  9. Lucas disse:

    clau,faz um artigo,ensinando como colocar essa caixinha de còdigo com barra rolante no final?

    Tô precisando mto,mas ñ sei ativar esse recurso

  10. Mizuki disse:

    Olá ^-^
    Estou a personalizar o meu blog mas tenho um problema. Não sei como tirar esta linha azul nos post: http://mizukisanworld.blogspot.com/

    Obrigada :3

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.