Como Adicionar Data e Hora em Tempo Real no seu Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um campo com informação de data e hora em tempo real no seu blog. Esse campo pode ser adicionado no topo do blog, abaixo do cabeçalho, nas postagens, entre outros elementos visuais.

Para inserir um campo com informação de data e hora em tempo real em um widget do tipo HTML/JavaScript do blog, clique aqui.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.



COMO ADICIONAR DATA E HORA EM TEMPO REAL NO BLOG?

Confira como adicionar um campo com informação de data e hora em tempo real no seu blog em dezessete passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

5º Passo: clique em qualquer local dentro do HTML do blog.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho: <body

Observação: a tag <body> pode aparecer limpa ou com algumas definições internas, como no exemplo abaixo.

Exemplos:

<body>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

8º Passo: na tag <body>, antes do último sinal >, insira o trecho: onload='iniciarRelogio()'

Exemplos:

<body>

<body onload='iniciarRelogio()'>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='iniciarRelogio()'>

9º Passo: pesquise pelo trecho: </body>

10º Passo: clique depois desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo dele.

11º Passo: clique aqui para copiar o código Script do menu e depois cole abaixo do trecho pesquisado.

O HTML do seu blog era assim:

</script>

</body>

<macro:includable id='sections' var='col'>

Depois que colar o código Script, vai ficar assim:

</script>

</body>

<script>

function iniciarRelogio() { 

    const opcoes = { day: &#39;numeric&#39;, month: &#39;long&#39;, year: &#39;numeric&#39;};

    const agora = new Date();

    const hora = agora.toLocaleTimeString(&#39;pt-BR&#39;); // Formata a hora

    const data = agora.toLocaleDateString(&#39;pt-BR&#39;, opcoes); // Formata a data

    document.getElementById(&#39;relogio&#39;).innerHTML = data + &#39; - &#39; + hora;

    // Atualiza a cada 1 segundo (1000 milissegundos)

    setTimeout(iniciarRelogio, 1000);

}

</script>

<macro:includable id='sections' var='col'>

12º Passo: retorne novamente para a caixa de pesquisa do HTML.

13º Passo: para inserir a data e hora em tempo real no topo do blog, pesquise novamente pelo trecho: <body

14º Passo: clique depois desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo dele.

15º Passo: copie o código a seguir e cole abaixo do trecho pesquisado.

Observação: o código acima adiciona a data e hora em tempo real no topo do blog.

O HTML do seu blog era assim:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='iniciarRelogio()'>

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>

Depois que colar o código, vai ficar assim:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='iniciarRelogio()'>

<div style='text-align: center;' id='relogio'/>

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>

Dica: para inserir a data e hora em tempo real abaixo do cabeçalho do blog, ao realizar o 13º passo, deve pesquisar pelo trecho </header>. Em seguida, deve adicionar o código acima do trecho </header>.

O HTML do seu blog era assim:

</div>

</header>

<div class='tabs-outer'>

Depois que colar o código, vai ficar assim:

</div>

<div style='text-align: center;' id='relogio'/>

</header>

<div class='tabs-outer'>

16º Passo: clique em visualizar.

17º Passo: se não houver problemas na visualização, clique em Salvar.



COMO INSERIR DATA E HORA EM TEMPO REAL NUMA POSTAGEM?

Confira como adicionar a data e hora em tempo real numa postagem do seu blog em seis passos:

1º Passo: retorne à página inicial do Blogger.

2º Passo: clique em Postagens.

3º Passo: acesse a página de edição da postagem desejada.

4º Passo: altere o modo de visualização do conteúdo para a opção Visualização em HTML.

Dica: caso não localize a opção Visualização em HTML, clique sobre o ícone de um lápis e altere para o ícone dos sinais <>.

5º Passo: escolha o local do código HTML da página que deseja inserir o campo de data e hora e cole o código abaixo.

6º Passo: por fim, clique em Atualizar e confira o resultado na página publicada.

 

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a aplicação de um campo com informação de data e hora em tempo real no seu blog.

 

Por: Santos. Elaborado em: 13/03/2026. Publicado em: 13/03/2026. Atualizado em: 13/03/2026.

Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.
Categoria:

Nenhum comentário:

Postar um comentário
☰