Tutorial: Como criar um layout básico

Girls da minha vida *-*

Nesse post, irei postar um tutorial de como criar um layout básico. OBS: O tutorial foi feito pelo Cherry Bomb, eu só estou repassando.

~ Vamos lá ? ~

Primeiro vamos escolher o modelo básico. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feinho a primeira vista, mas depois vamos deixá-lo super lindo.

Para isso vá em modelo > Personalizar e escolha o modelo circulado de vermelho.

Depois clique em "Avançado"ali no lado, procure "Plano de fundo da postagem" e escolha uma cor qualquer só para destacar enquanto estivermos fazendo as modificações no HTML.

Clique em aplicar ao blog e depois em voltar para o blogger. Agora vamos mexer no HTML do blog para deixá-lo bonitinho.

Clique em editar HTML e depois em "prosseguir" na mensagem que aparecer.

Vamos começar as modificações. Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por .content-outer .content-cap-top {

Logo abaixo disso, você irá apagar apenas o que está destacado em verde na imagem, nada mais nada menos! Atenção para os ponto e vírgulas.

Seu layout deve ficar assim:

Agora vamos tirar o espaço entre a área das postagens e a barra lateral.

Aperte Ctrl+F novamente e procure por: .main-inner .column-right-inner {

Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.

Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.

Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. Eu fiz uma só para dar o exemplo, mas você já pode usar a sua imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do seu blog (Veja qual é a largura no designer de modelo).

Lá em layout clique em "Editar" no gadget do cabeçalho:

Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.

Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)

Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.

Aperte Ctrl+F e procure por: /* Tabs

Logo abaixo você verá esse código:

.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

Apague o que está destacado.
Aperte Ctrl+F de novo e procure por .main-inner {


Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).

Já fizemos as principais modificações no nosso layout. Depois de salvar o HTML você pode ir para o designer do modelo e colocar uma imagem de fundo para deixar o blog mais bonitinho. Para isso clique em Modelo > Personalizar > Plano de fundo. Clique no quadrado que tem a miniatura do plano de fundo atual, depois clique em "Fazer upload da imagem" e escolha a imagem que quiser.