Tính năng Time Ago cho blooger

By: Thế Anh tháng 5 09, 2025

Để thêm chức năng "cách đây bao lâu" (ví dụ: "2 phút trước", "1 giờ trước", "1 ngày trước") cho thời gian đăng bài viết trên Blogger, bạn cần sử dụng JavaScript. Dưới đây là các bước và đoạn code bạn có thể thực hiện:

1. Thêm đoạn code JavaScript vào theme của bạn:

  • Sao lưu theme của bạn: Trước khi thực hiện bất kỳ thay đổi nào, hãy sao lưu theme hiện tại của bạn (Theme > Sao lưu / Khôi phục).

  • Chỉnh sửa HTML:

    1. Vào Theme > Chỉnh sửa HTML.
    2. Tìm thẻ <head> hoặc </body>. Bạn nên đặt đoạn code JavaScript ngay trước thẻ </body> để đảm bảo các phần tử HTML đã được tải.
    3. Dán đoạn code JavaScript sau đây vào vị trí bạn đã chọn:
    HTML
    <script>
function timeAgo(timestamp) {
  const now = new Date();
  const seconds = Math.floor((now - new Date(timestamp)) / 1000);

  let interval = Math.floor(seconds / 31536000);
  if (interval > 1) {
    return interval + ' năm trước';
  }
  interval = Math.floor(seconds / 2592000);
  if (interval > 1) {
    return interval + ' tháng trước';
  }
  interval = Math.floor(seconds / 86400);
  if (interval > 1) {
    return interval + ' ngày trước';
  }
  interval = Math.floor(seconds / 3600);
  if (interval > 1) {
    return interval + ' giờ trước';
  }
  interval = Math.floor(seconds / 60);
  if (interval > 1) {
    return interval + ' phút trước';
  }
  return 'vài giây trước';
}

function updateTimeAgo() {
  const timeElements = document.querySelectorAll('.timeago');
  timeElements.forEach(element => {
    const timestamp = element.getAttribute('data-timestamp');
    if (timestamp) {
      element.textContent = timeAgo(timestamp);
    }
  });
}

document.addEventListener('DOMContentLoaded', function() {
  updateTimeAgo();
  // Cập nhật mỗi phút (tùy chỉnh theo nhu cầu)
  setInterval(updateTimeAgo, 60000);
});
</script>

  • Nhấp vào Lưu theme.

2. Chỉnh sửa HTML hiển thị thời gian bài viết:

  • Quay lại Theme > Chỉnh sửa HTML.

  • Tìm đoạn code hiển thị thời gian đăng bài viết trong theme của bạn. Thường thì nó sẽ nằm trong các thẻ như <data:post.dateHeader/> hoặc một đoạn code tương tự trong widget Blog1.

  • Bạn cần thay thế hoặc bao quanh đoạn code thời gian hiện tại bằng một thẻ <span> có class là timeago và thêm thuộc tính data-timestamp chứa thời gian đăng bài viết ở định dạng mà JavaScript có thể hiểu (ISO 8601 hoặc định dạng tương tự).

    Ví dụ:

    Giả sử đoạn code gốc hiển thị thời gian là:

    HTML
    <span class='post-timestamp'><data:post.dateHeader/></span>

    Bạn cần thay thế nó bằng:

    HTML
    <span class='post-timestamp'>
  <span class='timeago' expr:data-timestamp='data:post.date.iso8601'><data:post.dateHeader/></span>
</span>

    Hoặc nếu bạn muốn ẩn thời gian gốc và chỉ hiển thị "cách đây bao lâu":

    HTML
    <span class='post-timestamp'>
  <span class='timeago' expr:data-timestamp='data:post.date.iso8601'></span>
</span>

    Giải thích:

    • <span class='timeago'>: Thẻ span này được JavaScript sử dụng để tìm các phần tử cần cập nhật.
    • expr:data-timestamp='data:post.date.iso8601': Thuộc tính data-timestamp lưu trữ thời gian đăng bài viết ở định dạng ISO 8601, đây là định dạng mà hàm Date() trong JavaScript có thể dễ dàng xử lý. <data:post.date.iso8601> là một biến của Blogger cung cấp thời gian ở định dạng này.
    • <data:post.dateHeader/>: Đây là code gốc của theme bạn để hiển thị thời gian đăng bài viết. Bạn có thể giữ nó nếu muốn hiển thị cả thời gian gốc (trước khi JavaScript cập nhật) hoặc ẩn nó nếu chỉ muốn hiển thị "cách đây bao lâu".

  • Nhấp vào Lưu theme.

Lưu ý quan trọng:

  • Tìm đúng vị trí: Việc xác định chính xác đoạn code hiển thị thời gian đăng bài viết có thể khác nhau tùy thuộc vào theme bạn đang sử dụng. Hãy tìm kiếm các từ khóa như date, timestamp, hoặc các biến data:post.date....
  • Kiểm tra kỹ: Sau khi thực hiện thay đổi, hãy kiểm tra kỹ trang web của bạn để đảm bảo chức năng "cách đây bao lâu" hoạt động chính xác trên tất cả các bài viết.
  • Tùy chỉnh: Bạn có thể tùy chỉnh đoạn code JavaScript để thay đổi cách hiển thị thời gian (ví dụ: số lượng đơn vị thời gian hiển thị, ngôn ngữ).
  • Thời gian thực: Đoạn code trên sẽ cập nhật thời gian hiển thị mỗi phút. Bạn có thể điều chỉnh tần suất cập nhật bằng cách thay đổi giá trị trong setInterval(updateTimeAgo, 60000); (giá trị tính bằng mili giây).
Đăng ký: Nhận xét (Atom)