Personalizar a data do post

Hoje vou ensinar pra vocês a como colocar a data da postagem, bem parecida com a nossa.É bem simples, mas requer que vocês prestem muita atenção com os códigos ok?Ela ficará mais ou menos assim: 

Clique em Leia o resto da Postagem pra ver o tutorial. 

1- Vá até Configurações > Formatação > Formato da Data > 20 Dezembro 2011. 

(Essa é a data de hoje. Por isso, se você estiver fazendo esse tutorial em outro dia, ela vai estar diferente. Mas o importante é o formato Dia Mês Ano.) Assim como mostra a imagem ao lado. 

2- Agora vá em Design, Editar HTML, Aperte CTRL+F (Ou F3) e procure por: </head>
E logo ABAIXO 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"

Aperte CTRL+F ou F3 e procure por:

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

Logo ABAIXO dele, acrescente o código:

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

Agora procure por:

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

e substitua por:

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

4- Procure por ]]></b:skin> e logo ACIMA cole:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:-8px; /*Margem externa direita*/
margin-top: -76px;
float:right;
text-align:center;
list-style:none;
display: block;
background-color: #FFFFFF;
border-left: solid 3px #CA9ED8;
border-right: solid 3px #CA9ED8;
border-top: solid 3px #CA9ED8;
border-bottom: solid 3px #CA9ED8;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Tahoma';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:11px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:15px; /*Altura da Linha*/
display:block;
}

Agora vamos personalizar! Altere #FFFFFF pela cor que você quer o fundo da data. Altere todos os #CA9ED8 pela cor da borda da sua data. E altere #464646 pela cor que você quer a data.
Prontinho! Sua data estará pronta. Mas caso ela tenha ficado ''bagunçada'', é só você alterar os valores de " margin-right " e " margin-top ".
Ficou bem grandinho né gente? >< Aprendemos esse tutorial no blog Menina Nerd, mas fizemos algumas alterações no ultimo código... portanto, créditos pra mim e pra ele ok?  Qualquer dúvida é só perguntar!