Como criar um layout básico

Umas das dúvidas que eu mais recebo é "Liah, como eu faço um layout?". Eu geralmente não respondo porque não tem como explicar em um comentário. E na verdade a maioria dos blogueiros não faz o layout todo em si. Nós apenas modificamos a base disponibilizada pelo blogger.

Então hoje eu vou mostrar as principais modificações que devem ser feitas no modelo blogger. Vou logo avisando que é só o básico, apenas para deixar a aparência dele mais limpa e profissional. O resto como modificar as cores, criar as imagens, e adicionar outros efeitos você pode ver em outros tutoriais tanto aqui no Cherry Bomb como em outros blogs. Esse tutorial é só sobre como fazer a base.



Preste bastante atenção em todos os passos para não errar! Ah, desculpem pela tag nas imagens, mas não posso dar mole para os plagiadores. Se não der pra ver alguma coisa por causa da tag, me avisem. Para ampliar as imagens é só clicar em cima.

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írgula.

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. O meu ficou assim:

A nova interface do blogger está dando problemas na hora de enviar uma imagem de fundo, então se você não conseguir, volte para a interface antiga do blogger clicando em voltar, no topo do painel do blogger.

A base já está feita, agora é só você mudar as cores no designer do modelo e aplicar outros tutoriais para deixar o blog mais elaborado. Abaixo tem os links de alguns tutoriais complementares para você melhorar seu layout:

Coloque Fontes diferentes no seu blog  x Substitua os links "Início", "Postagens anterioriores" e "Postagens mais recentes" por imagens x Mude o fundo dos comentários x Coloque bordas arredondadas no seu blog x  Coloque imagem de fundo na sidebar x Coloque imagem de fundo nos títulos dos posts x Coloque sombreado no layout x Tire o sublinhado e coloque efeito fade nos links x Coloque duas colunas lado a lado com cores diferentes x Mais tutoriais

Pra você que acha que foi pouco: Blogar é só pros fortes por Camilla Martins