Pixel (blog - blogger profissional)

Conversão Hotmart

Google ADS

Este site utiliza cookies

Quer aprender como fiz esse aviso? CLIQUE AQUI

Baixe nossos 3 ebooks

Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

3 E-book Grátis

3 E-book Grátis
3 E-book Grátis

Pesquisar

Artigos em Destaque

Grátis

Baixe 3 ebooks
Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

Início > aguardar segundos antes do download > Blogger Profissional > botão com timer > contagem regressiva > criar contagem regressiva > Download com Contagem Regressiva > settimeout vc setinterval

Download com Contagem Regressiva Blogger Profissional HTML, CSS e JavaScript

Download com Contagem Regressiva Blogger Profissional HTML, CSS e JavaScript


Essa semana me enviaram uma mensagem de dúvida perguntando como fazer uma contagem regressiva quando alguém clicar em um link .... Para que a pessoa que clicou aguardasse alguns segundo antes de baixar um arquivo.


Dessa forma a pessoa iria passar mais tempo dentro do site e talvez clicasse em algum anúncio.



Já vi muitos sites famosos fazerem isso, e alguns vídeos na internet ensinando como fazer também.


Então decidi trazer uma solução fácil e rápida para você que precisa de um código rápido, simples e pronto para usar.

No vídeo eu utilizei o nosso editor de códigos exclusivo, semelhante ao VsCode (Editor de Códigos Online).



Estrutura HTML


<center>
    <a href="JavaScript:contagem()" class="buttonClass">Clique Aqui</a>
    <div id='cont'><br/><br/>Contador Aqui</div>
</center>


Fiz uma estrutura simples para que se encaixe em qualquer site sem atrapalhar o layout ... Atenção: É importante utilizar um "ID" único para não afetar outros itens do seu site.

Repare que no endereço do link eu coloquei uma função chamada 'contagem()' ... Ou seja, Quando a pessoa clicar, vai executar essa função antes de abrir o link.



Estilo CSS do botão


Sei que a aparência do botão vai mudar de acordo com a aparência do seu site, mais gostaria de indicar um site que eu descobri, onde podemos criar vários modelos de botão, o código CSS vem pronto para usar (Caso Queira):

https://cssbuttongenerator.com/

a baixo está o exemplo que utilizamos no vídeo:


.buttonClass {
  display: grid;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size:17px;
  font-family:Arial;
  width:200px;
  height:53px;
  border-width:5px;
  color:rgba(255, 255, 255, 1);
  border-color:rgba(189, 189, 189, 1);
  border-top-left-radius:42px;
  border-top-right-radius:42px;
  border-bottom-left-radius:42px;
  border-bottom-right-radius:42px;
  box-shadow: 0px 0px 0px 2px rgba(116, 149, 197, 1);
  text-shadow: 0px 1px 0px rgba(5, 5, 5, 1);
  background:linear-gradient(rgba(54, 124, 255, 1), rgba(0, 64, 141, 1));
}

.buttonClass:hover {
  background: linear-gradient(rgba(0, 64, 141, 1), rgba(54, 124, 255, 1));
}




Função JavaScript - Download com Contagem Regressiva


Para simplificar, criei uma variável chamada INÍCIO e outra chamada FIM ... Alterando o valor delas, você pode criar um tempo personalizado para seu contador.


function contagem(){
  var inicio = 0;
  var final = 10;
  var contador = setInterval(function(){
    if(inicio <= final){
      document.getElementById('cont').innerHTML = '<br/><br/>Faltam ' + inicio + ' segundos';
      inicio = inicio+1;
    } else {clearInterval(contador);
    alert('obrigado por Aguardar'); // Alerta antes de abrir o link
    //window.location = 'https://templatesbloggerprofissional.blogspot.com/'; // Link Aqui
    }  },1000);
}


Para alterar o site de destino, basta apagar o símbolo de comentário "//" e adicionar o seu próprio site.

Essa função utiliza um "SetInterval" que se repete a cada 1 segundo... Verifica se o início é menor que o final, exibe na tela quantos segundos já se passaram e adiciona mais um segundo ao contador.

Quando chega no segundo final, exibe um alerta "Obrigado por aguardar" e abre o link.



Dicas Extras:

Você pode utilizar nosso Editor de códigos online para criar e personalizar seu código antes de adicionar ao seu site.

Pode também salvar seu projeto no computador em formato HTML através do bloco de notas.

Assista o vídeo para ver a criação na prática.



Espero que tenha gostado desse conteúdo ... Deixe um comentário com o seu feedback, Fica com Deus e até a próxima.




Nenhum comentário:

Postar um comentário

Deixe um comentário com seu Feedback sobre este Conteúdo.