Fazendo um layout - parte 1

Oi gente, tudo bem com vocês? Bom, eu estava fazendo esse tuto faz muuuuito tempo. Pra vocês terem noção, acho que desde novembro de 2013, se não me falha a memória... Mas então, aqui estou eu, com este humilde tutorial de como fazer um layout completo. Vou ensinar pra vocês tudo que eu aprendi durante esse tempinho de blogosfera, em partes, para não ficar muito cheio, certo? 

Então vamos lá. Se vocês seguirem tudo como manda o tutorial, vão conseguir um resultado igual ou parcialmente igual.

Estou participando de um sorteio de domínio no kawaii-world.net :3 apenas ignorem isso -q

Básico - Iniciando:

1. Primeiro, criem uma postagem com qualquer coisa e publiquem no seu blog de testes. Depois criem uma com tudo que vão personalizar: título, negrito, itálico, sublinhado, riscado, blockquote, listas, leia mais, marcadores e coloque uma imagem qualquer para teste.

2. Agora, o modelo pro layout que vamos usar é o Travel, então sigam comigo: modelo > personalizar > Viagem (último da lista) > Travel (segundo). Veja: xxx

3. Layout: Escolha no layout, nessa mesma página de personalizar, se você quer sidebar na esquerda, direita, dos dois lados e etc. Depois de escolher, vá em Avançado e:
- Se você não quiser o titulo do blog, vá na aba Título do Blog e coloque transparente;
- Deixe o plano de fundo da postagem na cor que você quiser usar;
- Vá na aba Plano de Fundo da Barra Lateral e deixe o fundo em transparente;
Ajuste as larguras do blog e da barra lateral.
Se quiser colocar um background agora e não esperar para o tutorial de colocar dois no blog, vá na aba Plano de Fundo, clique naquela seta que tem ao lado do quadrado e irá abrir uma janela, vá em Fazer upload da imagem e escolha seu back. Salve suas alterações.

Personalizando:

1. Para começar a personalizar vamos retirar a borda serrilhada que tem nesse modelo. Vá em Editar HTML, no modelo, dê ctrl + f e procure por

.content-outer .content-cap-top {

Retire tudo que estiver sublinhado no print, ok? Imagem: xxx
Visualize e veja se aquele fundo de papel serrilhado do Travel sumiu. Se sim, salve.

2. Depois disso vá em layout e edite as "postagens do blog":
Imagem: xxx e editem como mostra o próximo print. Imagem: xxx Depois de feito, salve.

3. Na mesma página de layout, clique em editar, na Navbar. Veja: xxx e marque esta opção: xxx

Agora vamos começar a dar vida no layout. Se você já colocou seu background anteriormente e não quer colocar um cabeçalho por html, apenas pule esse passo. Vamos lá:

• Procure por body {

Vai ter um código assim: 

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

 Substitua por esse:

body, html {
 height: 300px;
 margin: 0;
 padding: 0;  }
body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }
html {
 background: url("URL do 2º background") repeat; }

♥ height: 300px é a altura do cabeçalho do seu blog. Altere de acordo com a altura que tem no seu cabeçalho (dã :p)

♥ URL do 1º background é a do seu cabeçalho

♥ URL do 2º background é a do plano de fundo

Visualize e salve se deu tudo certo.

P.S: Tenha bem em mente a paleta que irá usar, para não ficar o cabeçalho com cores diferentes do resto do blog, certo? Também vou fazer algumas e deixar aqui pra quem quiser usar.

Se vocês fizeram tudo até agora, vai ficar mais ou menos assim: xxx. Mas calma, nós vamos personalizar muita coisa ainda, então aguardem até a próxima parte, certo? Beijos :*