Como fazer uma caixa de download com contagem regressiva para o Blogger

Se você estiver fornecendo qualquer arquivo em seu site para download, esta caixa de download será útil para você. Alguns sites mostram uma contagem regressiva antes de iniciar o download ou redirecionar para o destino final.

© Vtrick Design | Caixa de download com contagem regressiva

Hoje faremos o Download Box com Countdown Timer para o site do Blogger. Quando os usuários clicarem no botão de download, uma contagem regressiva será iniciada antes do início do download.

Antes de começar, vamos dar uma olhada em sua demonstração.

Música_Wallpaper.png Música 3.05MB 1920×1080 .png

---

Tabela de Conteúdo

1. Como fazer uma caixa de download de contagem regressiva?
2. Termos de Uso
3. Conclusão

Como fazer uma caixa de download de contagem regressiva?

Criar uma caixa de download de contagem regressiva para o seu site do Blogger não exigirá muito conhecimento sobre HTML, CSS ou JS, porque já o projetei para você. O que você precisa fazer é implementar os códigos no lugar certo em seu XML de tema do Blogger.

Importante!
Antes de começarmos a adicionar códigos em XML, recomendo que você faça um backup do seu tema atual. Por acaso, se ocorrer algum problema, você poderá restaurá-lo posteriormente.

Passo 1: Primeiro de tudo, faça login no seu Painel do Blogger

Etapa 2: no Painel do Blogger, clique em Tema.

Etapa 3: Clique no ícone de seta para baixo ao lado do botão 'personalizar'.

Etapa 4: Clique em Editar HTML, você será redirecionado para a página de edição.

Etapa 5: Agora pesquise o código ]]></b:skin> e cole os seguintes códigos CSS logo acima para dele.

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 Download Box by Vtrick Design */
.dldCo{
  --boxC : #08102b; /* Cor da fonte */
   --boxBg : #fffdfc; /* Plano de fundo do contêiner */
   --fontF : herdar; /* Família de fontes */
   --svgS : #fffdfc; /* Traço SVG do botão */
   --btnBg : #482dff; /* Plano de fundo do botão */
   --darkC : #fffdfc; /* Cor da fonte escura */
   --darkBt : #e91e63; /* Fundo do botão escuro */
   --darkBa: #2d2d30; /* Fundo escuro Alt */
   --darkBs: #252526 ; /* Segundo plano de fundo escuro */
}
.dldCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}
.dldBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dldTp{display:flex;flex-direction:row} .dldIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .dldIm::before{content:attr(data-text);opacity:.7} .dldIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .dldIm[style]:not([style=''])::before{display:none}
.dldSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} .dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .dldSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}
.dldIn{flex-grow:1;width:calc(100% - 115px)} .dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dldIn >*::before{content:attr(data-text) ': ';opacity:.8}
.dldBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .dldBt.dldDl{visibility:visible;opacity:1} .dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}
.dldSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.dldCo.dldAlt{margin:30px 0 70px} .dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .dldCo.dldAlt .dldSv{opacity:1} .dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} .dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} .dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .dldCo{color:var(--darkC)} .darkMode .dldBx{background:var(--darkBs)} .darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} .darkMode .dldSv .b{stroke:#404045} .darkMode .dldSv .c{stroke:var(--darkBt)} .darkMode .dldBt{background:var(--darkBt)} .darkMode .dldMe span{color:var(--darkBt)}

Etapa 6: Agora adicione o seguinte JavaScript logo acima à tag </body>. Se você não encontrá-lo, provavelmente já foi analisado, que é </body>.

<script>
  /*<![CDATA[*/
  /* Countdown Download Script by Vtrick Design */
  function download(link, time, newtab, id){
    var dldCo = document.querySelector(id),
        dldMe = document.querySelector(id + ' .dldMe'),
        dldPg = document.querySelector(id + ' .dldPg'),
        dldDl = document.querySelector(id + ' .dldDl'),
        dldRt = document.querySelector(id + ' .dldRt'),
        dldLf = time;
    
    dldMe.innerHTML = 'Iniciando o download em <span>' + dldLf + '</span> segundos...';
    dldCo.classList.add('dldAlt');
    
    var downloadTimer = setInterval(function timeCount(){
        dldLf -= 1;
        dldMe.innerHTML = 'Iniciando o download em <span>' + dldLf + '</span> segundos...';
        dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);

      if(dldLf <= 0){
        clearInterval(downloadTimer);
        dldMe.innerHTML = 'Por favor, espere...';
        
        if (newtab == 'true'){
          window.open(link, '_blank');
        } else {
          window.location.href = link;
        };
        
        dldRt.onclick = function (){
          if (newtab == 'true'){
            window.open(link, '_blank');
          } else {
            window.location.href = link;
          }
        };
        
        setTimeout(() => {
          dldCo.classList.remove('dldAlt');
          dldCo.classList.add('dldRty');
        }, 4000);
      }
    }, 1000);
  };
  /*]]>*/
</script>

Etapa 7: Salve as alterações

Etapa 8: Pronto! Adicione os seguintes códigos HTML em suas postagens de blog por meio da visualização HTML para adicionar a caixa de download da contagem regressiva.

<!--[ Countdown Download Box by Vtrick Design ]-->
<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Nome'>Música_Wallpaper.png</span>
        <span data-text='Categoria'>Música</span>
        <span data-text='Tamanho'>3.05MB</span>
        <span data-text='Resolução'>1920×1080</span>
        <span data-text='Extensão'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Substitua as partes marcadas conforme sua necessidade, ou seja,
# com link para download.
10 com contagem regressiva em segundos.< br>false por true se você deseja abrir o link em uma nova guia.
Para adicionar várias caixas de download, substitua download1 e #download1 ou seja,
Para a segunda caixa de download, substitua download1 por download2 e #download1 por # download2.

Termos de Uso

Para apreciar nossos trabalhos, considere manter os créditos em códigos.

Nós não permitimos reescrever esta postagem de nenhuma maneira. Não copie esta postagem, códigos ou qualquer parte deste artigo sem permissão, é estritamente proibido. Se você fizer isso, Ações legais serão tomadas.

Conclusão

Trata-se de criar uma caixa de download de contagem regressiva para postagens de blog. 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.

© Direitos autorais:
www.vtrickplus.eu.org