Estilizando o corpo do Blogger Profissionalmente

Bom, já trabalhamos no Body do Blogger, criamos 2 tipos de Header, agora vamos ao corpo do Blog (outer-wrapper). Neste trecho de código está o fluxo do blog literalmente. Aqui neste conteiner estão os Post, Data, Marcadores, Comentários, Sidebar, Widgets, etc. Vamos neste artigo definir o Layout deste trecho.
Para isso vamos reler os artigos: Designer do Blog e Fatiando imagens, para relembramos algumas medidas de largura do Blog.

Defini que o conteiner (pense em uma caixa que contëm outras caixas quando falar no outer-wrapper) terá 729px para caber a imagem fatiada que se localiza no topo do meu Blog:

 

A imagem acima tem 727px. Peraí? Se o outer-wrapper tem 729px como pode?

Se você olhar no meu Blog o body tem uma imagem que se repete na vertical que contém o fundo do blog e um sombreamento nas laterais, está imagem tem dimensões maiores e exatamente no meio o espaço é de 729px. Sendo assim sobram 1px de cada lado para a imagem do outer-wrapper, dando um efeito interessante.

Imagem do body:

 

 Vamos ao que interessa, o código em si.

Aqui iremos só mexer na CSS (Folha de estilos) do outer-wrapper:

#outer-wrapper {
  width: 729px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  background: url(http://imagemdotopodoblog.jpg) no-repeat center top;
   }

Aqui neste trecho de código não se precisa explicar muita coisa, mas veja que a largura foi de 729px, a margens são automaticas na vertical para centralizar, dei um espaçamento em todos os lados do conteiner de 10px, o texto mandei alinhar a esquerda porque no body havia definido como center para corrigir o navegador IE6 que não entende margens automáticas e finalmente a imagem coloquei no centro e acima. Isso termina a configuração deste elemento.

Agora vamos aos elementos dentro de outer-wrapper, no caso são: content-wrapper, main-wrapper e sidebar-wrapper.

Content-wrapper também é um conteiner que contém: main-wrapper e sidebar-wrapper.

#content-wrapper {
  width:650px;
  padding:0;
  margin:0 auto;
  background: url(http://imagemdocontent-wrapper.jpg) repeat-y;
}

Largura definida em 650px, limpei todo espaçamento, mandei centralizar com margens automáticas e coloquei uma imagem de fundo se repetindo na vertical. Veja a imagem:

 

Está imagem cria uma coluna falsa. Coluna falsa é a melhor técnica para ser usar na sidebar. Se a sidebar for menor em altura que a área dos post, ela continuará fluindo normalmente, graças as colunas falsas. 

Main-wrapper é a área dos Post vamos defini-la:

#main-wrapper {
  width: 417px;
  padding : 20px 0 0 0px;
  float: left;
  background: url(imagemdomainwrapper.jpg) no-repeat top center;
  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 */
  }

Largura de 417px, espaçamento de 20px na parte de cima para o título dos post não ficar muito expremido, mandei flutuar a esquerda, coloquei uma imagem no topo para dar um sombreado:

 

O restante do código são correções para IE, então deixe como está.

E finalmente a Sidebar:

#sidebar-wrapper {

  width: 233px;
  float: right;
  font : 11px Tahoma, Arial, sans-serif;
  padding: 20px 0 0 0;
  color : #999;
  background: url(imagemsombreamento.jpg) no-repeat top center;
  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 */
}

Largura 233px, flutuação a direita, a fonte eu mudei para Tahoma na sidebar, o mesmo espaçamento top que dei em main-wrapper, a cor do texto também mudei na sidebar e coloquei uma imagem de sombreamento:

 

Bom, feito tudo isso seu template já deve estár bem vestido. No próximo artigo vamos tratar da estilização mais apuradas destes elementos. Até lá!

Subscreva o CSS-Desvendado completo!

Subscreva CSS - Desvendado por Email