Fazendo templates – parte 1

E a pergunta que não quer calar... Como fazer templates para o Blogger? Na verdade, não é dificil. Não sei se a maneira que faço é a convencional, mas foi assim que eu aprendi.

Nessa primeira parte, vou mostrar o mais fácil, que é colocar background - o famoso “bg”. Então, vá em Layout e em Escolher novo modelo. Marque a opção Mínima. Esse vai ser o template base. Clique em Editar HTML pra acessar o editor. Não vou explicar demais, mas você tem que saber que não pode mexer, de jeito nenhum, na parte que antecede os créditos, ok? Se você quiser saber porquê, visite o blog da Ariane.

Então, depois dos créditos, vem as variáveis. Elas são as responsáveis pelas opções Fontes e Cores. Mais abaixo, você vai ver o body. É a partir dessa parte que ficam todos os elementos do template (cabeçalho, posts, sidebar e footer) no que diz respeito à estilos (cor, posição, largura, altura, flutuação…). Então, é aí que vamos colocar uma imagem ou cor de fundo na página.

body {
background: $bgColor; /*----- $bgColor foi a variável definida para cor ----*/
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Em background é que vamos colocar a cor ou a imagem. Nesse site tem um monte de bg's prontos (os chamados Patterns = padrão, que se repetem). Faça o download e hospede em sites como o ImageShack, Photobucket ou Tinypic. Depois de hospedar a imagem, apague $bgColor e coloque url(endereço aqui) repeat. Entre os parênteses, você cola o direct link que esses sites geram. Veja na imagem como deve ficar (clique aqui)

Explicando:
• Você encontra essas cores HTML em tabelas poraí. Aqui ao lado tem o link de uma muito boa, com muitas cores.
• Veja que após o parêntese eu coloquei repeat. Isso faz com que a imagem se repita em toda a página. Veja também que cada linha acaba com um ponto e vírgula (;) e cada elemento começa e termina com chaves { e }.

Antes de salvar o modelo, clique em . Pronto, aposto que você percebeu que a imagem também ficou no texto, né? Não se desespere! rs Isso é fácil de resolver, a gente só vai “tapar” essa parte pra que não apareça a imagem. Pra isso, encontre esse trecho:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background: #fff; /*----- coloque aqui a cor que voce quer -----*/
}

Basta adicionar a última linha que está destacada e alterar a cor. Novamente visualize, e se não der nenhum erro, pode clicar em . Caso não abra a visualização, mostrando alguma mensagem de erro, refaça os passos, que vai dar certo. O meu ficou assim Clique aqui. Pronto, é isso. Até a próxima parte do tutorial.