Создайте кнопку загрузки с таймером

Как создать кнопку загрузки в Blogger с таймером? В этой статье вы получите подробное пошаговое руководство по этой теме... Сегодня я предлагаю вам краткое руководство о том, как добавить кнопку загрузки в blogger с таймером времени. 

Пример:


Как создать кнопку загрузки?

Шаг 1) добавить CSS:

Вам нужно выполнить указанные шаги, чтобы создать на своем сайте красивую кнопку загрузки, как показано выше.

/* Download Counter Box */

#btnx {

    cursor:pointer;

    padding:10px 20px;

    border:0;

    border-radius:3px;

    background:#fff;

    color:#FF0000;

    text-transform:capitalize;

    font-weight:500;

    transition:all 0.5s;

}

  #btnx:hover, #downloadx:hover {

  background:#1E90FF;

  color:#fff;

  outline:none;

  text-decoration:none;

}

  .batas-downx{

  display:block;

  margin:0 auto;

  border-radius:14px;

}

  .dalam-downx{

  background:#242424;

  color:#fff;

  padding:0px 20px;

  display:block;

  border-radius:14px;

  }

  .file-info{

  color:#fff;

  display:inline-block;

  font-size:1.2em;

  line-height:38px;

  text-align:left;

  }

  .catatan-downx{

  padding:20px;

  background:#f7f7f7;

  border-bottom-right-radius:3px;

  border-bottom-left-radius:3px;

  color:#555;

  font-size:14px;

  }

  #downloadx{}

  #downloadx{

  padding:10px 20px;

  border-radius:3px;

  background:#007af5;

  color:#fff;

  display:block;

  text-align:center;

  font-size:14px;

  text-transform:capitalize;

  }

  .bungkus-info {

  display:block;

  line-height:58px;

  text-align:center;

  margin:0 auto;

  }

  .bungkus-info span{

  display:block;

  line-height:58px;

  text-align:center;

  margin:0 auto;

  }

  .file-deskripsi{display:block; }

  .file-deskripsi span{margin-right:3px;}

  @media screen and (max-width:640px){

  .batas-downx{

    float:none;

    width:100%;

  }

}

  @media screen and (max-width:320px){

  .file-info{

    display:block;

    text-align:center;

  }

   #btnx, a#downloadx{width:100%;margin-bottom:10px;}

  .bungkus-info span{float:none;width:100%; text-align:center;}

  .file-deskripsi{text-align:center;}

}  

.button-dowmload {padding:10px 20px;border-radius:3px;background:#fff;color:#007af5;text-align:center;font-size:14px;text-transform:capitalize}  

Вам нужно найти  ]]></b:skin> в HTML-коде вашей темы блога. После того, как вы его нашли, просто вставьте код CSS прямо над ним.

Шаг 2) добавить JavaScript:

Вам нужно найти </body> в вашем Html-коде и вставить код javascript точно над ним.

<!--Download Button-->

<script type="text/javascript">//<![CDATA[function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=5,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> Пожалуйста, подождите "+l.toString()+" Сек....",t.style.display="none")},1e3)}//]]></script>

Шаг 3) добавить HTML:

Вы должны вставить данный HTML-код в сообщение или на страницу, где вы хотите использовать кнопку загрузки.

<div class="batas-downx">

<div class="dalam-downx">

<div class="bungkus-info">

<button id="btnx" onclick="generate()">Скачать</button> 

  <a class="button-dowmload" href="#" id="downloadx" style="display: none;" target="_blank">Скачать Сейчас</a>  

</div>

</div>

</div>  

Если вы хотите использовать кнопку загрузки в своем сообщении, просто перейдите к новому сообщению и щелкните HTML вверху, а затем вставьте туда код.

Чтобы изменить заголовок, URL-адрес и размер файла, отображаемые в счетчике загрузок, вы можете просто отредактировать HTML-код на свой собственный.


Tags: