Personalizando a Data do seu Post

Essa dica é antiga, mas resolvemos postar aqui.

Para a data do seu post ficar como esta do garool, ou até muito melhor, segue a dica:

» Essas configurações demandam algum conhecimento em códigos HTML e CSS.
PORTANTO:» É sempre bom, antes testar num blogue de testes.» Salve o seu template antes de começar, clicando em Baixar modelo completo.» Leia o tutorial até o fim e tenha certeza de ter entendido.

1º- Passo: Clique em Configurações » Formatação » Altere o formato da data para por exemplo 10 março 2010.

Para ampliar clique na imagem

Vá até o final da página e clique em Salvar configurações

2º- Passo: Vá em Layout » Editar HTML e encontre a linha: </head> 

Cole ABAIXO desta linha o código:
<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 seu template clicando em  SALVAR MODELO

3º- Passo: Marque a caixinha Expandir modelos de widgets.
Agora, encontre e selecione estas linhas abaixo:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

* Não encontrado o código exatamente igual procure algo parecido.
Talvez:
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>

Cole a linha de código a seguir abaixo:
<a expr:name='data:post.id'/> 
» Agora você vai configurar a data para o formato vertical.
Substitua a linha:
<h2 class='date-header'><data:post.dateHeader/></h2>
ou pelo código:
<div class='date-header'><data:post.dateHeader/></div>

Pelo código abaixo:

<div id='fecha'> 

<script>remplaza_fecha('<data:post.dateHeader/>');</script>

</div>

4º Passo: Para configurar a imagem ou bloco da data copie este código CSS abaixo e cole acima da tag: ]]></b:skin>
#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('AQUI O ENDEREÇO DE SUA IMAGEM') 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;
}

Para terminar:

1. Onde está AQUI O ENDEREÇO DA SUA IMAGEM você pode colocar a imagem de uma folha de calendário, por exemplo.
2. Aqui são alguns links de onde encontrar as imagens de folhas de calendário:
   Link 1
   Link 2    
3. Caso você queira, não é necessário, colocar cores diferentes para o dia, mês ou ano coloque a linha:
   color: código hexadecimal; /*Edite a cor da data*/ nos blocos de códigos correspondentes para o dia, mês e ano e apague do #fecha.
4. Preste atenção para os blocos de códigos [.post h3{] e [.post h3 a, .post h3 a:visited, .post h3 strong { ] caso o título do seu post fique acima da data configure os comandos margin e padding destes blocos de códigos para que tudo fique alinhado.
   Para conseguir o resultado, vá alterando e visualizando os resultados.
   Dica: Experimente em .post h3 { inserir a linha: margin-left:35px; 

Fonte: templates para voce