Data dos Posts em Forma de Calendário

 Olá doçuras como estão? Weee finalmente mudei a frase, bom... Lembrei-me de uma postagem que não havia feito ainda qui no blog . Já ensinei como configurar a hora e data do blog, mas nunca de como colocar a data das postagens em forma de calendário. Não entendeu? Eu explico! Geralmente quando postamos fica apenas a data do dia atual na ultima postagem feita, com esse tutorial não importa se postou várias postagens no mesmo dia todas as post vão aparecer com data e hora dependendo do modelo que usar é claro.

1. Antes de começar aconselho fazer um backup do seu template, sério melhor prevenir do que remediar. Agora vá em Configurações >> Idioma e Formatação >> Formato da Data e deixe exatamente assim:

2. Salve e agora vá em Modelo >> Editar HTML. Devo avisar que testei apenas no modelo Travel é Simples não sei se funciona em outros modelos do blogger, ok? Vamos lá, usando o atalho Ctrl+F procure por ]]></b:skin>, acima dele cole:

Códigos

 #fecha {
  background: #fee;
  box-shadow: 2px 3px 5px #fcc;
  border-radius: 50px;
  border: 3px solid #fcc;
  width:50px;
  height:60px;
  float:left;
  text-align: center;
  list-style:none;
  display: block;
  font-family: 'Arial;
  font-weight: bold;
  color:#FF9FA5;
  margin: 5px 2px 0 -70px; /* Altere -70px por 0px se quiser que a data apareça dentro da postagem ou para posicionar */
  padding: 0 0 8px 0px;
}
.fecha_dia {
  display:block;
  font-size:20px;
  line-height:30px;
  padding:12px 0 0 0;
}
.fecha_mes {
text-transform: uppercase;
  font-size:18px;
  color: #f0b6d6;
  line-height:8px;
  display:block;
} 

3. Agora procure por </head> e abaixo cole:

Códigos

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;;
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
document.write(dia+mes);
}
</script>

5. Procure por esse trecho <h2 class='date-header'><span><data:post.dateHeader/></span></h2> Nessa parte tem que prestar muita atenção, dependendo do seu modelo pode ser que apareça mais de 1 vez esse código; então nas 2 primeiras vezes troque por:

Códigos

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

◤Entendendo o código◥

• background: #fee; = cor de fundo 

• box-shadow: 2px 3px 5px #fcc; = sombreamento do fundo. 

• border-radius: 50px; = arredondar as bordas. 

• border: 3px solid #fcc; = cor e tipo de borda. 

• width:50px; e height:60px; = largura e altura. .

• float:left; = aparecer a esquerda do post; se desejar altere para direita (float:right). 

• text-align: center; = alinhamento do texto.

• font-family: = tamanho do texto do dia. 

• font-weight: bold; = fonte em negrito. 

• color:#FF9FA5; = cor da fonte. 

• padding: 0 0 8px 0px; = posicionamento. 

• font-size:20px; = tamanho da fonte. 

• padding:12px 0 0 0; = posicionamento da data. 

• text-transform: uppercase; = deixa tudo maiúsculo no texto do mês. 

• font-size:18px; = tamanho do texto do mês. 

• color: #f0b6d6; = cor do texto do mês.

.

É isso, o tutorial eu achei lá no Cor Seletiva, porém no Reino Kawaii achei os códigos mais completinhos assim estarei creditando ambos. Espero que tenham gostado, vou ficando por aqui ate aproxima. Kiss~

 Créditos: Cor Seletiva - Reino Kawaii (Por edição de códigos)