Cara Membuat Popup Box Download Dengan Countdown Timer

Halo sob, pada postingan kali ini admin akan membagikan tutorial, cara membuat modal popup / popup box dengan tombol download dan countdown timer. Popup box ini sangat cocok di aplikasikan pada blog download, karena memiliki tampilan sederhana dan ringan.

Cara kerja popup box ini, ketika seseorang ingin mengunduh file dari blog kalian dan menekan tombol download, maka popup box ini akan muncul, kemudian didalamnya akan menampilkan iklan dan countdown timer. jika countdown timer sudah selesai, maka akan muncul tombol download dengan link tujuan kalian. Begitu kira - kira cara kerjanya. Oke langsung aja kita ketutorialnya.

Cara Membuat Popup Box Dengan Tombol Download Dan Countdown Timer

1). Langkah pertama masuk ke blogger > Tema > Edit Html

2). Selanjutnya tempelkan kode di bawah ini, di atas kode ]]></b:skin>

.buttons{display:inline-flex;align-items:center; margin:12px 6px 12px 6px;padding:10px 15px;outline:0;border:0; border-radius:2px;line-height:20px; color:#fefefe; background-color:#005af0; font-size:13px;white-space:nowrap;overflow:hidden;max-width:100%}
#button-download{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:2px;font-size:.8rem;line-height:1.3rem;background-color:#005af0;color:#fefefe}
.adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid}
.btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in}
[data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0}
[data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[data-ml-modal]:target .modal-overlay{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1}
[data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2}
[data-ml-modal] .modal-content{background:#fff;padding:23px 27px}
@media (max-width:767px){[data-ml-modal] .modal-dialog{margin:30% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}

3). Jika sudah salin kode dibawah ini dan tempelkan diatas kode </body>

<script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); var waktu = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { waktu--; if (waktu < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + waktu.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>

4). Langkah terakhir gunakan kode dibawah ini, untuk tombol downloadnya. terserah kalian mau ditaruh di tengah postingan atau di akhir postingan. Sesuaikan dengan kebutuhan kalian aja.

<p style="text-align: center;"><a class="buttons" href="#PopupDownload" id="get-download">Download</a></p>
<div data-ml-modal="" id="PopupDownload">
	<div class="modal-overlay"></div>
	<div class="modal-dialog">
		<div class="modal-content center">
          <div class="adpop-top"><font color='#222' style='font-size:17px;font-weight: bold'>
			Download Your file</font>
            <div class="ad-pop__close" onclick="document.getElementById(&quot;PopupDownload&quot;).style.display=&quot;none&quot;"><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
          </div>
          <br />
          <div>
         <!-- Kode iklan -->
</div>
          <br />
          <a class="button" href="url_here" id="button-download">Download File</a>
		</div>
	</div>
</div>

Ganti yang saya tandai sesuai dengan kebutuhan anda

5). Selesai

Demo

Nah itulah cara membuat popup box dengan tombol download dan countdown timer. Semoga postingan ini bermanfaat untuk kalian yang membutuhkan. Jika ada pertanyaan, silahkan berkomentar dibawah.

Klik Tombol Dibawah Untuk Menuju Link Anda

CONTINUE