Contador Regressivo com o Chat GPT para o Google Sites

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á?

Sumário

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

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. 🚀