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

Tìm kiếm trên Google thì có rất nhiều trang chia sẻ cách tạo Button Demo và Download 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.

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é!