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:
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:
Aqui o layout com ás bordas separadas e bonitinhas -n
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 {Eu negritei á cor da borda, e usei a segunda cor da paleta, mas claro, você pode troca-la.
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;
}
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 ^_^
Que blog lindo =^.^=
ResponderExcluirhttp://adoraveltedio.blogspot.com.br/
Obrigadinha! >3<
ExcluirAi eu adorei , eu fiz isso no meu blog tudo bem ?
ResponderExcluirBeijos adorei tudo ....
Que bom que gostou :3 Não, problema nenhum ^3^
Excluirbesos >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/
ResponderExcluirGeekegirlie.blogspot.com || G² Official ♥
eu nao consegui passar nem da primeira fase , pq no HTML do meu blog isso: .content-outer .content-cap-top { nao foi encontrado
ResponderExcluirAmeei *-*
ResponderExcluirFico feliz >u<
ExcluirVou morrer. Mais antes tentar fazer o lay kkkk seu blog é lindo e já estou seguindo
ResponderExcluirtroca afiliação?
thecutegirloficial.blogspot.com.br
Oii amei tipo mt seu blog!!!
ResponderExcluirEu 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 *-*
Pftaa , queria um background igual ao seu :(
ResponderExcluirOi, pode me por como afiliada? Por Favor!
ResponderExcluirAdorei o seu blog, divo *o*
trick-ortreating.blogspot.com