Personalizar data da postagem no blog

Para criar um site ou blog que tenha uma aparência mais profissional, alguns detalhes que podem parecer pequenos, tem uma grande importância para quem visita sua página. Um detalhe desses é colocar a data da postagem abaixo do título da postagem e isso tem um grande apelo visual.

Isso pode ser feito de uma forma muito simples, mas tome alguns cuidados por que você precisa mecher no html do seu site. Mas eu vou explicar de uma maneira simples e se tiver alguma dúvida, basta adicionar um comentário no final desta matéria.

Antes de começar, precisa entender como funciona.

Desde a criação do Blogger, os estilos de códigos vem mudando e isso dificulta a localização das tags e as que nós vamos usar também mudaram. Vamos ver abaixo:

Modelos baseados no template Mínima de 2006, o código da data era assim:

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

Ou também assim:

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

Modelos baseados nos templates Designer de Modelo 2010, mudou denovo e ficou como o abaixo:

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

Agora vamos mudar a data de lugar:

Entre em "Modelo", "editar html" e depois "Expandir...".

Utilizando o comando "Ctrl + f", procure por um dos códigos acima e após encontrar o trecho correto, selecione-o, e pressionando as teclas CTRL + X recorte-o.
Agora é hora de posicionar-mos a data em outro local.

Para colocá-la abaixo do título do post, procure por esse trecho:

<div class='post-header-line-1'/>

Ao encontrá-lo, cole abaixo o código da data.
Seu código final ficará assim:

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

Para posicionar a data no rodapé do artigo, busque por esse trecho:

<div class='post-footer-line post-footer-line-1'>

E, depois dele cole o código da data. O código final ficará dessa forma:

<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

OBS.: Eu encontrei os códigos acima em DOIS locais diferentes no meu script e alterei nos dois.
Deu todo certo e salvei!

Para que a data apareça em todas as postagens, faça o seguinte:
No menu “modelo”, acesse “editar html” e marque a opção “expandir modelos de widgtes”
e procure por:

<b:if cond='data:post.dateHeader'>

<h2class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>

Substitua todo o código que você acabou de localizar, por este abaixo:

<b:if cond='data:post.dateHeader'>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>
<div class='post-outer'>

Agora é só visualizar e se estiver certo, salve. 
Prontinho. Agora sua data está abaixo do título e em todos os posts. 

Se quiser personalizar a data, é só colocar o código abaixo dentro de "head": 

h2.date-header { 
font-family: /*tipo de letra*/ 
color: /*coloque a cor de sua preferência*/ 
margin: /*defina um espaçamento se quiser*/ 
padding: /*defina um espaçamento se quiser*/ 
font-size: /*coloque o tamanho da fonte de sua preferência*/

Sucesso!