tháng 9 13, 2017

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



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



+ Like Cho Mình Nếu Bài Viết Hay Và Hữu Ích Nhé ♥
+ Nếu Bạn Cần Ứng Dụng Gì Thì Cứ Vào Bài Đăng Đó Và Để Lại Email. Rồi Mình Gửi Cho Nhé !
+ Thương Xuyên Vào Blog BomKhung.Info Để Cập Nhật Ứng Dụng Mới Nhất Từ Bờm Khùng Nhé ^^
+ Bờm Khùng Blogger Đảm Bảo 100% Không Có VIRUS Hay BOT NET Các Kiểu Nhé ♥ !


LIKE and Share this article: :

Để viết một bức thư sử dụng in đậm <strong> </ strong> hoặc <b> </ b>.
Để viết chữ in nghiêng sử dụng <em> </ em> hoặc <i> </ i>.
Để viết một sử dụng gạch dưới thư <u> </ u>.
EmoticonEmoticon