Thêm Popup Nhấp vào nút Tải xuống với Đồng hồ đếm ngược và Quảng cáo trên Blogger

Có thể hầu hết những người đọc bài viết này đã biết Nút tải xuống bật lên hẹn giờ là gì, nhưng xin nhắc lại, nó sẽ được giải thích lại ở đây. Hẹn giờ Nút tải xuống bật lên là một nút trên trang web hoặc blog được sử dụng để giữ chân người xem trước khi người dùng chuyển đến liên kết đích. Trong bài viết này, chúng tôi sẽ thảo luận về cách tạo nút tải xuống bật lên theo thời gian trên Blogger.

Nút tải xuống bật lên với các tình huống và lợi ích của quảng cáo và đếm ngược

Cách thức hoạt động của nó gần giống như các nút tải xuống hẹn giờ khác, ngoại trừ nút tải xuống bật lên Hẹn giờ vẫn còn. Kịch bản là khi khách truy cập muốn tải xuống một tệp nhất định trên blog, họ sẽ đợi đến một bộ đếm thời gian nhất định từ blog trước khi cuối cùng chuyển đến liên kết tải xuống tệp.

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
• Ở trên bài viết chính
• Giảm tỷ lệ thoát của bài viết chính
• Sau khi bạn thêm nút này vào bài đăng của mình hoặc trên trang blogger của bạn và nhấp vào nút, một cửa sổ bật lên sẽ xuất hiện và nó sẽ chứa thời gian đã chỉ định. Nếu hết thời gian, nút tải xuống sẽ xuất hiện và bạn có thể nhấp vào đó.

Cách thực hiện

Bước 1: Các bạn đăng nhập vào trang Blogger.com
Bước 2: Nhấn vào Chủ đề và chọn Chỉnh sửa HTML
Bước 3: Thêm 1 đoạn CSS ngắn cho hiển thị Thời gian

Các bạn copy đoạn Code dưới đây và dán vào trước thẻ đóng </head> hoặc vào Bài đăng bạn muốn sử dụng Button

<style>
    ascolor {
        color: #214ECF;
        font-size: 1.5em
    }
    
    astext {
        font-weight: bold;
        font-family: var(--font-body-alt)
    }
</style>

Bước 4: Các bạn Copy đoạn JS dưới đầy và chèn trước </body> hoặc ở Bài viết muốn dùng Button này

Việc các bạn thêm JS ở những bài đăng các bạn cần, sẽ tối ưu Load được ở trang chủ, bớt tải JS

<script>
    var downloadButton = document.getElementById("download");
    var counter = 15;
    var newElement = document.createElement("p");
    newElement.innerHTML = "";
    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() + " second."
            }
        }, 1000)
    };
    var clickbtn = document.getElementById("btn");
    clickbtn.onclick = startDownload;
</script>

Bước 5: Các bạn nhấn Lưu 
Bước 6: Các bạn chèn đoạn Code sau vào bài viết cần sử dụng Button đếm ngược thời gian

<center><a class="button" href="/p/redirect.html?t=hhttps://www.seolentop.pro/2022/12/mot-so-yeu-to-quan-trong-can-toi-uu-e.html" id="download"><i class="icon download"></i> Click To Download </a>
<button class="button" id="btn"><i class="icon download"></i> Download </button></center>

Click To Download