Nếu bạn đang sử dụng Blogspot để chia sẻ nội dung và muốn làm cho thời gian đăng bài của bạn trở nên thân thiện và dễ hiểu hơn, thì hãy thêm tính năng hiển thị thời gian 'cách đây' (Time Ago) vào blog của bạn. Điều này giúp độc giả của bạn dễ dàng nhận biết được khoảng thời gian kể từ khi bài viết được đăng. Cách cài đặt Hiển Thị Thời Gian 'Cách Đây' (Time Ago) cho Blogspot.
Cách làm này áp dụng lên Tiện ích bài đăng của Blog (Tiện ích bài đăng) trên Blog.
Còn trong code JavaScript thì bạn có thể tham khảo code dưới
Cách làm này áp dụng lên Tiện ích bài đăng của Blog (Tiện ích bài đăng) trên Blog.
Đầu tiên các bạn phải xác định được Class của ngày đăng là gì. Tôi ví dụ các Template họ thường đặt Class là published
Ví dụ: <time class="published" datetime="2020-07-30T13:19:00-07:00">July 30, 2020</time>
Ta thấy nó có 1 chuỗi datatime đó là định dạng ngày kiểu ISO 8601. Cách cài đặt như sau, copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.
Đây là 1 ví dụ html trong Blogger
Đây là 1 ví dụ html trong Blogger
<time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>Hoặc<span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span>
Cách hoạt động code sẽ duyệt qua tất cả các phần thẻ html có class là published và cắt chuỗi datetime để lấy ngày, rồi nó cộng trừ nhân chia đó là việc của code nó tự tính.
Nếu Blog của bạn nó không giống như trên thì các bạn tự thêm và khái báo expr:datetime='data:post.date.iso8601'
Bạn có thể xóa thẻ <data:post.date/> để cho nó khỏi hiện ngày, trước khi nó hiển thị kiểu TimeAgo.
Bạn có thể xóa thẻ <data:post.date/> để cho nó khỏi hiện ngày, trước khi nó hiển thị kiểu TimeAgo.
<script>//<![CDATA[function updateRelativeTime() {const timeElements = document.querySelectorAll('.published');timeElements.forEach(timeElement => {const isoDateString = timeElement.getAttribute('datetime');const pastDate = new Date(isoDateString);const currentDate = new Date();const timeDifference = currentDate - pastDate;const seconds = Math.floor(timeDifference / 1000);const minutes = Math.floor(seconds / 60);const hours = Math.floor(minutes / 60);const days = Math.floor(hours / 24);const months = Math.floor(days / 30);const years = Math.floor(days / 365);let timeAgo;if (years > 0) {timeAgo = `${years} năm`;} else if (months > 0) {timeAgo = `${months} tháng`;} else if (days > 0) {timeAgo = `${days} ngày`;} else if (hours > 0) {timeAgo = `${hours} giờ`;} else if (minutes > 0) {timeAgo = `${minutes} phút`;} else {timeAgo = `${seconds} giây`;}timeElement.textContent = `Cách đây ${timeAgo}`;});}window.onload = updateRelativeTime;//]]></script>
Còn trong code JavaScript thì bạn có thể tham khảo code dưới
<script>//<![CDATA[function calculateTimeAgo(isoTimeString) {const pastDate = new Date(isoTimeString);const currentDate = new Date();const timeDifference = currentDate - pastDate;const seconds = Math.floor(timeDifference / 1000);const minutes = Math.floor(seconds / 60);const hours = Math.floor(minutes / 60);const days = Math.floor(hours / 24);const months = Math.floor(days / 30);const years = Math.floor(days / 365);if (years > 0) {return `${years} năm`;} else if (months > 0) {return `${months} tháng`;} else if (days > 0) {return `${days} ngày`;} else if (hours > 0) {return `${hours} giờ`;} else if (minutes > 0) {return `${minutes} phút`;} else {return `${seconds} giây`;}}// Ví dụconst isoTimeString = "2020-10-20T12:34:56Z";const timeAgo = calculateTimeAgo(isoTimeString);console.log(`Cách đây ${timeAgo}`);//]]></script>
Bài viết: Hiển Thị Thời Gian 'Cách Đây' (Time Ago) cho Blogspot được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
