Tutorial - Criando uma layout básica

Olá pessoal!

Como dito eu venho hoje apresentar o Crie você mesmo sua layout #1.

Fazer um blog não é fácil, é cansativo demais, porém, no fim vale a pena ver que o blog ficou do seu jeito não é mesmo?

Para começarmos, todos devem ter um banner pronto para sua layout, como o post de hoje vai ficar grandinho, no próximo dia postarei brushes png para vocês montarem seus banners ok?
Como não posso deixar os meninos na mão, coloquei o blog azul e farei dois banners, masculino e feminino, mas usarei o feminino na layout rs.

ANTES DE TUDO, PEÇO PARA QUE FAÇAM EM UM BLOG TESTE.

CLIQUE NAS IMAGENS PARA VER MELHOR.

BANNER:

Primeiro passo: vamos colocar o banner do blog.
OBS: O banner utilizado na layout estará disponível quando o template for disponibilizado como free.
Vá em LAYOUT e encontrará a página abaixo, depois clique em EDITAR.

 Segundo passo: 
Vamos colocar o nome do blog e colocar a imagem, o banner dele ok?
Clique em ESCOLHER ARQUIVO e marque EM VEZ DE TÍTULO E DESCRIÇÃO.
Depois de clicar em Escolher arquivo você vai colocar a imagem que deseja e depois clique em salvar.

LAYOUT

Primeiro passo:

Vai em MODELO depois clique em PERSONALIZAR e coloque MODELO VIAGEM e escolha o azul, como mostrado na imagem abaixo e clique em APLICAR AO BLOG.

Segundo passo:

Clique em PLANO DE FUNDO, REMOVER IMAGEM e colocar a cor que quer, no meu caso eu decidi por azul.

Terceiro passo:

Clique em AVANÇADO, procure por PLANO DE FUNDO DA POSTAGEM e marque branco.

Quarto passo:

Volta para MODELO, EDITAR HTML e vamos deixá-lo sem aquelas bordas.

Quinto passo:

Clique naquelas setinhas que fica na lateral para expandir os códigos, aperte Ctrl+f que abrirá uma caixinha de pesquisa, procure por :


.content-outer .content-cap-top{

Apague tudo que está destacado, atenção para os pontos e virgulas ok?

.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);
}
.main-inner .date-outer {
margin-bottom: 2em;
}


Sexto passo:
Para deixar a coluna colada com o post, procure por:
.main-inner .column-right-inner {
Apague tudo que está destacado, mais uma vez, olhe bem os pontos e virgulas.

.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 {
margin-right: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 15px 0;
}

Sétimo passo:
Para deixar o banner coladinho, procure por:
/* Tabs
Abaixo terá o código, apague o que está destacado:
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
Oitavo passo:
Procure pelo código abaixo:
.main-inner {
Logo abaixo acrescente o código:
margin-top: -20px;
Para modificar o espaço é só alterar o (-20) para deixar de seu agrado. Clique em VISUALIZAR, se tudo estiver ok, clique em SALVAR.

Ufaa, terminamos, fácil né? Pega a prática conforme for fazendo rs.

Beijos e até o próximo tutorial pessoal!

OBS: CRÉDITOS.