Hello anh em! Hôm nay mình lại ngoi lên chia sẻ một mẹo nhỏ nhưng độ "thực chiến" thì cực kỳ xịn xò dành cho những bồ đang chơi hệ Blogspot để chia sẻ tài liệu, phần mềm hay source code. Đó chính là cách tạo button download có đếm ngược (countdown). Thủ thuật này không chỉ giúp blog trông chuyên nghiệp hơn mà còn là "vũ khí bí mật" giữ chân người dùng hiệu quả, giảm tỷ lệ thoát trang cực tốt. Cùng devshare.pro.vn bắt tay vào "độ" lại nút tải xuống ngay nhé!
Button Download Countdown là gì?
Button Download Countdown đơn giản là nút tải xuống được tích hợp thêm bộ đếm giờ (thường thấy trên các blog chia sẻ tài liệu, theme hay app). Thay vì anh em click vào là file tải về "nhanh như chớp", thì người dùng sẽ phải kiên nhẫn đợi vài giây trước khi link tải xuất hiện.
Việc này tuy nhỏ nhưng lại mang đến lợi ích khổng lồ: tăng time-on-site (thời gian onsite), giảm bounce rate (tỷ lệ thoát) cực chất và khiến website của bạn trông hệt như một dự án được code tay bởi các tay to chuyên nghiệp.
Lợi ích khi dùng nút tải xuống có đếm ngược
- Nâng tầm giao diện: Chuyên nghiệp, gọn gàng và xịn xò hơn hẳn việc chỉ ném một cái link thô kệch.
- Chuẩn SEO: Giữ chân người đọc ở lại trang lâu hơn, Google rất thích điều này!
- Chuẩn Responsive: Đoạn code được tối ưu để hiển thị mượt mà trên mọi thiết bị từ PC đến Mobile.
- Tính linh hoạt cao: Dễ dàng chèn vào bài viết, landing page, hay form chia sẻ quà tặng.
Lưu ý: Đoạn code dưới đây cực nhẹ, được viết bằng mã thuần nên không hề làm ảnh hưởng đến tốc độ load của trang. Anh em cứ yên tâm mà quất nhé!
Hướng dẫn tạo nút Download Countdown cho Blogspot
Anh em cứ làm từ từ theo các bước sau, đảm bảo 100% ăn ngay từ lần thử đầu tiên nhé.
Bước 1: Tích hợp thư viện Font Awesome
Để các icon (như đám mây tải xuống hay đồng hồ) hiển thị đẹp, anh em cần gọi thư viện Font Awesome. Nếu blog của bạn chưa có, hãy dán đoạn script sau vào ngay trước thẻ đóng </head> trong phần Chỉnh sửa HTML của Theme:
<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>Bước 2: Thêm JavaScript xử lý đếm ngược
Vẫn ở trong giao diện chỉnh sửa HTML của Blogger, anh em kéo xuống và dán đoạn mã xử lý sự kiện đếm ngược này vào ngay trước thẻ đóng </body> nhé:
<script type="text/javascript">
//<![CDATA[
function generate() {
var countdown, downloadElem = document.getElementById("downloadx"),
buttonElem = document.getElementById("btnx"),
downloadLink = document.getElementById("downloadx").href,
timer = 10, // Anh em có thể thay đổi số 10 thành số giây đếm ngược tùy ý
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>Bước 3: CSS để nút bấm "tỏa sáng"
Giờ là lúc "trang điểm" cho nút tải. Anh em tìm thẻ </b:skin> (hoặc cặp thẻ <style>) và dán đoạn CSS này lên ngay phía trên nó:
<style type="text/css">
/* Download Counter Box by DevSharePro */
#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;
background: linear-gradient(to bottom right, #2e7ade, #82b5ff);
}
.inner-down {
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;
padding: 10px 20px;
border-radius: 3px;
background: #fff;
color: #5777f9;
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>Sau khi đã dán đủ 3 đoạn code trên, anh em nhấn nút Lưu Chủ đề (Save Theme) nhé.
Bước 4: Gọi nút tải hiển thị trong bài viết
Bây giờ, khi anh em viết bài và muốn chèn nút download, hãy chuyển qua Chế độ xem HTML và dán khối mã sau vào vị trí mong muốn. Đừng quên đổi LINK DOWNLOAD thành đường dẫn thật của bạn nhé:
<div class="down-limit">
<div class="inner-down">
<div class="info-wrapper">
<div class="file-info"> DevSharePro </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 thực tế: Anh em tò mò nút này lên hình và chạy mượt mà thế nào thì cứ mạnh dạn click vào đây để trải nghiệm nhé: Demo - Button Download (Countdown) Cho Blogspot.
Lời kết
Vậy là trầy trật một chút là xong rồi anh em nhé! Chút thủ thuật nhỏ thôi nhưng hiệu quả mang lại thì miễn chê. Chỉ với vài đoạn mã HTML/CSS/JS thuần túy, anh em đã có ngay một nút download đếm ngược xịn xò, chuẩn responsive để tha hồ "flex" với cộng đồng rồi.
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 cực kỳ bắt mắt nữa.
Hy vọng bài viết này giúp ích cho anh em. Nếu thao tác thành công hoặc gặp bất kỳ vướng mắc gì, đừng ngại để lại bình luận bên dưới để mình hỗ trợ và có động lực ra thêm nhiều "đồ chơi" chất lượng khác nhé! Chúc anh em thành công!
