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

 

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à chuyên nghiệp 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. 

Bước 4: lưu code lại là okii. 

Để hiện popup download thì. Mọi người hãy tạo một bài đăng như bình thường và dán đoạn code  button download vào nơi mà bạn muốn hiển thị là được nhá. 

<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. 

Okii thì mình vừa chia sẽ cho các bạn cách chúng ta có thể tạo ra popup download có thời gian đếm cực đẹp, nếu có thắc mắc gì thì nãy comment bên dưới cho mình biết nhá, chúc các bạn thành công nhe.