Hello anh em!
Hôm nay mình chia sẻ một mẹo nhỏ nhưng khá là xịn dành cho những bạn nào đang chơi Blogspot để chia sẻ file: tạo button download có đếm ngược (countdown) – nhìn chuyên nghiệp, lại giúp giữ chân người dùng hiệu quả luôn.
Button Download Countdown là gì?
Button Download Countdown là nút tải xuống có hẹn giờ đếm ngược, thường thấy trên các blog chia sẻ ứng dụng, tài liệu, source code,... Thay vì click vào rồi tải ngay, người dùng sẽ phải chờ vài giây trước khi hệ thống tự động đưa họ đến link tải (hoặc tự tải về luôn).
Việc này tăng trải nghiệm người dùng, giảm bounce rate (tỷ lệ thoát trang) và giúp blog của bạn trông có đầu tư, đúng chuẩn dân dev chất chơi.
Lợi ích khi dùng nút tải xuống có đếm ngược
- Chuyên nghiệp hơn so với việc dán link thô
- Giữ người dùng lâu hơn giúp tốt cho SEO
- Responsive – hiển thị đẹp trên mọi thiết bị
- Có thể chèn nhiều nơi: bài viết, landing page, form tặng quà,...
Hướng dẫn tạo nút Download Countdown cho Blogspot
- Bước 1: Cài Font Awesome (nếu chưa có)
- Bước 2: Thêm JavaScript countdown
- Bước 3: CSS cho nút download đẹp và responsive
- Bước 4: Lưu chủ đề bằng cách nhấp vào biểu tượng ở góc trên bên phải của Trình soạn thảo HTML.
- Bước 5: Chèn đoạn HTML vào bài viết (chỗ bạn muốn hiển thị)
Dán đoạn sau vào phần </head> của template:
<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>Đoạn script tạo hiệu ứng đếm ngược trước khi tải file:
<script type="text/javascript">
//<![CDATA[
function generate() {
var countdown, downloadElem = document.getElementById("downloadx"),
buttonElem = document.getElementById("btnx"),
downloadLink = document.getElementById("downloadx").href,
timer = 10, //có thể tùy chỉnh thời gian đếm ngược
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: #2e7ade;
float: right;
text-transform: capitalize;
font-weight: 500;
transition: all 0.5s;
}
#btnx:hover,
#downloadx:hover {
background: #82b5ff;
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, #2e7ade, #82b5ff);
}
.inner-down {
/* Thay đổi màu nền và màu chữ */
background: linear-gradient(to bottom right, #2e7ade, #82b5ff);
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: #5777f9;
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">
TruongDevs
</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>Xem demo: Nếu bạn muốn xem trực tiếp nút Button Download (Countdown) hoạt động như thế nào, bạn có thể xem Demo - Button Download (Countdown) Cho Blogspot.
Lời kết
Vậy là xong anh em nhé! Chỉ với vài đoạn mã đơn giản, mình tin là ai cũng có thể tự tạo cho mình một button download có countdown chuẩn responsive trên Blogspot – không chỉ đẹp mà còn tăng trải nghiệm người dùng, giữ chân người đọc hiệu quả.
Nếu anh em đang xây dựng blog chia sẻ tài liệu, source code, video hay ứng dụng, thì đừng bỏ qua nút tải xuống có đếm ngược cho Blogspot này nha. Vừa chuyên nghiệp, vừa cải thiện chỉ số SEO, lại còn... nhìn “ngầu” nữa.
Hy vọng bài viết giúp ích cho anh em.Nếu thấy hay thì chia sẻ hoặc để lại bình luận bên dưới để mình có động lực ra thêm nhiều bài chất lượng khác nhé!
