Thêm button download có đính kèm thông tin tệp với thời gian đếm ngược cho web/blog
Nút download này đi kèm với một bộ đếm ngược giúp giảm tỷ lệ thoát trang của bạn rất nhiều. Bạn có thể tự mình quản lý thời gian của button. Ngay khi hết thời gian truy cập. Tệp bắt đầu tải xuống tự động. Trong nút download này, bạn cũng đã đưa ra tùy chọn tiêu đề, tên tệp, kích thước tệp và mô tả ngắn. Mà bạn có thể chỉnh sửa và thay đổi theo chính mình.
 |
| Xem trước nút download |
Nếu bạn muốn thêm một hộp tải xuống vào blog của bạn sẽ nâng cao giao diện của blog của bạn. Vì vậy, bài viết này có thể giúp bạn rất nhiều. Để thêm nút download vào blog của bạn.
Hướng dẫn thêm button download có đính kèm tệp
- Đầu tiên, bạn cần mở Blogger.
- Sau đó chọn Menu Chủ đề và tiền hành chỉnh sửa HTML.
- Tìm kiếm (Ctrl + F) </head>
- Sau đó, bạn phải thêm mã trước khi </head>
- Bấm lưu Chủ đề.
<script type='text/javascript'>//<![CDATA[//CSS Readyfunction 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>
Lưu ý: Nếu blog bạn đã có fontawesome rồi thì hãy xóa loadCss
Tương tự với đoạn mã dưới đây
<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'/> Vui lòng chờ sau "+l.toString()+" giây....",t.style.display="none")},1e3)}
//]]>
</script>
Bước 2: Thêm CSS
Tương tự với CSS, hãy đặt đoạn mã dưới đây vào trước thẻ ]]></b:skin>, ngoài ra đặt ở trước thẻ </head> hay thẻ </body> cũng được miễn bạn đặt nó ở trong thẻ <style> .. </style>
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#5480fb;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#1f51db;color:#fff;outline:none}.limit-downx{display:block;margin:0 auto;border-radius:4px}.In-downx{background:#5480fb;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}.Note-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:#5480fb;float:right;text-align:center;font-size:14px;text-transform:capitalize}.wrap-info span{display:inline-block;line-height:38px;float:right}.file-description{display:block}.file-descriptionspan{margin-right:3px}@media screen and (max-width:640px){.limit-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}.wrap-info span{float:none;width:100%;text-align:center}.file-description{text-align:center}}
Cách sử dụng
<div class="limit-downx"><div class="In-downx"><div class="wrap-info"><div class="file-info">Title</div><button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button><a id="downloadx" href="#lienketdownload" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Thử lại</a></div><div class="file-description"><span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Tên file</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>Kích thước file 30mb</span></div></div><div class="Note-downx">Nếu nó không được tải xuống tự động, vui lòng nhấp vào Tải xuống một lần nữa.Bấm vào đây để báo link hỏng.</div></div>
Sửa lại những thông tin cho phù hợp với thông tin của các bạn.
