Data da publicação em moldura

Este primeiro tutorial irá explicar como alterar o formato da data de modo a ficar como podem ver neste post

As alterações as fazer são bastante simples e o efeito é, na minha opinião, bastante agradável.

Para isso é preciso entrar no painel de configuração do blog e configurar a data para o formato dia, mês, ano (como na imagem abaixo)

 

Depois disto é preciso entrar no código fonte do blog e  localizar ]]></b:skin>
e acima disto colar os seguintes estilos (CSS)

#fecha {
color: #464646;
padding: 5px;
float:right;
text-align:center;
border: #cccccc 1px solid;
list-style:none; display: block;
background: #EEEEEE url('');
}
.fecha_dia {
display:block;
font-size:14px;
line-height:14px;
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px;
line-height:10px;
text-transform:uppercase;
display:block;
}
.fecha_anio {
display:block;
font-size:9px;
line-height:8px;
}

Estes códigos definem a cor, tamanho, tipo e posição das letras. A localização do quadro onde vai aparecer a data entre outras coisas.

O terceiro passo é adicionar imediatamente à tag </head> o seguinte script:

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;; //Le otorgamos una clase al día
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; //Le otorgamos una clase al mes
anio = &quot;<div class='fecha_anio'>&quot;+da[2]+&quot;</div>&quot;; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>

Por fim, o ultimo passo é localizar no código fonte o seguinte texto:

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

e substituir por:

<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script></div></h2>

E é o suficiente para a data ficar como podem ver aqui.