Personalizando a Data do seu Post

CLASSIFICAÇÃO DO TUTORIAL
 AVANÇADO

Eu já havia feito um post/tutorial sobre como personalizar a data do seu post e colocar na forma de calendário, mas estive lendo este post e achei que estava um pouco difícil.

Então resolvi trazer esta dica novamente para o Templates para Você de uma forma bem mais fácil com a ajuda da Elke do Templates e Acessórios! Foi lá que vi este tutorial e os créditos são todos dela!

Para a data do seu post ficar como está aqui no Templates para Você, siga os passos descritos neste post.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º- Passo:

Clique em Configurações » Idioma e formatação » Altere o formato da data

► Em Formato da Data escolha o formato:06 Novembro 2012

Veja as imagens:

►Clique em Salvar configuração

2º- Passo:

Vá em Modelo » Editar HTML

► Encontre a linha:

</head>

Cole ABAIXO desta linha o código:

<!-- JavaScript Personalizando a Data do Post-->
<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>
<!-- Fim JavaScript Personalizando a Data do Post-->

Salve seu template clicando em Salvar modelo

3º- Passo:

» Configurando a data para o formato vertical.

Encontre estas linhas abaixo:(Selecione as primeiras que aparecerem)

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

Substitua a linha:

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

Obs » Se código acima estiver desta forma:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2> você pode substituí-lo sem problema.
Pelo código abaixo ▼:

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

OBS: As datas vão se repetir em todos os posts com este código.

O bloco de códigos irá ficar assim:

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

Veja como ficou no Demoplate 2010-3

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;/*Localizado à esquerda do Título- Se quiser do outro lado (direito) mude left para right*/
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;
}

Configurando o CSS da Data:

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:
   ♦ Ícones de Calendários
   ♦ Folhas de Calendário
3. Se você precisar colocar cores diferentes para o dia, mês ou ano acrescente 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.
   Veja: Como identificar cores
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.
   
   ♦Mas como fazer isso? Altere e vá visualizando os resultados.
   
   Dica: Experimente em .post h3{ inserir a linha: margin-left:35px;

Observação Importante:

» Este hack tinha o problema da data não aparecer em post feitos no mesmo dia, que foi resolvido em outro post que fiz aqui no TPV.
Para evitar que você tenha que procurar a correção deste problema em outro post o código daqui já está atualizado para que as datas apareçam em todos os posts.


Créditos:
♦ Elke - Templates e Acessórios
♦ Blog and Web

Post Atualizado e Corrigido em: 06/12/2012

Aproveite e Acesse Também:
♦ Como Repetir a Data do Post