Ads Đầu Trang

Tạo button Download có đếm số (countdown) chuẩn responsive cho Blogger

Responsive Advertisement
Tìm kiếm trên Google thì có rất nhiều trang chia sẻ cách tạo Button DemoDownload rất nhiều nhưng hầu như không có ai chia sẻ Button Download có đếm số (countdown) cả. Nay mình lang thang tìm được Button Download đẹp này nên share lại cho các bạn tiện sử dụng.

Tạo button Download có đếm số (countdown) chuẩn responsive cho Blogger

Cái hay của Button này là khi các bạn click vào nút TẢI VỀ là nó sẽ hiển thị đếm số ngược (countdown) và tự động chuyển đến link download của bạn khi hết thời gian đếm số.

Khồng dài dòng nữa bây giờ mình tiến hành chia sẻ code cho các bạn luôn

Button Download Countdown Responsive Blogspot

Code CSS
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0090b8;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:linear-gradient(to bottom right, DarkCyan, MediumSpringGreen);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}}

Code Javascript
<script type="text/javascript">
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=6,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'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>

Code HTML chèn vào bài viết
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info"><i aria-hidden="true" class="fas fa-file-download"></i>
<b>File Download</b> <i aria-hidden="true" class="fas fa-chevron-circle-right"></i></div>
<button id="btnx" onclick="generate()" target="_blank"><i aria-hidden="true" class="fa fa-cloud-download"></i> <b>TẢI VỀ</b></button> <a href="link-download" id="downloadx" style="display: none;" target="_blank">Downloading</a><div style="text-align: left;">
File Size: x MB. No ADS</div></div></div></div>

Lời kết

Với 3 đoạn code không quá khó trên thì việc tạo một button Download có đếm số (countdown) chuẩn responsive cho các Blogger là hết sức dễ dàng đúng không nào. Chúc các bạn thành công, nếu có thắc mắc hay đóng góp gì thì comment ở dưới nhé!

Đăng nhận xét

13 Nhận xét

  1. Bổ uých ❤️❤️❤️

    Trả lờiXóa
  2. Đoạn css kia mình mod màu mà ta :v

    Trả lờiXóa
  3. Anh zai qua thăm Blog em nhé 😂😂😂
    www.tranthangit.tk

    Trả lờiXóa
  4. ad ơi lm sau vs 1 code java mà sử dụng đc nhiều button trong 1 bài đăng v

    Trả lờiXóa
    Trả lời
    1. javascript thì bạn phải chèn trong template chứ, chèn trên thẻ /head

      Xóa
  5. chèn như thế nào mới đung v ad

    Trả lờiXóa
  6. ad xem thử bài viết nay đi " https://www.killerteammod.tk/p/dung-luong-9mb-chuc-nang-giam-toi-dung.html " e đang muốn sử dụng nhiều code button html trong 1 bài đăng mà khi e bấm tải nó lỗi, mog ad giúp

    Trả lờiXóa