MASIGNASUKAv101
5014812706744541007

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
Add Comments
Thứ Tư, 15 tháng 5, 2019
Xin chào mọi người. Hôm nay Blogger V sẻ hướng dẫn mọi người tạo box download có bộ đếm giây ngược để tải về. Không vòng vo co đo nữa sau đây mình xin hướng dẫn chi tiết

Các bước thực hiện :

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

Mở Blogger > Chủ Đề > Chỉnh sửa HTML và thêm đoạn mã này trước </head> hoặc
&lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>
/* Download Counter Box */
#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">
Blogger 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> Blogger V</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