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;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).
margin: 0 auto 0;
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;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.
margin: 0 auto;
padding: 0 0 15px;
border: 1px solid $borderColor;
border-top: 0;
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
