Como Adicionar um Widget com Data e Hora em Tempo Real no Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um widget do tipo HTML/JavaScript com informação de data e hora em tempo real no seu blog.

Para inserir a informação de data e hora em tempo real em outros elementos do seu do blog, como por exemplo, no cabeçalho e no topo da tela, 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 UM WIDGET COM DATA E HORA EM TEMPO REAL?

Para adicionar um widget do tipo HTML/JavaScript com informação de data e hora em tempo real no seu blog, realize os vinte e um passos a seguir:

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 type='text/javascript'>

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: clique em Visualizar.

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

 

14º Passo: clique em Voltar.

Dica: se não localizar a opção voltar, clique sobre o ícone de uma seta no canto superior direito da tela.

15º Passo: clique em Layout.

16º Passo: clique em Adicionar um gadget.

17º Passo: na janela seguinte, escolha o widget HTML/JavaScript.

18º Passo: adicione o código abaixo no campo conteúdo.

19º Passo: clique em Salvar.

20º Passo: arraste o widget inserido para o local desejado.

21º Passo: por fim, clique em Salvar.

Dica: se não localizar a opção salvar, clique sobre o ícone de um disquete no canto inferior esquerdo da tela.



CONSIDERAÇÕES FINAIS

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

 

Por: Santos. Elaborado em: 16/03/2026. Publicado em: 16/03/2026. Atualizado em: 16/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
☰