Hướng dẫn tạo nút download có bộ đếm thời gian

Share:
Hướng dẫn tạo nút download có bộ đếm thời gian

Hướng dẫn tạo nút download có bộ đếm thời gian

Fantasy đã đăng Sunday, 31 May 2020
Hiện có lượt xem và 0 bình luận

  • Xem toàn trang
  • Nội Dung

    Bài Viết Liên quan

    Tác giả


    - Trước khi thực hiện phải đảm bảo rằng web bạn đã cài đặt FontAwsome

    <script type='text/javascript'> //<![CDATA[ 
    //CSS 
    Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>
    Nếu chưa có thì thêm vào trước thẻ đóng </body>


    Mở Blogger > Chủ Đề > Chỉnh sửa HTML và thêm đoạn mã này trước </head> 



    <style type='text/css'>  
    #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px} @media screen and (max-width:640px){.batas-downx{float:none;width:100%}} @media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}} </style>

    Sau đó thêm đoạn mã này trước </body> hoặc có thể thêm trước </head>


    <script type='text/javascript'> //<![CDATA[ 
    function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> Tập tin sẳn sàn tải về trong "+l.toString()+" giây....",t.style.display="none")},1e3)} //]]> </script>


    Bạn có thể thay đổi thời gian tùy ý trên mã được đánh dấu l=10 số 10 có nghĩa là thời gian đếm ngược là 10 giây



    Sau đó bấm vào nút Lưu Chủ Đề

    Tiếp theo để chèn code box dowload này vào bài viết điều các bạn cần làm là bật sang chế độ HTML trong bài viết và thêm đoạn code sau đây

    <div class="container"> <div class="batas-downx"> <div class="dalam-downx"> <div class="bungkus-info"> <div class="file-info"> FShared V File </div> <button onclick="generate()" id="btnx"><i class="fa fa-cloud-download"
    aria-hidden="true"></i> download</button> <a id="downloadx" href="Linkdownload" style="display:none">
    <i class="fa fa-cloud-download" aria-hidden="true"></i> download</a> </div> <div class="file-deskripsi"> <span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> FSHARED.VN</span>
    <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> File Size 300MB</span> </div> </div> <div class="catatan-downx"> Bấm vào nút download và đợi 10s để tài về </div> </div> </div>

    Các bạn có thể tùy chỉnh nội dung ở mục mình đánh dấu sao cho phù hợp với ý của các bạn là được
    Chúc các bạn thành công!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    No comments:

    FSHARED