Thêm nút tải xuống dạng popup với đồng hồ đếm ngược và quảng cáo trên Blogspot

Tạo nút tải xuống dạng popup với đồng hồ đếm ngược và có thể cài đặt thêm quảng cáo trên popup trong bài viết trên Blogger là một thủ thuật kéo dài thời gian trên blog của khách truy cập và đồng thời có thể kết hợp thêm thu nhập từ quảng cáo cho blog.

Cách thức hoạt động của thủ thuật gần giống như các nút tải xuống hẹn giờ khác, chỉ khác là nó nằm trên một tab thu gọn bật lên và tại đó có thể chèn thêm quảng cáo.

Có rất nhiều lợi ích có thể thu được từ phiên bản nút tải xuống cửa sổ bật lên hẹn giờ này, một số trong số đó là:
- Không cần tạo trang mới
- Dễ dàng thêm nút và tùy chỉnh
- Popup ở trên bài viết chính
- Giảm tỷ lệ thoát của bài viết chính

Xem thử:
Demo

Hướng dẫn cài đặt nút tải xuống hẹn giờ popup trên blog chính

Bước 1: Thêm css vào trước thẻ </head>

<b:if cond='data:view.isPost'>
  <style>/*<![CDATA[*/
#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 2: Thêm javascript vào trước 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>

Bước 3: Lưu mẫu
Khi đăng bài có đường dẫn tải xuống, bên soạn thảo HTML dùng code sau:

<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-#################" data-ad-format="horizontal" data-ad-slot="########" data-full-width-responsive="false" style="display: block;"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          <br />
          <a class="button" href="Link tải cần đến" id="button-download">Download File</a>
		</div>
	</div>
</div>