Tiện ích các bài liên quan 2.0

Tiện ích các bài liên quan (tạm gọi là Related posts script for Blogger) giúp thể hiện 1 danh sách các bài mới nhất và các bài cũ hơn cùng chủ đề với bài đang được xem. Tiện ích này đã được đăng trên vietwebguide.com từ lâu và sử dụng tốt, tuy nhiên do sự cố Websamba hồi đầu tháng 6 cho nên một số bạn đã không cài đặt được hoặc không biết cách chỉnh sửa để tiện ích hoạt động trở lại. Thời gian quan do cũng có nhiều việc phải làm cho nên Anhvo cũng chưa kịp sửa chữa hay nâng cấp, và cho tới hôm nay mới có thể làm được điều đó.
Related Posts Script for Blogger (RPS4B) 2.0 có 1 số ưu điểm so với các bản trước như:
- Hỗ trợ hiện thêm ngày tháng
- Có thể chạy cho cả blog đã setting ngôn ngữ tiếng Anh và tiếng Việt (trước kia phải setting qua tiếng Anh mới có thể dùng được)
- Không phải cấu hình về thời gian lung tung như trước kia.
- Style trình bày đẹp hơn
- Cài đặt đơn giản
- Không phụ thuộc vào feed2js như trước

Hình minh họa

Ok, nếu bạn đã từng cài đặt phiên bản trước, thì hãy remove code cũ trước khi cài đặt code mới này. Nếu bạn không biết cách remove code cũ, thì hãy đọc lại hướng dẫn cài đặt phiên bản cũ và làm ngược từ dưới lên trên.
Cài đặt:
Vào Template -> Edit HTML, bấm "Download Full Template" để sao lưu 1 bản Template trước khi thao tác.
Click chọn Expand Widget Manager để xem đầy đủ template.
Tìm đến dòng
<div class='post-footer-line post-footer-line-3'>
Và đặt đoạn code này vào ngay sau nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if></div> <div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div> <style type='text/css'> #related-posts-block { margin:10px 5px; font-size:12px; color:#3c3c3c;     text-transform:none; } #related-posts-block #related-posts-loading-text{ font-size:18px; color:#FF0033;     text-align:center; } #related-posts-block #related-newest-href { margin:10px 5px; } #related-posts-block #related-newest-href ul{     list-style-image:url(http://code.vietwebguide.com/images-upload/th_Bullet1.gif); } #related-posts-block #related-newest-href #related-newest-title { font-size:16px;     margin:10px 5px } #related-posts-block #related-newest-href a{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000033; } #related-posts-block #related-older-href { margin:10px 5px; } #related-posts-block #related-older-href ul{ list-style-image:url(http://code.vietwebguide.com/images-upload/th_starbrightvc3.gif); } #related-posts-block #related-older-href #related-older-title { font-size:16px;     margin:10px 5px } #related-posts-block #related-older-href a{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000033; } </style> <div id='related-posts-block'> <div id='related-posts-loading-text'>Loading related posts... <img align='absmiddle' src='http://code.vietwebguide.com/images-upload/icon-star.gif'/></div> <div id='related-newest-href'><div id='related-newest-title'/></div> <div id='related-older-href'><div id='related-older-title'/></div> </div> </b:if>

Lưu ý: Nếu template của bạn không tìm thấy dòng vừa nêu, thì có thể tìm đến dòng
<div class='post-footer-line post-footer-line-2'>
hoặc
<div class='post-footer-line post-footer-line-1'>
hoặc 1 chỗ nào đó tương tự, miễn sao nó nằm trong khu vực dưới nội dung bài viết. Trường hợp bạn không biết chỗ nào để thêm code, bạn tìm đến thẻ <data:post.body/> và thêm đoạn code trên vào dưới nó.
Tiếp theo, bạn chèn tiếp đoạn code dưới đây vào ngay trên thẻ đóng </BODY>:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var showdate = true; var max_post = 12; //]]> </script> <script src='http://hpc.cnet.googlepages.com/related-posts-v2-0.js' type='text/javascript'/> </b:if>

Trong đoạn code trên có 2 chỗ giúp bạn tùy chỉnh:
var showdate = true; - nếu bạn đặt giá trị true thành false thì sẽ không hiện ngày tháng trong link các bài liên quan và ngược lại.
var max_post = 12; - số bài liên quan tối đa cho bài mới hơn và cũ hơn. Số 12 là 1 con số đẹp cho trường hợp này, cho nên bạn không nên đổi gì ở đây.
Lưu template lại thế là xong!
Hy vọng là bản RPS2B 2.0 sẽ làm hài lòng được đa số các bạn sẽ, đã và đang sử dụng. Các bạn cứ góp ý để Anhvo ngày càng hoàn thiện nó hơn nhé.

Anh Võ