Hoje, vou te mostrar, passo a passo, como criar um contador regressivo com o Chat GPT e como incorporar no Google Sites.
Se você já pensou em adicionar um temporizador online na sua página de vendas ou landing page, está no lugar certo!
O objetivo? Gerar aquele famoso gatilho mental de escassez que estimula o visitante a tomar decisões rápidas — afinal, ninguém quer perder uma promoção ou um evento, certo?
Bora lá?
Por que usar um contador regressivo?
Um contador regressivo é mais do que um simples detalhe visual. Ele pode ser decisivo para converter visitantes em clientes. A ideia é clara: mostrar que o tempo está passando e que as oportunidades não esperam. Imagine as aplicações:
- Destacar o prazo de uma promoção.
- Mostrar o tempo restante para as inscrições em um curso.
- Contar os segundos até o início de um evento online.
A mensagem que o contador passa é simples: “Aproveite enquanto dá tempo!” E nada melhor do que uma ferramenta visual, como um contador regressivo, para tornar isso evidente.
O que vamos criar?
O contador regressivo que vamos desenvolver terá um visual moderno e funcional, com as seguintes características:
- Exibição de dias, horas, minutos e segundos.
- Design responsivo e centralizado.
- Blocos com fundo escuro (#111) e bordas arredondadas.
- Texto em destaque com a fonte Lato, cor #B289FF, e zero à esquerda nos números com um único dígito.
Por exemplo: 06 dias – 23 horas – 26 min – 10 seg.
Agora que você já entendeu o impacto e o design, vamos colocar a mão na massa!
Contador regressivo com o Chat GPT
O Chat GPT vai ser o nosso braço direito nessa missão. Vamos usá-lo para gerar o script completo do contador regressivo. Abaixo está o prompt que você vai usar:
PROMPT para contador regressivo
Crie um script de um contador regressivo para uma página de vendas com data limite para 31 de dezembro de 2024.
Use as linguagens: HTML, CSS e Java Script, num único script.
Crie um reset básico de CSS.
Inclua comentário em cada linha de comando do CSS para me facilitar depois fazer ajustes.
Centralize o contador na altura.
Não precisa incluir título. Deixe o fundo transparente.
Em números com apenas 1 dígito, inclua o “0” à esquerda.
Utilize a fonte Lato, na cor #B289FF.
Números do contador em destaque com fonte Lato Black, tamanho 2 rem.
Abaixo de cada número, com letra pequena (0,8 rem; font-weight: 600; margin-top:0) descreva cada grupo com as palavras: DIAS, HORAS, MIN, SEG.
Crie um retângulo de fundo na cor #111, padding: 4px 14px 8px 14px; separado para cada grupo (dias, horas, minutos e segundos); canto levemente arredondado.
Crie um espaço de 10px entre os retângulos.Copie todo o prompt acima e cole no Chat GPT. Em segundos, ele vai gerar um código completíssimo para o seu contador regressivo.
Código completo do contador regressivo
Na dúvida, segue abaixo o código completo do contador regressivo criado com o Chat GPT. É só copiar e colar no layout da sua página de vendas.
Como o código está todo comentado, você pode editar estilo de fonte, tamanho, espaçamentos, cores etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador Regressivo</title>
<style>
/* Reset básico de CSS */
* {
margin: 0; /* Remove margens padrão */
padding: 0; /* Remove espaçamentos padrão */
box-sizing: border-box; /* Inclui bordas e paddings no tamanho total */
}
html, body {
height: 100%; /* Garante que o corpo ocupe toda a altura da página */
font-family: 'Lato', sans-serif; /* Define a fonte geral */
}
body {
display: flex; /* Utilizado para centralização */
justify-content: center; /* Alinha horizontalmente ao centro */
align-items: center; /* Alinha verticalmente ao centro */
background: transparent; /* Fundo transparente */
}
.countdown {
display: flex; /* Alinha os blocos de tempo em linha */
gap: 10px; /* Espaçamento de 10px entre os retângulos */
}
.countdown-item {
background-color: #111; /* Fundo do retângulo */
padding: 4px 14px 8px 14px; /* Espaçamento interno do retângulo */
border-radius: 8px; /* Cantos levemente arredondados */
text-align: center; /* Centraliza o texto dentro do retângulo */
color: #B289FF; /* Cor do texto */
}
.time-number {
font-family: 'Lato Black', sans-serif; /* Fonte em destaque para números */
font-size: 2rem; /* Tamanho da fonte dos números */
font-weight: bold; /* Deixa o número mais destacado */
}
.time-label {
font-size: 0.8rem; /* Tamanho da fonte da descrição */
font-weight: 600; /* Peso da fonte da descrição */
margin-top: 0; /* Remove espaçamento extra acima */
}
</style>
</head>
<body>
<div class="countdown">
<!-- Estrutura de cada grupo do contador -->
<div class="countdown-item">
<div class="time-number" id="days">00</div>
<div class="time-label">DIAS</div>
</div>
<div class="countdown-item">
<div class="time-number" id="hours">00</div>
<div class="time-label">HORAS</div>
</div>
<div class="countdown-item">
<div class="time-number" id="minutes">00</div>
<div class="time-label">MIN</div>
</div>
<div class="countdown-item">
<div class="time-number" id="seconds">00</div>
<div class="time-label">SEG</div>
</div>
</div>
<script>
// Define a data limite para 31 de dezembro de 2024
const deadline = new Date("2024-12-31T23:59:59").getTime();
function updateCountdown() {
const now = new Date().getTime(); // Hora atual
const timeRemaining = deadline - now; // Calcula o tempo restante
if (timeRemaining >= 0) {
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Adiciona "0" à esquerda para números menores que 10
document.getElementById("days").textContent = days.toString().padStart(2, '0');
document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');
} else {
// Caso o tempo se esgote, define tudo como "00"
document.getElementById("days").textContent = "00";
document.getElementById("hours").textContent = "00";
document.getElementById("minutes").textContent = "00";
document.getElementById("seconds").textContent = "00";
}
}
// Atualiza o contador a cada segundo
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
Incorporando o código no Google Sites
Depois que o código estiver pronto, é hora de integrá-lo ao Google Sites. Siga o passo a passo:
- Copie o código gerado pelo Chat GPT.
- Acesse o Google Sites e edite a página onde deseja adicionar o contador.
- No menu lateral, clique em Inserir e depois selecione Incorporar → Incorporar código.
- Cole o código no campo disponível e clique em Próximo. Um preview será exibido.
- Clique em Inserir e ajuste o tamanho do bloco conforme necessário.
- Use o mouse para posicionar o contador no local desejado no layout.
- Visualize a página para verificar como o contador se comporta em diferentes telas (computador e celular).
Dicas de personalização
Se o contador não se alinhar perfeitamente ao design da sua página, não se preocupe. O código gerado pelo Chat GPT é editável, e você pode ajustá-lo diretamente. Aqui estão algumas sugestões:
- Cores: Troque o código da cor de fundo (#111) ou dos textos (#B289FF) para harmonizar com a paleta da sua página.
- Fonte: Alterne entre diferentes estilos de fonte para combinar com o restante do site.
- Tamanho: Ajuste o tamanho dos textos ou o espaçamento interno (padding) para criar um visual mais proporcional.
Esses ajustes são simples e podem ser feitos diretamente no campo de edição do código no Google Sites.
Testando e otimizando
Antes de publicar a página, faça alguns testes:
- Responsividade: Certifique-se de que o contador funciona bem em telas de diferentes tamanhos, especialmente no celular.
- Barra de rolagem: Verifique se o contador não está causando barras de rolagem horizontais ou verticais.
- Acessibilidade: Certifique-se de que as cores e os textos estão legíveis.
Esses pequenos ajustes podem fazer toda a diferença na experiência do usuário.
Templates Premium Google Sites 100% editáveis!
Chega de perder horas tentando criar um site do zero. Agora, você pode ter um site moderno, rápido e seguro com meus templates para o Google Sites, desenvolvidos para facilitar sua vida e ajudar seu negócio a crescer com mais profissionalismo e agilidade.
Por que investir em nossos templates?
✏️ 100% Editável
😊 Fácil de usar
🕘 Economize tempo
✨ Design funcional
📲 Responsivo
🔎Otimizado para SEO.
Oferta especial: Pack Completo com mais de 75% de desconto!
Garanta agora seu pacote completo de templates Google Sites e aproveite essa chance única de ter sites profissionais por um preço que cabe no seu bolso. E o melhor: você pode pagar parcelado!
Inclui bônus templates editáveis Canva de cada template do pack, para te ajudar na padronização e edição das imagens do site.
Não precisa de hospedagem. Você só precisa ter um gmail para receber todos os templates. Inclua o seu gmail no momento da compra.
Pack Completo no Pix ou parcelado no Cartão em até 12x
Vídeo tutorial: Contador Regressivo no Google Sites Feito com Chat GPT
Conclusão – contador regressivo com o Chat GPT
Adicionar um contador regressivo ao Google Sites nunca foi tão fácil! Com a ajuda do Chat GPT, você cria um temporizador funcional e estiloso em minutos. Ele não só valoriza o design da sua landing page como também potencializa suas chances de conversão.
Agora é com você! Coloque em prática o passo a passo e aproveite para criar páginas de vendas ainda mais atraentes e profissionais. 🚀
Artigos Relacionados
Sobre o Autor
Designer Gráfico, Empreendedor Digital e Blogueiro. Carioca, criador da agência Interage Design. Apaixonado por empreender e criar oportunidades.
2 Comentários
Parabêns pelo conteúdo no Youtube. Estou aprendendo muito.
Olá Edy, muito obrigado pelo comentário! Fico feliz em saber que está gostando dos conteúdos do canal no Youtube.
Seja bem vindo ao canal e ao blog. Abraço e sucesso 🚀