
Boa tarde de novo, leitores ♥
Hoje trago a vocês um tutorial que, na minha opinião, é muito útil, pois acho que ninguém nasce sabendo criar um layout. Bom, criar seu próprio layout não é nenhum bicho de sete cabeças como parece no início. Eu nunca imaginei que um dia poderia criar um layout que eu gostasse, mas aqui estou eu! Enfim, vamos começar? Clique em "Leia mais" para continuar :3
Enjoy! ♥
I - Modelo
Bom, pra começar a nossa base, vá em modelo>personalizar>travel. Se não entendeu, aqui tem uma imagem:
(Créditos pela imagem: Cherry Bomb)
II- Tirando as bordinhas de papel
Vamos começar com alguma coisa bem simples: Tirar as bordinhas de papel que aparecem nesse modelo.
Vá no HTML do blog. Como o novo modelo do blog não acha nada só clicando ctrl + f ou f3, primeiro clique em "Formatar Modelo" e depois abra a caixinha de pesquisa. Vai aparecer uma barrinha de pesquisa dentro do código. Clique nela. e pesquise por: .content-outer .content-cap-top { . Abaixo desse código vai aparecer uma coisa assim:.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);}
Apague tudo que está em negrito. Menos os ponto e vírgula(;), a não ser que seja para apagar a linha toda.Depois de apagar tudo isso, salve e volte ao modelo do blog. Clique novamente em personalizar e vá até avançado>plano de fundo da postagem. Bom, eu recomendo usarem o plano de fundo branco, acho que fica mais bonitinho, mas essa parte é com você, se preferir outra cor ok. Um conselho meu é que você não use cores cegantes tipo...Verde vômito com bolinhas rosas florescentes e letra verde claro, as pessoas querem conseguir ler seu blog, se colocar uma coisa assim, elas vão é fechar a página antes que fiquem cegas.
III - Removendo espaço entre o cabeçalho e o resto do blog:
Bom, agora vamos para a parte do cabeçalho, precisamos dessa parte apenas para visualizar mais ou menos como ficará em seu blog, e se precisamos aplicar um tutorial para diminuir o espaço entre ele e o resto do blog, se não quiser, pule essa parte.
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
Apague o que está em negrito. Ainda com a caixinha de pesquisa aberta, procure por: .main-inner {
Agora, é só colar esse código em baixo: margin-top: -20px;
Mude só o número até ficar do tamanho exato de seu blog.
IV - Plano de fundo
Bom, essa parte de plano de fundo eu acho que é mais com você... Eu geralmente uso backgrounds cinzas, brancos ou pretos, não consigo ficar muito tempo com backgrounds de outras cores, mas acho que tudo isso depende do gosto de cada um. Bom, trouxe alguns backgrounds que achei perdidos aí na net, se forem seus, avise para mim colocar os devidos créditos.



-----------------------
Espero que tenham gostado do tutorial, depois eu voltarei trazendo a segunda parte desse tuto ^^
~Kissus ♥




Nenhum comentário:
Postar um comentário