Hướng Dẫn Tạo Button Download (Countdown) Chuẩn Responsive Cho Blogspot
 |
| Button Download (Countdown) |
Tạo Button Download (Countdown) Cho Blogspot - Button Download là một tính năng cần có trong một blog hoặc website, đặc biệt nếu blog đó có chuyên mục chứa nội dung tải về như Ứng dụng, Video hoặc các nội dung khác cung cấp file để tải xuống.
Lợi ích của việc có Button Download là để giúp người dùng hoặc khách truy cập dễ dàng nhấn vào để nhận file được cung cấp bởi quản trị viên blog, thường được lưu trữ trên hosting hoặc các dịch vụ lưu trữ đám mây miễn phí của bên thứ ba như Google Drive, MediaFire, OneDrive, Mega, v.v.
Hệ thống tải xuống được hiển thị bởi mỗi chủ sở hữu blog/website sẽ khác nhau, có Button Download khi nhấn sẽ thực hiện liên kết trực tiếp đến trang tải xuống nơi file được lưu trữ, hoặc cũng có thể tải xuống trực tiếp khi nhấn vào nút sẽ tự động tải file về, thường hiển thị đếm ngược hoặc thời gian chờ.
Cách Tạo Button Download Có Hẹn Giờ Đếm Ngược trên Blogger
Trong bài hướng dẫn này, mình sẽ chia sẻ cách tạo button tải xuống với hẹn giờ đếm ngược, khi khách truy cập nhấn vào thì thời gian đếm ngược sẽ bắt đầu và file sẽ tự động được tải xuống.
Lợi ích của việc cài đặt Button tải xuống với hẹn giờ đếm ngược là để giảm tỷ lệ thoát trang của blog khi khách truy cập truy cập vào trang đó.
Hướng dẫn chi tiết thực hiện
-
Nếu bạn chưa có cài đặt Font Awesome thì cài đặt thêm, bằng cách thêm đoạn code sau dưới
</head> -
Còn nếu bạn nào có cài Font Awesome rồi thì chỉ cần sử dụng đoạn code bên dưới
-
Nếu vậy, hãy nhấp vào Lưu để thực hiện những thay đổi bạn đã thực hiện đối với mẫu blogger của mình.
-
Sau khi thực hiện xong các bạn lưu chủ đặt và đặt đoạn code dưới vào bài đăng, bất kỳ vị trí nào bạn muốn hiển thị Button Download
<script type="text/javascript">
// CSS Ready
function loadCSS(url, before, media) {
"use strict";
var elem = window.document.createElement("link");
var ref = before || window.document.getElementsByTagName("script")[0];
elem.rel = "stylesheet";
elem.href = url;
elem.media = "only x";
ref.parentNode.insertBefore(elem, ref);
setTimeout(function() {
elem.media = media || "all";
});
}
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
</script><script type="text/javascript">
//<![CDATA[
function generate() {
var countdown, downloadElem = document.getElementById("downloadx"),
buttonElem = document.getElementById("btnx"),
downloadLink = document.getElementById("downloadx").href,
timer = 10,
displayElem = document.createElement("span");
downloadElem.parentNode.replaceChild(displayElem, downloadElem);
countdown = setInterval(function() {
if (--timer < 0) {
displayElem.parentNode.replaceChild(downloadElem, displayElem);
clearInterval(countdown);
window.location.replace(downloadLink);
downloadElem.style.display = "inline";
} else {
displayElem.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> Tập tin sẵn sàng để tải xuống trong " + timer.toString() + " giây....";
buttonElem.style.display = "none";
}
}, 1000);
}
//]]>
</script><style type="text/css">
/* Download Counter Box */
#btnx {
cursor: pointer;
padding: 10px 20px;
border: 0;
border-radius: 3px;
background: #fff;
color: #6750a4;
float: right;
text-transform: capitalize;
font-weight: 500;
transition: all 0.5s;
}
#btnx:hover,
#downloadx:hover {
background: #6750a4;
color: #fff;
outline: none;
}
.down-limit {
display: block;
margin: 0 auto;
border-radius: 4px;
/* Thêm gradient cho background */
background: linear-gradient(to bottom right, #6750a4, #5800ff);
}
.inner-down {
/* Thay đổi màu nền và màu chữ */
background: linear-gradient(to bottom right, #6750a4, #5800ff);
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-down {
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: #6750a4;
float: right;
text-align: center;
font-size: 14px;
text-transform: capitalize;
}
.info-wrapper span {
display: inline-block;
line-height: 38px;
float: right;
}
.file-description {
display: block;
}
.file-description span {
margin-right: 3px;
}
@media screen and (max-width:640px) {
.down-limit {
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;
}
.info-wrapper span {
float: none;
width: 100%;
text-align: center;
}
.file-description {
text-align: center;
}
}
</style>
<div class="down-limit">
<div class="inner-down">
<div class="info-wrapper">
<div class="file-info">
Thành Trương Blog
</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</button>
<a href="LINK DOWNLOAD" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Re-download</a>
</div>
<div class="file-description">
<span class="uploader"><i aria-hidden="true" class="fa fa-user-circle"></i> THÔNG TIN FILE </span>
<span class="file-size"> <i aria-hidden="true" class="fa fa-file"></i> File Size 15MB </span>
</div>
</div>
<div class="note-down">
Nếu không tự động tải xuống, hãy nhấp vào tải xuống lại. Và nếu liên kết bị hỏng, vui lòng báo cáo qua trang liên hệ của blog này.</div>
</div>Kết luận
Đó là Hướng Dẫn Tạo Button Download (Countdown) Chuẩn Responsive Cho Blogspot, tính năng này rất phù hợp để sử dụng trên blog có nội dung tải xuống hoặc tên khác.
Hy vọng rằng với bài viết này có thể giúp bạn tìm kiếm giao diện nút tải xuống hấp dẫn với tính năng đếm ngược.
