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.

Personalize a data da postagem

Nossa, fazia tempo que eu não postava um tutorial, né? Me desculpem por isso. Hoje, com ajuda desse tutorial do Templates Para você, vou ensinar como colocar a data do seu blog parecido com o do MN.

Eu disse "parecido" porque no MN a data fica pra fora da área do post, e explicar como eu fiz isso seria impossível muito difícil. Então, no seu blog, a data ficará ao lado do título do post, pode ser? Só mais uma coisa: esse tutorial vai mexer com vários códigos, portanto, faça as modificações com calma e prestando bastante atenção. Só por precaução, faça o download do seu modelo atual.

1. Vá em Configurações > Formatação > Formato da data e escolha a opção "20 Março 2011", como mostra a imagem ao lado (clique para ampliar). Depois vá até o final da página e salve as configurações.

Obs.: Essa é a data de hoje avá. Em outro dia a data vai estar diferente avá. Então o importante é só que esteja nesse formato (dia mês ano). 

2. Agora vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:

</head>

e logo ABAIXO dele cole:

<script>
function remplaza_fecha(d){ 
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Salve as alterações.

3. Agora marque a caixinha "expandir modelos de widgets"

Dê Ctrl + F e procure pelo seguinte código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

pra facilitar a sua busca procure só pela primeira linha.

e logo ABAIXO dele acrescente:

<a expr:name='data:post.id'/>

Agora substitua essa linha:

<h2 class='date-header'><data:post.dateHeader/></h2>

por esse código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

4. Agora é o último código! Procure por:

]]></b:skin>

e ACIMA dele cole:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}