Colocar datas no Blogger como contagem de tempo decorrido

Normalmente as datas dos posts e comentários em nossos blogs aparecem em formato comum de um calendário, com o dia/mês/ano ou algo semelhante. Mas é possível trocar a data por uma contagem de tempo decorrido, ficando como “Publicado há 15 dias”. Fazendo algumas mudanças no código fonte do template do seu Blog (no Blogger), esse novo formato pode ficar bem interessante.

Sempre que for fazer modificações em seu blog, lembre-se do backup completo e de fazer testes antes para ter certeza dos resultados.

• Como criar um Blog de testes e de backup

Data com tempo decorrido no Blogger

Vou mostrar aqui neste post como colocar esse formato de data com tempo decorrido para quem usa o Blogger como plataforma. Se quiser ver um modelo funcionando, acesse nosso blog de testes do Blogger.

1. Abra o painel do Blogger, clique no menu “Design” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”, como na imagem abaixo. Isso exibirá todo o código fonte do seu blog.

Aqui você deve procurar pela seguinte linha:

]]></b:skin>

2. Imediatamente ABAIXO disso, cole o seguinte trecho de Script sem modificar nada:

<script type='text/javascript'>
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#39;semana&#39;]=604800;periods[&#39;dia&#39;]=86400;periods[&#39;hora&#39;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#39;string&#39;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#39;string&#39;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#39;&#39;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#39; &#39;;if(time&gt;1){output=output+period+&#39;s &#39;;}else{output=output+period+&#39; &#39;;}}
granularity--;if(granularity==0){break;}}
return&#39;Publicado há &#39;+output;}
$(document).ready(function(){});
</script>

3. Agora, ainda sem sair dessa página, procure por mais essa linha:

<data:post.dateHeader/>

Alguns modelos de templates podem ter mais de uma delas. Você terá de encontrar todas e trocá-las pelo que segue.

4. Troque esse linha pelo seguinte trecho (em todos os lugares onde aparecer):

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

5. Salve o modelo. Mas ainda falta um pequeno detalhe para funcionar perfeitamente. É preciso mudar a configuração de data do Blogger. Para isso, vá ao menu “Configurações” ~> “Formatação” e escolha o formato de data que mostramos na imagem abaixo:

Depois de tudo salvo, você pode ver o resultado em seu blog.

Outros tutoriais para seu template:

• Como adicionar artigos relacionados no rodapé dos posts do Blog
• Ícones sociais no rodapé dos posts
• Novo botão Send do Facebook para compartilhar com Grupos