Colocar datas no Blogger como contagem de tempo decorrido

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

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:

formato-data-blogger

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

Outros tutoriais para seu template:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

7 Comentários

  1. Ótimo Tutorial Marcos, sempre tive curiosidade sobre isso, mas talvez pelo scprit estar hospedado no próprio blogger deixaria o blog um pouco pesado, sera que tem como colocar com o codigo hospedado ?

    Responder

    • É mais rápido assim sem depender de um host. Usa-se um padrão de códigos do Blogger, o que torna essa mudança perfeitamente leve em seu blog. Pode usar que assim é melhor.

      Responder

  2. Achei um recurso interessante, mais eu não usaria, pois, para artigos postados a mais tempo pode causar uma “confusão” nos leitores.

    Mais cada um têm sua opinião, o post ta muito bem explicado, parabéns!!!

    Responder

  3. Boa dica Marcos. O tumblr utiliza deste recurso. Tem seus prós e contras, mas acredito que os contras sejam mínimos.

    Responder

  4. Seria mais interessante se contasse messes e anos, apenas semanas da uma confusão tremenda na cabeça do leitor. Todavia é melhor que o recurso que o blogger utiliza.
    Marcos se você souber como mostrar Meses e anos também posta aí.

    Responder

  5. Fiz tudo e o código tá funcionando. Mas a hora tá estranha. Eu acabo de postar o post e diz que foi publicado há 14 horas.

    eu uso o fuso horário (GMT -03:00) São Paulo

    (PS: tem como deixar só dias e semanas??)

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.