Customizando a data nos posts blogger

Olá, deixar o seu blog mais atraente para o leitor inclui ter uma boa aparência. Hoje ensinarei como customizar a data que aparece junto aos posts pra algo mais cool do que o que geralmente vem como padrão nos templates.

Pra personalizar a data do seu blog, assim como você vê aqui, siga atentamente os passos abaixo e boa sorte.

0- SEMPRE faça um backup do seu template antes de qualquer modificação, ok? Este tutorial é feito baseado no source do template "Mínima".

1- Vá até o painel de configuração do seu blogger, acesse 'Configurações' > 'Formatação', depois deixe como na imagem abaixo:

2- Agora, encontre a tag: </head> e cole o script abaixo imediatamente acima dele.

<script type='text/javascript'>
function novadata(d){
var d = d.replace(/\,/g,'');
var da = d.split(' ');
diaSemana = "<p class='diaSemana'>"+da[0]+"</p>";
mes = "<p class='mes'>"+da[1]+"</p>";
dia = "<p class='dia'>"+da[2]+"</p>";
ano = "<p class='ano'>"+da[3]+"</p>";
document.write(dia+mes+ano);
}
</script>

3- Neste passo, antes de ]]></b:skin> cole as linhas abaixo:

.data{padding:0 0 10px 0;color:#2a2a2a}.post-title{margin:0 0 0 50px;padding:0}.dia,.mes,.ano{color:#132e70;text-align:center;display:block;font-family:'Arial'}.dia{font-size:18px;letter-spacing:-1px;line-height:16px}.mes{font-size:10px;line-height:9px;text-transform:uppercase}.ano{font-size:9px;line-height:8px}.ndata{float:left;width:45px}.ndata p{margin:0;padding:0;color:#4a5976}

4- Em seguida, visualize pra ver se está tudo certinho e salve. Clique agora em "Expandir modelos de widgets" e localize uma parte semelhante a essa:

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

5- Agora, SUBSTITUA essas três linhas acima por estas:

<div class='ndata'><script type='text/javascript'>novadata('<data:post.timestamp/>');</script></div>

Visualize mais uma vez pra ver se funcionou. Caso esteja tudo perfeito, salve e faça um link pra cá. ^.~