Data dos Posts Personalizada

Hoje vou ensinar como personalizar a data das postagens do blog e deixa-la empilhada  em forma de um calendário, mas ela pode ficar do jeito que você quiser!! É preciso que você fique atento as explicações, pois qualquer coisa que estiver errado, ela não vai funcionar.

Alterando configurações

1) Vá em Configurações ► Formatação ► Formato de data. Deixe a data do blog neste Formato:  24 novembro 2012 (XX mes XXXX).

Alterando HTML

2) Agora vá em Modelo ► Editar HTML, e procure ^{(Ctrl + F)} Por </head> e cole o seguinte código abaixo dela.

<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>

Clique em Salvar Modelo.

3) Agora marque a caixa Expandir Modelos de Widgets.

Procure por

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

Você pode encontrar mais de um trecho igual a este em seu template.

Abaixo de todos que você encontrar coloque o seguinte código:

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

Agora procure Por:

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

(Também pode ter mais de um igual a este) 

Substitua por:

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

Aplicando Estilos

Procure por ]]></b:skin> e acima dele cole o seguinte código:

#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*/
float:right;
text-align:center;
list-style:none;
display: block;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px;
font-family:'Tahoma';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:11px;
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:15px;
display:block;
}

Pronto, agora é só visualizar e salvar!