Hướng dẫn thay thế thời gian hiển thị bài viết mặc định của blogspot

Trong quá trình tạo và sử dụng Blogger làm trang lưu trữ bài viết chắc hẳn bạn sẽ quan sát về thời gian hiển thị bài đăng trong trang bài vi...

Trong quá trình tạo và sử dụng Blogger làm trang lưu trữ bài viết chắc hẳn bạn sẽ quan sát về thời gian hiển thị bài đăng trong trang bài viết và trang chủ. Với trang bài viết thường hiển thị ngày đăng còn bài viết ngoài trang chủ hiển thị thời gian đăng bài. Bạn có thể định cấu hình thời gian hiện thị đăng bài trong phần Bố cục » Bài đăng trên Blog hoặc trong phần Cài đặt » Ngôn ngữ và định dạng sẽ có nhiều tùy chọn thời gian hiển thị nhưng thông thường vẫn không được đẹp.
Nếu bạn chịu khó để ý ở những nền tảng wordpress, xenfuro... thì thời gian vẫn thường được cấu hình như thế này: Ngoài trang chủ để thời điểm đăng bài cách đây ví dụ như cách đây 5 phút, hôm qua, 30 ngày, 1 năm... , còn trang bài viết để thời gian cố định ngày tháng năm và thời gian cụ thể ví dụ 7:30 SA ví dụ như 02/08/2017 8:31 CH, cái này mấy trang báo họ vẫn thường áp dụng bên dưới tiêu đề bài viết.

Trong quá trình tìm tòi giải pháp thay thế tôi cũng tìm được và hiện nay đã áp dụng vào blog của tôi. Bạn có thể thấy nhìn nó rất đẹp và chuyên nghiệp phải không. Ví dụ về ảnh minh họa dưới đây ngoài trang chủ

Còn hiển thị ở trang bài viết

Cách thực hiện cũng không khó chỉ có điều đa số hiện nay chúng ta vẫn sử dụng giao diện blogger được tùy biến nên mỗi blog sẽ bố trí khác nhau. Chúng ta chỉ cần thay thế đoạn code mặc định của blog bằng đoạn code thay thế là được. Dưới đây là cách làm:

Phần 1: Thay thế thời gian hiển thị bài đăng ở trang chủ

Trước tiên bạn cần copy và dán đoạn code dưới đây trước thẻ </head> sau đó lưu lại

<style>
abbr[title], acronym[title] {text-decoration: none;}
</style>
<script src='http://ift.tt/rs8qB8'/>
<script src='http://ift.tt/2wpecaA'/>
<script>
jQuery(document).ready(function($){
$(&quot;abbr.timeago&quot;).timeago()
});
</script>

Tiếp theo chúng ta đi tìm đoạn code hiển thị thời gian đăng bài ở trang chủ

Thông thường bài đăng trên blog vẫn được bố trí trong thẻ <b:includable id='post' var='post'> và bài đăng ở trang chủ nhận biết qua tiêu đề bài đăng bằng thẻ <h2 class='post-title entry-title' itemprop='name headline'> và thời gian đăng bài có thể nằm dưới hoặc trên tiêu đề nhưng phải nằm trong phần <b:includable id='post' var='post'> và đoạn code thời gian thường như sau:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><span class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></span></a>
</b:if>
</b:if>
</span>

Nếu bạn tìm thấy bạn xóa đoạn đó đi và thay bằng đoạn code sau:

<span class='post-timestamp'><i class='fa fa-clock-o'/>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='timeago' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.dateHeader/></abbr></a>
</b:if>
</b:if>
</span>

Phần 2: Thay thế thời gian hiển thị ở trang bài viết

Phần code hiển thị thời gian mặc định của trang bài viết có dạng sau:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><span class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.dateHeader/></span></a>
</b:if>
</b:if>
</span>

Đoạn code này thường được bố trí trên hoặc dưới tiêu đề của trang bài viết bằng thẻ <h1 class='post-title entry-title' itemprop='name'>. Nếu bạn tìm thấy thì thay thế đoạn code trên bằng đoạn code dưới đây:

<span class='post-timestamp'><i class='fa fa-clock-o'/>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='published' ><data:post.dateHeader/></span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='published' ><data:post.timestamp/></span>
</b:if>
</b:if>
</span>

Sau khi thay thế xong bạn cần quay trờ lại Bố cục định cấu hình bài đăng trên blog hiển thị thời gian như hình dưới đây:

Như vậy với chỉ vài bước đơn giản là bạn đã có thể thay thế được thời gian hiển thị mặc định của blog bằng thời gian được tùy biến trông rất chuyên nghiệp và đẹp rồi.

Link bài viết gốctại đây