Blogger

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ìn…

Hung.Pro.VN

Developer Windows

---

• 13/09/2017
• Views

• #Blogger
• #CSS
• #Javascript
• #Thủ Thuật

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

Previous post

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

Next post

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

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article