Tạo Button Download với hiệu ứng thời gian đếm ngược cho blogspot

Bạn muốn trau truốt blog của mình, bạn muốn blog của mình thêm cầu kì hay đơn giản bạn muốn khách ghé thăm blog của bạn được lâu hơn...

Bạn muốn tạo ấn tượng với Button Download của mình, Hôm nay mình sẽ hưỡng dẫn các bạn cách để tạo ra Button Download hoặc là Demo với hiệu ứng thời gian đếm ngược.

Cách làm:


Bước 1: Dán đoạn Javascript này vào trên thẻ </head> hoặc </body>

<script type="text/javascript">
    //<![CDATA[
    function generate() {
        var linkDL = document.getElementById("download"),
            btn = document.getElementById("btn"),
            direklink = document.getElementById("download").href,
            waktu = 10;
        var teks_waktu = document.createElement("span");
        linkDL.parentNode.replaceChild(teks_waktu, linkDL);
        var id;
        id = setInterval(function () {
            waktu--;
            if (waktu < 0) {
                teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
                clearInterval(id);
                window.location.replace(direklink);
                linkDL.style.display = "inline";
            } else {
                teks_waktu.innerHTML = "Sẽ chuyển hướng sau" + waktu.toString() + "";
                btn.style.display = "none";
            }
        }, 1000);
    }
    //]]>
    </script> 

Cần thay đổi: waktu = 10; Thời gian đếm ngược

CSS

#link-download {display: none}
    #btn {display: inline-flex;
        border-radius: 4px;
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFF!important;
        background-color: #22a1c4!important;
        margin: 5px;
        padding: 8px 20px;
        text-shadow: none;
        transition: all 1s;
    }

Cách sử dụng:

Vào phần bài viết chuyển sang chế độ HTML và Copy đoạn code dưới đây vào nơi muốn hiển thị

<button onclick="generate()" id="btn">Download</button> <a id="download" href="link-download" style="display:none">Download</a>

DEMO

Download

Chúc các bạn thành công.

Nguồn : Wee2k Blog