Fazendo seu template – Parte 1 – Configurações Iniciais

Como prometi, vamos aprender a fazer um template passo-a-passo e para isso vamos usar um template de base, o template “Denim” disponível no próprio Blogger.
Não vai ser uma serie de postagens de como fazer do inicio, do 0, mas assim fica mais fácil para todos aprenderem um pouco de CSS, HTML e Loops (códigos) do Blogger.

Essa série de postagens vai gerar várias dúvidas, vou tentar ajudar todos e dependendo da quantidade de perguntas repetidas, vou criar uma página de perguntas e respostas sobre cada parte da montagem do seu template.

Antes de mais nada, crie na sua conta um blog de testes, para você fazer as modificações. Escolha o template “Denim” e clique em salvar.


Parte 1 – Configurações Inicias (largura, cores, fontes, etc)

Vamos criar os “limites” do template: os limites de espaço, fonte e determinar cores.
Para entender mais sobre CSS e HTML, recomendo que leia o seguinte post antes de começar: Um pouco sobre CSS e Mudando o fundo do seu template.

1º – Entre em “Layout” → “Editar HTML”.

2º – Vamos usar a div “outer-wrapper” já inserida no template para limitar a largura e posicionamento.

Então procuramos (Ctrl + f) o CSS:

#outer-wrapper { 

Vamos inserir a largura (width) e como exemplo vou usar 980px, uma largura perfeita para quem quer criar um template com três colunas.
Coloque:

width: 980px; 

Se quiser mudar a largura, basta trocar 980 pelo tamanho desejado.

3º – Na mesma div (outer-wrapper), vamos inserir a cor de fundo (background) onde vai ficar todas as colunas e textos e depois centralizar tudo.
Coloque:

background: #FFF;
margin: 0 auto 0;

Onde a margin vai centralizar o template e background é a cor do fundo. Você pode trocar a cor do fundo, basta adicionar o código de acordo (tabela de cores aqui).

Obs.: Recomendo uma cor clara, de preferencia branco (#FFF), para não cansar a vista de quem lê.

Depois teste e salve.

4º – Agora vamos apagar a outra formatação antiga que também está limitando o template.

Procure (Ctrl + f):

#content-wrapper {

Apague:

width: 760px;
margin: 0 auto;
padding: 0 0 15px;
border: 1px solid $borderColor;
border-top: 0;

Onde: Width é a antiga largura, margin é a antiga centralização, padding a distância do conteúdo até a borda da div e border é a borda.

Teste e salve.

5º – A navbar do Blogger não fica muito bem, então vamos retira-la:

Procure (Ctrl + f):

body {

e ANTES disso cole:

#navbar-iframe {display:none} 

Salve.

Troque as cores dos textos, links, fontes, usando a aba “Fontes e cores”.

Mais ou menos seu template está assim:

Por hoje é só, amanha tem mais... Fique calmo, aos poucos você vai perceber as mudanças.
abraços