Seu site vende produtos? Se sim, então você pode fazer uma contagem regressiva para seus descontos, ofertas e vendas por um período de tempo limitado.
Você pode mostrar qual é o tempo restante dos descontos ou ofertas. Além disso, quando o evento terminar, eles verão uma notificação dizendo 'Oferta encerrada!'.
|
| Vtrick Design | Temporizador de contagem regressiva |
Neste artigo, compartilharei como fazer um cronômetro de contagem regressiva usando HTML, CSS e JS para o seu site do Blogger. Não é necessário que seja feito apenas para as ofertas ou descontos, pode utilizar para outros fins ou eventos.
Antes de começar, vamos dar uma olhada em sua demonstração.
Como fazer um cronômetro de contagem regressiva?
Criar um cronômetro de contagem regressiva para o site do Blogger não exigirá muito conhecimento sobre HTML, CSS ou JS porque já o desenvolvi para você.
O que você precisa fazer é colar os seguintes códigos em uma postagem, página ou em qualquer outro lugar por meio da visualização HTML.
Passo 1: Primeiro de tudo, faça login no seu Painel do Blogger
Passo 2: No Painel do Blogger, clique em Páginas ou Postar.
Etapa 3: crie uma nova página ou poste clicando no ícone ou clique na página existente ou poste para adicionar códigos lá.
Etapa 4: alternar para a visualização HTML.
Passo 5: Cole os seguintes códigos onde você deseja adicionar o Contador Regressivo.
Se o seu modelo tiver um recurso de modo escuro e se você quiser uma cor diferente quando estiver no modo escuro, poderá personalizar os códigos conforme sua necessidade. Cada modelo pode ter uma classe de modo escuro diferente, portanto, ajuste-a, você pode substituir a classe marcada pela classe de modo escuro do modelo.
<!--[ Countdown Discount by Vtrick Design ]-->
<div data-disc='-30%' class='cdCont'>
<div class='cdHeadB'>
<div class='cdH'>Você é rápido o suficiente?</div>
<div class='cdD'>Ganhe um grande desconto de 30%, seja rápido, porque o desconto está disponível apenas por tempo limitado.</div>
</div>
<div class='cdHeadA'>
<div class='cdH'>Ops! Oferta encerrada.</div>
<div class='cdD'>Você está tão atrasado para chegar aqui.</div>
</div>
<div class='cdTmr'>
<div class='cDown'>
<div class='cdBox'>
<span class='days'>00</span>
<span class='unit'>Dias</span>
</div>
<div class='cdBox'>
<span class='hours'>00</span>
<span class='unit'>Horas</span>
</div>
<div class='cdBox'>
<span class='minutes'>00</span>
<span class='unit'>Minutos</span>
</div>
<div class='cdBox'>
<span class='seconds'>00</span>
<span class='unit'>Segundos</span>
</div>
</div>
<a class='btn' href='#'>Comprar Agora!</a>
</div>
</div>
<script>
/*<![CDATA[*/
/* Countdown Discount Script by Vtrick Design */
const dayElm = document.querySelector('.cdBox .days'),
hourElm = document.querySelector('.cdBox .hours'),
minuteElm = document.querySelector('.cdBox .minutes'),
secondElm = document.querySelector('.cdBox .seconds'),
cdCont = document.querySelector('.cdCont'),
endDate = new Date('January 1 2030 00:00:00 GMT+05:30');
let eventEnded = !1;
const updateTimer = () => {
let e = new Date;
var t = endDate.getTime() - e.getTime();
t <= 1e3 && (eventEnded = !0);
var n = 36e5,
o = Math.floor(t / 864e5),
a = Math.floor(t % 864e5 / n),
n = Math.floor(t % n / 6e4),
t = Math.floor(t % 6e4 / 1e3);
dayElm.innerText = o < 10 ? '0' + o :o, hourElm.innerText = a < 10 ? '0' + a :a, minuteElm.innerText = n < 10 ? '0' + n :n, secondElm.innerText = t < 10 ? '0' + t :t
};
setInterval(() => {
eventEnded ? (cdCont.classList.add('ended')) : updateTimer()
}, 1e3);
/*]]>*/
</script>
Vou recomendar adicionar os códigos CSS na seção de cabeçalho do seu modelo.
Etapa 6: altere as partes marcadas conforme desejar e publique sua página ou postagem.
Substitua January 1 2030 00:00:00 GMT+05:30 por sua data e hora personalizadas.
Conclusão
Trata-se de criar um widget de oferta com contagem regressiva usando HTML, CSS e JavaScript para o site do Blogger.
Espero que você aproveite este artigo. Por favor, compartilhe este artigo. E se você estiver enfrentando problemas em qualquer seção ou tiver alguma dúvida, pergunte-nos na caixa de comentários . Obrigado!
