Cách thêm bộ đếm ngược vào Blogger bằng HTML và JavaScript

Rà soát nội dung: 13/11/2026 · Nguyễn Duy Giang

Bộ đếm ngược giúp người đọc theo dõi thời gian còn lại trước một sự kiện. Bài lưu trữ mã cũ được viết lại thành hướng dẫn có thể thực hành trên Blogger hiện nay, sử dụng HTML và JavaScript thuần thay cho thư viện đếm ngược cũ.

Trong bài này

• Nên đặt bộ đếm ngược ở đâu?
• Chuẩn bị mốc thời gian rõ ràng
• Mã bộ đếm ngược không dùng thư viện ngoài
• Chèn vào Blogger và kiểm tra

Nên đặt bộ đếm ngược ở đâu?

Nếu muốn hiển thị bộ đếm trên nhiều trang, mở Bố cục rồi thêm tiện ích HTML/JavaScript vào vùng chủ đề cho phép. Nếu chỉ cần trong một bài viết, kiểm tra cách chủ đề và trình soạn thảo xử lý mã trước khi sử dụng.

Tránh dùng bộ đếm cho một hạn chót không có thật hoặc tự đặt lại sau khi hết giờ. Người đọc cần biết sự kiện nào đang diễn ra, thời gian kết thúc và trạng thái sau khi hết hạn.

Chuẩn bị mốc thời gian rõ ràng

Chọn một ngày giờ cụ thể và xác định múi giờ của sự kiện. Trong ví dụ dưới đây, thời điểm 2027-01-01T00:00:00+07:00 là 00:00 ngày 01/01/2027 theo giờ Việt Nam. Bạn phải đổi nó thành thời gian của sự kiện thực tế.

Mã lấy thời gian từ thiết bị người xem. Vì vậy, không dùng bộ đếm phía trình duyệt làm căn cứ duy nhất cho giao dịch, điều kiện thanh toán hoặc những thời hạn cần độ chính xác do máy chủ xác nhận.

Mã bộ đếm ngược không dùng thư viện ngoài

Sao chép toàn bộ đoạn mã sau vào tiện ích HTML/JavaScript. Chỉ dùng một bản có cùng mã định danh trên một trang.

<div id="su-kien-dem-nguoc" data-end="2027-01-01T00:00:00+07:00">
  <strong>Thời gian đến sự kiện</strong>
  <p class="ket-qua">Đang tính thời gian…</p>
</div>
<script>
(function () {
  var box = document.getElementById('su-kien-dem-nguoc');
  if (!box) return;
  var output = box.querySelector('.ket-qua');
  var target = Date.parse(box.getAttribute('data-end'));
  if (!Number.isFinite(target)) {
    output.textContent = 'Vui lòng kiểm tra thời gian sự kiện.';
    return;
  }
  function update() {
    var left = Math.max(0, target - Date.now());
    if (!left) {
      output.textContent = 'Sự kiện đã đến thời điểm bắt đầu.';
      return false;
    }
    var s = Math.floor(left / 1000);
    var days = Math.floor(s / 86400);
    var hours = Math.floor(s / 3600) % 24;
    var minutes = Math.floor(s / 60) % 60;
    var seconds = s % 60;
    output.textContent = days + ' ngày ' + hours + ' giờ ' +
      minutes + ' phút ' + seconds + ' giây';
    return true;
  }
  if (update()) {
    var timer = setInterval(function () {
      if (!update()) clearInterval(timer);
    }, 1000);
  }
}());
</script>

Bạn có thể thay dòng tiêu đề “Thời gian đến sự kiện” và thông báo khi hết giờ. Bộ đếm trình bày bằng chữ, không phụ thuộc bộ ảnh số nên phù hợp với font tiếng Việt của giao diện.

Chèn vào Blogger và kiểm tra

1. Sao lưu nội dung tiện ích cũ nếu bạn định thay thế nó.
2. Mở Bố cục, chọn Thêm tiện ích rồi HTML/JavaScript.
3. Dán mã, sửa thời điểm và tiêu đề theo sự kiện thật.
4. Lưu tiện ích, lưu bố cục nếu có yêu cầu.
5. Mở blog công khai trên máy tính và điện thoại; kiểm tra khi còn giờ và khi đã hết giờ bằng mốc thử riêng.

Nếu chưa hiển thị, kiểm tra đoạn mã có được dán đầy đủ, mã định danh có bị trùng và vùng tiện ích có bị chủ đề ẩn hay không. Không cần thêm jQuery chỉ để chạy ví dụ này.

Câu hỏi thường gặp

Bộ đếm có làm tăng thứ hạng Google không?

Không có cơ chế bảo đảm như vậy. Chỉ nên thêm khi phục vụ người đọc và không gây chậm, che nội dung hoặc làm hiểu sai thời hạn.

Tại sao giờ trên bộ đếm bị lệch?

Hãy kiểm tra chuỗi ngày theo định dạng ISO, phần +07:00 và đồng hồ thiết bị. Thiếu thông tin múi giờ có thể khiến các thiết bị hiểu thời điểm khác nhau.

Học tiếp cùng Blogger

• Cách dùng Bố cục Blogger để thêm và sắp xếp tiện ích
• Cách đổi giao diện Blogger, sao lưu và chỉnh sửa Chủ đề

Đối chiếu tính năng: Tài liệu chính thức của Blogger. Tên mục có thể khác đôi chút theo ngôn ngữ hoặc đợt cập nhật.