Cách Tạo Button Download Có Đếm Ngược Thời Gian

Xin chào các bạn đã quay trở lại với bài viết tiếp theo của Anh Tuấn Blog(. Hôm này tiếp tục với chủ để Blogger/Blogspot, mình sẽ hướng dẫn các bạn làm thế nào để có thể tạo được một Button Download có đếm thời gian và việc này sẽ giúp Blog chúng ta giảm tỉ lệ thoát.

Cách Tạo Button Download Có Đếm Ngược Thời Gian

Cách hoạt động của Button Download Có Đếm Thời Gian

Khi nhấn vào button, sẽ thực hiện một đoạn JS thực hiện đếm thời gian, sau khi hết thời gian chờ, người dùng sẽ phải tiếp tục nhấn vào Button một lần nữa để đi tới trang đích

Demo Button Download Countdown Time

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 = "<astext>Please wait <ascolor>" + counter.toString() + " </ascolor>second.</astext>"
            }
        }, 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=https://www.ngohoanganhtuan.net/2021/07/them-pricing-table-vao-blogspot-bang-htmlcss.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>

Các bạn thay phần Bôi đen bằng URL của các bạn nhé!

Vậy đó, rất đơn giản chỉ cần vài bước mình đã hướng dẫn các bạn thực hiện thành công cách thêm Button Download đếm ngược thời gian cho Blogger/Blogspot. Chúc các bạn thành công!