quinta-feira, 2 de maio de 2013

Mega Tutorial - Como criar um layout cute

Boa tarde!
Só quero avisa-las que meu boletim escolar chegou, e fui até bem, com exceção de matemática e física, o que para mim não é novidade. Então, terei de estudar muito mais esse bimestre para me recuperar, por que ficar de recuperação é muito ruim não é mesmo? Por isso posso dar umas 'sumidas' aqui no blog.
Vida de estudante é doce, mas não é fácil -n

Esquecendo meus problemas escolares², este é o tutorial mais pedido em qualquer blog. Creio eu, fazer layout é a coisa mais simples do mundo! Ontem eu vi uma garota no face que havia perguntado como que faz um layout, e como provavelmente ela não havia entendido minhas explicações, 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:


.content-outer .content-cap-top {
  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!
Ah, e me ajudarem nesse post o Jackie Dream e o Teenagers World!

Bjs ^_^

12 comentários:

  1. Que blog lindo =^.^=

    http://adoraveltedio.blogspot.com.br/

    ResponderExcluir
  2. Ai eu adorei , eu fiz isso no meu blog tudo bem ?
    Beijos adorei tudo ....

    ResponderExcluir
    Respostas
    1. Que bom que gostou :3 Não, problema nenhum ^3^
      besos >3<

      Excluir
  3. kkk acho que pra um proximo lay vou usar esse tuto *uu* , pq acabei de fazer um . Mas o resultado parece ser ótimo 0/

    Geekegirlie.blogspot.com || G² Official ♥

    ResponderExcluir
  4. eu nao consegui passar nem da primeira fase , pq no HTML do meu blog isso: .content-outer .content-cap-top { nao foi encontrado

    ResponderExcluir
  5. Vou morrer. Mais antes tentar fazer o lay kkkk seu blog é lindo e já estou seguindo
    troca afiliação?

    thecutegirloficial.blogspot.com.br

    ResponderExcluir
  6. Oii amei tipo mt seu blog!!!
    Eu n tenho editores e n sou boa com isso...queria perguntar se vc poderia fazer um layout para mim,ou se vc quiser,ser a designer de meu novo blog...oq vc acha? Se quiser so fazer o layout td bem,ja vai ajudar mt e deixara uma blogueira feliz!!!
    Mt obrii besos *-*

    ResponderExcluir
  7. Pftaa , queria um background igual ao seu :(

    ResponderExcluir
  8. Oi, pode me por como afiliada? Por Favor!
    Adorei o seu blog, divo *o*
    trick-ortreating.blogspot.com

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: