Tạo nút download popup có thời gian đếm

hí xin chào mọi người nha nay thì mình xin chia sẽ cho mọi người cách tạo một nút button download popup có thời gian đến nha.

Tạo nút download popup có thời gian đếm

với loại button download này thì giúp các bạn có thể nhận thêm lược hiển thị quảng cáo, giúp blogs của bạn thêm đẹp hơn và hứng thú hơn. 

okiii bắt đầu thôi nha. 

bước 1: các bạn truy cập vào trang quản trị của blogger --> chủ đề -->  chỉnh sửa HTML

bước 2: tìm thẻ </head> và dán đoạn code bên dưới vào phía trên thẻ </head> 

<b:if cond='data:view.isPost'>
  <style>
#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:10px;font-size:.8rem;line-height:1.3rem;background-color:#fdd929;color:#ff2121}
.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:20% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
</style>
  </b:if>

bước 3: tìm đến thẻ </body> và dán đoạn Javascript này vào phí trên thẻ </body>

<b:if cond='data:view.isPost'>
        <script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); var counter = 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 () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>

ở var counter = 20; thì các bạn hãy thay số 20 thành số giây chờ mà các bạn muốn. 

<p style="text-align: center;"><a class="button" 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">
			<h2 style="margin: 0px;">Download Your file</h2>
            <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 style="width: 660px;">
	<!-- ads here -->
         <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxx" data-ad-format="auto" data-ad-slot="xxxxx" data-full-width-responsive="true" style="display: block;"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          <br />
          <a class="button" href="url_here" id="button-download">Download File</a>
		</div>
	</div>
</div>

trong đó thì bên dưới <!-- ads here --> là mã ads thì các bạn hãy thay mã ads của các bạn vào, còn url_here thì các bạn điền link download mà các bạn muốn chuyển tiếp tới khi nhấn nút download.