Hướng dẫn thêm button download hẹn giờ dạng pop-up trong Blogger

Trong bài viết này, Vozshare sẽ chỉ cho bạn cách bạn có thể thêm button download hẹn giờ dạng pop-up trên Blogger. Bất cứ khi nào ai đó nhấp vào nút tải xuống, nó sẽ hiển thị một cửa sổ dạng pop-up lên với bộ đếm ngược 20 giây và bạn có thể đặt quảng cáo adsense trên đó.

 

Bằng cách này, bạn có thể giữ chân khách truy cập lâu hơn trên bài đăng trên Blog của mình và giảm Tỷ lệ thoát cũng như tăng thời gian tạm dừng tổng thể. Vì vậy, nó giúp tăng mức độ tương tác vào trang web và giúp ích trong việc SEO.

Cách thêm button download hẹn giờ dạng pop-up trong Blogger</b >

Bước 1: Đi tới bảng điều khiển Blogger</strong > và Mở một bài đăng trên Blog.

Bước 2: Sao chép mã CSS & Javascript</strong > và dán nó lên trên thẻ </body></mark >.

   <b:if cond='data:view.isPost'>
        <script>
//<![CDATA[
var downloadButton = document.getElementById("Popup_Download_btn"); 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:if cond=’data:view.isPost’>
<style>
#Popup_Download_btn{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:#303e9f;color:#ffffff; font-weight: bold;}
.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 .Popup_container{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] .Popup_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}
.icon {display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.button .icon.download {
background-image: url(“data:image/svg+xml,<svg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%23fefefe’ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’1.5′><path d=’M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3’/><polyline points=’8 12 12 16 16 12’/><line x1=’12’ x2=’12’ y1=’2′ y2=’16’/></svg>”);
}
</style>
</b:if>

Bước 3: Bây giờ hãy dán mã HTML</strong > và thay thế liên kết nút Tải xuống , </strong >id Nhà xuất bản</strong > Adsense và mã vùng quảng cáo</strong > trên đó.

<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download"><i class='icon download'></i>Download</a></p><div data-ml-modal="" id="PopupDownload">	<div class="Popup_container"></div>	<div class="modal-dialog">		<div class="Popup_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; fill: black;" 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;">	<!-- thay mã qc ads tại đây-->
         <ins class="adsbygoogle" style="display:block"     data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"     data-ad-format="auto" data-full-width-responsive="true"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});</script></div>          <br />          <a class="button" href="#" id="Popup_Download_btn"><i class="icon download"></i>Download File</a></div></div></div> 

Bước 4: Bây giờ nút Hẹn giờ tải xuống Cửa sổ bật lên của bạn sẽ hoạt động trên trang web Blogger.

Cửa sổ pop-up bật lên tải xuống này hoàn toàn đáp ứng và hoạt động tốt trên tất cả các loại thiết bị.</span >

Demo Trực Tiếp</a >Ở đây, lưu ý rằng mã nút hẹn giờ này sẽ chỉ tải trên trang bài viết</strong > khi chúng ta đã đặt điều kiện if</strong > mà thôi. nếu bạn muốn sử dụng nó trên các trang thì bạn có thể xóa nó khỏi mã của mình.

Nếu bạn muốn thay đổi thời gian đếm ngược thì bạn có thể thay đổi giá trị trong mã Javascript. Tìm mã này trên JS.

[ var counter = 20; ]</strong >{codeBox}

 

Ở đây, giá trị 20 đề cập đến 20 giây</strong > , bạn có thể thay đổi giá trị theo ý mình.

Lợi ích của Hẹn giờ tải xuống</strong >

Kết luận

Tôi hy vọng bạn đã thêm thành công button download hẹn giờ dạng pop-up vào trang web Blogger của mình.

 

Lưu ý</strong > : Nếu mã này không hoạt động bình thường trên chủ đề của bạn thì bạn có thể sử dụng mã hẹn giờ tải xuống cửa sổ bật lên thay thế được cung cấp bên dưới.

Click To Download Download Nếu bạn gặp bất kỳ vấn đề gì trong quá trình cài đặt nút Đồng hồ đếm ngược, bạn có thể hỏi tôi trong phần bình luận.