Como fazer um layout básico

Como eu disse nesse post, eu vou ensinar a fazer um layout básico tipo o meu e o que eu fiz para o mundo dos gifs, em primeiro lugar cria um blog para o teste e faz o upload do modelo completo.

Escolhe o modelo viagem a 2 opção. Vê em largura se esta 960 e no outro 310. Se não estiver põe. E em avançadas vai a titulo do blog>> e onde está 60px muda para 0px.

No Plano de fundo da postagem escolhe branco e também podes mudar o plano de fundo da barra lateral a teu gosto.

Deve estar mais ou menos assim î o teu blog. Aplica ao blog e carrega voltar ao blogger, agora começa a editar o html.

Carrega F3 e procura por:

 .content-outer .content-cap-top {

Vais encontrar um código igual a este:

.content-outer .content-cap-top {

  height: $(content.imageBorder.top.space);

  background: transparent $(content.imageBorder.top) repeat-x scroll top center;

}

.content-outer {

  margin: 0 auto;

  padding-top: $(content.margin);

}

.content-inner {

  background: $(content.background);

  background-position: left -$(content.imageBorder.top.space);

  background-color: $(content.background.color);

  padding: $(content.padding);

}

E apaga as partes sublinhadas a verde, vê com atenção os pontos e virgulas que estão seleccionadas e  as que não estão.
Agora visualiza se o teu blog estiver assim:

Guarda e procura por:

.main-inner .column-right-inner {

Vais encontrar 2 opções mas vai à primeira onde o código é:

 .main-inner .column-right-inner {

 margin-left: $(content.padding);

}

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

  margin-left: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

}

.main-inner .column-left-inner {

  margin-right: $(content.padding);

}

 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

 background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

  margin-right: $(content.padding);

}

 Apaga o código a verde e visualiza se a barra lateral estiver bem coladinha à area dos posts guarda.
Procura por:

/* Tabs

Vais encontrar este código:

.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

Apaga a parte a verde.
Agora procura:

 .main-inner {

e abaixo dele cola:

 margin-top: -25px;

Visualisa, não vais notar nenhuma alteração, então salva.
 
Agora é o cabeçalho recomendo agora o uso do Inkscape para os desenhos. Faz um desenho fofo com essa base:

                                                       (Clica para ver em tamanho original)
Ou faz tu desde ínicio com 960px de comprimento.
Eu fiz um para o meu blog Marshmelon:

(Clica para ver em tamanho original)

Agora mapeia a imagem que escolheste vê como aqui e coloca-a num widget HTML/JavaScript em cima da area dos posts, espero que gostes, Xauuuu!