Como colocar data atual no Blogger

10 6 99

📅 Como Adicionar a Data Atual no Blogger (Mensagem de Boas-vindas Dinâmica)

Exibir a data atual em seu blog é uma maneira simples e eficaz de tornar a experiência do visitante mais pessoal e acolhedora. Uma mensagem como *"Seja bem-vindo. Hoje é terça-feira, 15 de abril de 2026"* transmite a sensação de que o site é atualizado com frequência e se preocupa com os detalhes.

Neste tutorial, você aprenderá a inserir um pequeno script JavaScript no Blogger que exibe automaticamente o dia da semana, o dia do mês, o mês e o ano, sempre atualizados. O código será colocado em um gadget HTML/JavaScript na barra lateral, no rodapé ou em qualquer área do layout disponível para widgets.

🔧 Passo a passo (Blogger)

Acesse o painel do Blogger (blogger.com).
No menu esquerdo, clique em Layout.
Escolha a área onde você deseja que a data apareça (ex.: barra lateral, rodapé) e clique em Adicionar um gadget.
Na lista de gadgets, selecione HTML/JavaScript.
Dê um título ao gadget (ex.: "Hoje é...") – opcional.
No campo Conteúdo, cole o código modernizado que será mostrado abaixo.
Clique em Salvar e, em seguida, em Visualizar blog para testar.

💻 Código original – problemas e limitações

O código original usa métodos obsoletos como getYear() e arrays manuais para os nomes dos dias e meses. Embora ainda funcione, ele é extenso e difícil de personalizar. Além disso, document.write pode causar conflitos em alguns temas mais modernos.

Abaixo, apresentamos uma versão completamente atualizada, mais curta, eficiente e fácil de modificar.

✨ Código modernizado (recomendado)

Copie e cole o bloco abaixo no gadget HTML/JavaScript do Blogger. Você pode alterar o texto de boas-vindas e o estilo diretamente no código.

<div style="font-family: 'Segoe UI', Verdana, sans-serif; font-size: 14px; font-weight: normal; background-color: #f0f0f0; padding: 10px; border-radius: 8px; text-align: center;">
  🌟 <strong>Seja bem-vindo!</strong> Hoje é 
  <span id="dataAtual"></span>
</div>

<script>
(function() {
  // Array com nomes dos dias da semana em português
  const diasSemana = [
    "Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira",
    "Quinta-feira", "Sexta-feira", "Sábado"
  ];
  
  // Array com nomes dos meses em português
  const meses = [
    "janeiro", "fevereiro", "março", "abril", "maio", "junho",
    "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"
  ];
  
  const hoje = new Date();
  const diaSemana = diasSemana[hoje.getDay()];
  const dia = hoje.getDate().toString().padStart(2, '0');
  const mes = meses[hoje.getMonth()];
  const ano = hoje.getFullYear();
  
  // Formata a string da data
  const dataFormatada = `${diaSemana}, ${dia} de ${mes} de ${ano}`;
  
  // Insere o texto no elemento span
  document.getElementById('dataAtual').innerHTML = dataFormatada;
})();
</script>

O que esse código faz de melhor?

Usa getDay(), getDate(), getMonth() e getFullYear() – métodos modernos e confiáveis.
Utiliza padStart para garantir que o dia tenha dois dígitos (ex.: 01, 02...).
Os nomes dos dias e meses estão em arrays legíveis e fáceis de traduzir.
O conteúdo é inserido em um <span> com innerHTML, evitando document.write (mais seguro para temas responsivos).
Possui um leve estilo CSS inline (bordas arredondadas, fundo suave), que você pode modificar ou remover.

🎨 Personalização – mude a frase, as cores e a formatação

Elemento	Onde alterar no código	Exemplo
Frase de boas-vindas	Texto dentro da `div`: `"🌟 <strong>Seja bem-vindo!</strong> Hoje é"`	`"📆 Olá! Hoje é"`
Formato da data	Linha `const dataFormatada = ...`	`"${diaSemana}, ${dia}/${mesSemNumero}/${ano}"` (para formato 15/04/2026)
Mês com letra maiúscula	Substituir `mes` por `mes.charAt(0).toUpperCase() + mes.slice(1)`	`"Abril"` em vez de `"abril"`
Cor de fundo	`background-color: #f0f0f0`	`background-color: #fff3e0` (laranja claro)
Borda arredondada	`border-radius: 8px`	`border-radius: 15px`

Exemplo de formatação alternativa (dd/mm/aaaa numérico)

Substitua a linha da dataFormatada por:

const dataFormatada = `${dia}/${hoje.getMonth()+1}/${ano}`; // 15/4/2026

Para mês com dois dígitos: (hoje.getMonth()+1).toString().padStart(2,'0').

📌 Dica extra: exibir a data sem o gadget (dentro de posts ou páginas)

Se você quiser exibir a data atual dentro de um post ou página específica (não na barra lateral), basta criar um novo post, mudar para o modo HTML (ícone <>) e colar o mesmo código da <div> com o script. O Blogger interpretará o JavaScript corretamente (desde que o post esteja no modo HTML).

🔗 Links úteis (atualizados e válidos)

Documentação oficial do objeto Date (MDN Web Docs) – referência completa sobre métodos de data em JavaScript.
Central de ajuda do Blogger – Adicionar um gadget – oficial do Google.
Blogger in Draft (ambiente de testes) – útil para testar novos recursos.
Fórum de desenvolvedores do Blogger – para dúvidas avançadas.

✅ Verificação final

Após salvar o gadget, abra seu blog em uma janela anônima ou limpe o cache do navegador. A data exibida deve ser a data atual do sistema do visitante (baseada no relógio do computador/celular dele). Se aparecer em branco ou texto puro, verifique se:

O gadget está na posição correta.
Não há erros de digitação no código.
O modo de edição do blogger não está com "quebras de linha" desnecessárias (copie o código diretamente deste tutorial).

Agora seu blog tem um toque mais profissional e dinâmico, com uma saudação que muda a cada dia automaticamente. Aproveite para testar diferentes estilos e frases!

🔑 Keywords:

data atual no Blogger, mensagem de boas-vindas dinâmica, JavaScript data atual, gadget HTML/JavaScript, exibir dia da semana, formato de data português, personalizar saudação, layout do Blogger, widget data atual, código JavaScript moderno, Date object, innerHTML, tutorial Blogger passo a passo

📢 Tags:

#DataAtualBlogger #MensagemDeBoasVindas #JavaScriptData #GadgetBlogger #PersonalizarLayout #DicasBlogger #WidgetData #TutorialBlogger #JavaScriptModerno #BlogDinâmico

Reactions