Nếu bạn đang có một website download, chia sẻ tài liệu hay phần mềm thì chắc hẳn bạn sẽ phải đặt đường link hay nút download ở bài viết của mình đúng không nào? Bạn muốn tạo sự khác biệt cho website của mình, mang đến cho người dùng trải nghiệm thú vị hơn cũng như tăng thời gian người dùng ở lại trang web của mình? Vậy thì một nút “Download” với hiệu ứng đếm ngược sẽ giải quyết được điều đó.
Người dùng sẽ thấy sự chuyên nghiệp và sáng tạo của website, giúp website của bạn có được thời gian giữ chân người dùng lâu hơn. Không dừng lại ở đó, hiệu ứng đếm ngược này còn giúp tạo cảm giác hồi hộp, khiến họ càng nóng lòng muốn tải xuống nội dung của bạn hơn.
Nghe hấp dẫn phải không nào? Tin vui là bạn hoàn toàn có thể tự tạo ra nút tải xuống “thần thánh” này chỉ với một chút HTML, CSS và JavaScript. Đừng lo lắng nếu bạn chưa từng code bao giờ, mình sẽ hướng dẫn chi tiết từng bước một, đảm bảo ai cũng làm được, cùng follow từng bước của Shian nhé!
Các bước thực hiện
Bước 1: Truy cập vào mã nguồn website
- Đăng nhập vào hệ thống quản trị nội dung (CMS) của website.
- Tìm đến trang hoặc bài viết mà bạn muốn thêm nút tải xuống.
- Chuyển sang chế độ chỉnh sửa HTML (thường có biểu tượng
</>hoặc tên tương tự).
Bước 2: Thêm mã HTML
Tại vị trí bạn muốn đặt nút download, hãy dán đoạn mã HTML sau:
<button id="download-btn" class="btn-download">
<span>Download</span>
</button>Bước 3: Thêm mã CSS
Tìm đến phần <head> trong mã nguồn HTML của website, sau đó thêm đoạn mã CSS sau vào dưới thẻ <head>:
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.btn-download {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
color: white;
white-space: nowrap;
background: linear-gradient(135deg, #4facfe, #00f2fe);
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
text-decoration: none;
}
.btn-download:disabled {
background: linear-gradient(135deg, #b2bec3, #dfe6e9);
cursor: not-allowed;
}
.btn-download.success {
background: linear-gradient(135deg, #00c853, #b2ff59);
}
.btn-download:active {
transform: scale(0.98);
}
.btn-download span {
text-align: center;
}
</style>Bước 4: Thêm mã JavaScript
Đến trước khi đóng thẻ </body>, hãy dán đoạn mã JavaScript sau:
<script>
const button = document.getElementById('download-btn');
const downloadLink = 'https://example.com/download'; // Thay link tải xuống của bạn vào đây!
let downloadCompleted = false;
button.addEventListener('click', () => {
if (downloadCompleted) {
window.open(downloadLink, '_blank');
return;
}
button.disabled = true;
let countdown = 5;
const span = button.querySelector('span');
const interval = setInterval(() => {
span.textContent = `Wait ${countdown}s`;
countdown--;
if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.classList.add('success');
span.textContent = 'Download Now';
downloadCompleted = true;
}
}, 1000);
});
</script>
- Nhớ thay thế
https://example.com/downloadbằng link download thực tế của bạn. let countdown = 5;là thời gian đếm ngược, hiện tại là 5 (giây).
Demo:
Lưu ý quan trọng
- Việc chèn code trực tiếp có thể ảnh hưởng đến hiệu suất website nếu không được tối ưu.
- Luôn sao lưu website trước khi thực hiện bất kỳ thay đổi nào đối với mã nguồn.
- Hướng dẫn này dành cho việc chèn code trực tiếp vào website. Tùy vào từng nền tảng website (WordPress, Wix, Squarespace, Blogger...), cách thức truy cập và chỉnh sửa mã nguồn có thể khác nhau một chút.
Chúc bạn thành công với website của mình!
