Mega Tutorial - Como criar um layout kawaii

 

                                                      Boa tarde!

Este é o tutorial mais pedido em qualquer blog. Creio eu, fazer layout é a coisa mais simples do mundo! , e etão resolvi fazer logo um tutorial aqui no blog. 

Obviamente vou separar por partes, e começar pela mais fácil, o básico de qualquer layout.

Vamos aprender?

Provavelmente você irá precisar de:

- Um blog -n
- Inspiração (Nada de plágio u3u)
- Uma paleta de cores
- Photoshop, ou, outro programa editor de imagens

Eu gosto sempre de começar um layout com um tema e uma paleta. Vamos fazer um layout do Rilakkuma e com uma paleta que eu mesma fiz, lembrando que você pode usar outro tema.

Ai está a paleta, vamos começar agora á fazer o layout! Vamos começar abrindo o seu blog de testes ou blog normal e indo em modelo e abaixar a página até achar a palavra 'Viagem' e escolher o segundo modelo. Este é um dos mais utilizados para se fazer layout, e o único que eu uso.

Vai ficar assim.

Depois de escolher o modelo do seu layout, você deve ter percebido que ele tem umas bordinhas de papel horrorosas não é mesmo? Vamos tira-la!

1. Vamos em modelo > Editar HTML > clique em </b:skin>  Aperte CTRL+F > Pesquise por

.content-outer .content-cap-top {

Vamos achar algo como isto.

(Obrigada www)

Depois apague tudo e cole no lugar:

  height: ;
  background:  repeat-x scroll top center;
}
.content-outer {
  margin: 0 auto;
}
.content-inner {
  background:;
  background-position: ;
  background-color:;
  padding:;
}

Vai ficar deste jeito.

Perceberam que agora á area das postagens sumiram? Pois nós vamos separa-la.

Se você quiser ela junta é só ir em modelo > Personalizar > Avançado > Plano de Fundo da Postagem, e depois é só escolher a cor branca. 

Se quiser separa-la vá no html do blog, aperte CTRL+F e procure por:
.main-inner .column-center-outer {

Logo após achar esse código, substitua tudo o que estiver nas chaves (Inclusive o 'titulo') por:

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: inset 0 0 20px #e4e2e2, 0 0 4px #ccc;
padding: 5px;
border-radius: 5px;
border-top: #e9c596 3px solid;
border-bottom: #e9c596 3px solid;
}

Eu negritei  á cor da borda, e usei a segunda cor da paleta, mas claro, você pode troca-la.
Aqui o layout com ás bordas separadas e bonitinhas -n

Está ficando muito melhor não é mesmo? Agora nós vamos adicionar um background e separar e personalizar á sidebar.

Vamos adicionar um background! Vá em modelo > Personalizar > Plano de Fundo e escolha um de seu agrado, eu escolhi um pattern bem fofinho.

Agora nós vamos personalizar e separar á sidebar. Ainda em personalizar, vá em Avançado > Plano de Fundo da barra lateral e escolha á cor transparente nos dois em que aparece. 

Perceberam que ela ficou toda transparente? No final vai ficar assim.

Agora, vá em Modelo > Editar HTML > Selecione </b:skin> > Aperte CTRL+F > Procure por: 

.sidebar .widget {

Você deve achar algo assim:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Apague tudo isso e no lugar cole: 

.sidebar .widget {
  border-bottom: 4px solid #edcf93;
  padding-bottom: 10px;
  margin: 10px 0;
box-shadow: inset 0 0 20px #e4e2e2, 0 0 4px #ccc;background: #fff;
border-top: 3px solid #f1dcb2;
}

Se você seguiu todos estes passos corretamente, ele vai ficar desse jeito.

É claro que o layout não está pronto! Falta personaliza-lo, faremos isso nas próximas partes.

Por enquanto fica assim, espero que tenham gostado! E é proibido reblogar e copiar, lembre-se que me deu MUITO trabalho!

Créditos: Cake Pop