Data dos posts em formato calendário no Designer de Modelo do Blogger

Eu já publiquei um artigo onde eu ensino a Personalizar a data do post em forma de calendário, só que aquele tutorial não se aplica aos templates novos do Blogger, o Designer de modelo.
Depois do lançamento dos novos templates Designer de Modelo, alguns dos hacks que já publicamos não funcionam nestes modelos.
Este mês resolvi dar uma especial atenção a este modelos de templates e, assim, fazer diversos testes, aplicando alguns dos tutoriais que publiquei, a fim de verificar possíveis mudanças, erros etc.

Se você está usando os novos templates Designer de Modelo do Blogger,o método postado anteriormente para personalizar a data em forma de calendário não funcionará.

Demo

Veja a seguir como proceder para personalizá-la no Designer de Modelo.

[becape]É sempre bom lembrar que, antes de realizar qualquer edição no html do seu template, é altamente recomendável fazer um backup.[/becape]

Configurar a data dos posts em formato calendário

1º passo: alterar o formato da data, no menu “configuração” no painel do blogger, e para isso você deve Clicar em “Configurações » Idioma e Formatação » Formato da data” e escolha o formato: 19 janeiro 2013, conforme imagem demonstrativa abaixo:

2º passo: incluir o script para o bom funcionamento deste hack.
No painel do blogger, acesse o menu “modelo » Editar HTML” e localize a linha: </head>

Cole ABAIXO dela o seguinte 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 as modificações.

3º passo: colocar a data ao lado do título do post e fazer com que ela fique no formato vertical.
Volte no menu “modelo » Editar HTML” e clique “Expandir modelos de widgets” e Localize as seguintes linhas:

<b:if cond='data:post.dateHeader'>
          <h2 class='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'>

((Veja imagem))

SUBSTITUA a linha:

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

Por esta:

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

4º passo: Para acrescentar estilos ao bloco da data você deve acrescentar códigos css.
Localize a tag: ]]></b:skin> e cole logo ACIMA dela:

/* Data
------------------------- */
#fecha {
color: #464646; /*---Edite a cor da data---*/
padding: 8px; /*--- margens internas da data---*/
margin-right:10px; /*---Margem externa direita---*/
background: #eee;  /*--- cor do fundo---*/
border: 4px solid #ccc;  /*---cor da borda---*/
float:left;
text-align:center;
list-style:none;
display: block;
-moz-border-radius:80px;
-webkit-border-radius:80px;
border-radius: 80px;
width: 30px ; 
height: 30px;
}
.fecha_dia {
display:block;
font-size:20px; /*---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;
}

Se quiser incluir uma imagem na data, modifique estas linhas a seguir dentro do bloco de código em: #fecha
Substitua:
background: #eee; por:
background: url(URL DE SUA IMAGEM) no-repeat;
Em width: 30px e height: 30px substitua 30px pelo tamanho da largura e da altura da sua imagem.