Como Colocar um Calendário com Data nos Posts do Blogger

Método prático de posicionar um calendário personalizado com a data da publicação ao lado dos artigos de seu blog.

As muitas e muitas alternativas de se personalizar o design se estendem a vários setores de seu blog. Como você já deve ter percebido, muitos tutoriais te esgotam o dia e te fazem em muitos casos desistir daquela modificação tão desejada. Porém, em outros uma simples troca de códigos com ajustes “aqui e ali” já bastam para chegar ao resultado tão esperado.

E, é um desses casos simples que falaremos nesse artigo. Com nosso tutorial, você aprenderá como é práticocolocar um calendário ao lado das postagens com a data da publicação da mesma. Além disso, esse calendário poderá ser adaptado totalmente a seu gosto, já que você poderá criar uma imagem do mesmo e substituir pela que disponibilizamos, e, ainda ajustar as cores das fontes para melhor combinação com o estilo que preferir.

 Observação: Esse tutorial pode não funcionar em templates personalizados pela questão da falta do trecho do cabeçalho de data. Porém caso tenha experiência poderá ser adaptado colocando o código em um local alternativo do template.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Criar Calendário com Data nos Posts do Blog

1- Ajuste as configurações em seu blog!

>> Acesse seu Blogger, vá em "Configurações" - "Idioma e Formatação" - "Formato da data". A seguir, ajuste para que fique como no exemplo da imagem a seguir e clique em "Salvar Configurações".

>> Agora, caso esteja desabilitado "mostrar data", habilite indo em "Layout" - "Postagens no blog (Editar)" e marque a opção da data.

2- Aplicar o código ao template!

>> Vá em "Modelo" e em seguida "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise pelo trecho:

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

* Você normalmente encontrará dois trechos como este, é necessário aplicar o procedimento a seguir nos dois casos.

>> Substitua o trecho encontrado pelo seguinte código:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

>> Pesquise agora por </head>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4MiVts6SGPx0zJCislG1k_H5TyGsD8zyEYMkrlDPlLIo-EyGfrznesRc7lxok_SE8F69sGoX4FQTWh7cNvtghvjf1fJc0iXC_ip8rOoPpcGRgBYcQ_d_oJjE4d32_I7EIQK-eyIQzbVI/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Cor do mês */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Cor do dia */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Cor do ano */
}
</style>
</b:if>

Configuração:

* Ajuste as cores guiando-se pelos comentários destacados em VERMELHO.

* Destacado em AMARELO, imagem do calendário caso desejar substituir.

* Caso o calendário não aparecer no local apropriado, troque o -108 por 0 ou por outro valor que adaptar melhor a seu blog.

>> Clique em "Visualizar", estando tudo normal clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Com o procedimento concluído corretamente, seu blog já passará a exibir o calendário com a data da publicaçãoem todas as postagens. E, a partir desse momento contendo um novo meio de destaque que trará às suas páginas um "ar" muito mais elegante e profissional mantendo seus visitantes fascinados em seu estilo de publicar e sempre confiantes em seu trabalho.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.