Blogspot: Cách tạo "các bài liên quan" chuyên nghiệp (dùng cho Layout)

Trước đây tôi có viết 1 số bài hướng dẫn về cách làm "các bài liên quan", tuy nhiên, với những bài này thi blog chỉ hiện được các bài "mới nhất" của cùng nhãn và không gì khác hơn. Khi sử dụng gặp ít nhiều hạn chế, tức là số bài hiện sẽ chỉ quanh quẩn mấy bài mới nhất của nhãn.

Thấy được nhược điểm đó, tôi cố gắng khắc phục tối đa nó, làm sao để các bài liên quan hiển thị một cách pro. Bây giờ các bài liên quan sẽ không như trước nữa: nó sẽ hiện bài mới nhất và bài cũ hơn so với bài đang được mở (giống các trang báo chí, nó sẽ hiện không khác gì các trang như Dân Trí, Tuổi Trẻ,... VN Expess vì đã đổi giao diện chứ không thì cũng giống nốt :D). Nói khó hiểu, bạn hãy xem hình minh họa sau đây:


Thực ra hack này tôi đã viết từ lâu, nhưng vì mới chỉ áp dụng trên blogg classic nên tôi ngại viết lại cho Layout, đến hôm nay mới hoàn thành xong.

Tiến hành cài đặt:

* Lưu ý quan trọng: bạn phải chỉnh ngôn ngữ cho blog của mình thành tiếng Anh trước khi thực hiện các bước bên dưới.

Trước khi đặt code vào, bạn phải điều chỉnh một số chỗ sau:

- Vào Page Elements -> Blog ->, tiến hành:

+ Bật chế độ hiện Nhãn,
+ Bật chế độ Posted by, at và chọn dạng thời gian như hình đã chỉ (dạng 6/20/2008 05:30:21 PM).



- Hãy chắc chắn rằng blog của bạn đã được Burn Feed (tức link feed đã được kích hoạt).

Bây giờ đến phần chèn code:

- Nhớ sao lưu 1 bản trước khi chỉnh sửa.
- Vào Edit HTML -> Expand Widget Manager,

Tìm đến dòng

<p class='post-footer-line post-footer-line-3'/>

và chèn code sau ngay bên dưới nó (hoặc có thể dưới 1 thẻ /DIV đóng cũng được).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<div id='bailienquan'>Loading related posts...</div>
<span id='label_list_display_none' style='display:none; visibility:hidden'><b:loop
values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast
!= &quot;true&quot;'>,</b:if></b:loop></span>
<span id='post_time_stamp' style='display:none; visibility:hidden'><data:post.timestamp/></span>
<br/>
</b:if>
</b:if>

Xem hình ví dụ của tôi :


Tiếp tục, bạn chèn đoạn code dưới đây vào ngay trên thẻ đóng </body>:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
home_page = "http://www.vietwebguide.com/";
maxPosts = 12;
feed2js = "http://feed2js.org//feed2js.php";
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/related_posts_01.js'
type='text/javascript'/>

<div id='cacbailq1' style='display:none; visibility:hidden; height:0px'>
<script type='text/javascript'>creattaga("min");</script>
</div>

<div id='cacbailq2' style='display:none; visibility:hidden; height:0px'>
<script type='text/javascript'>creattaga("max");</script>
</div>

<div class='cacbailienquan' id='cacbailienquan' style="display:none;">

<script src='http://www33.websamba.com/anhvosite/blogger/js/related_posts_02.js'
type='text/javascript'/>
<script type='text/javascript'>
displayCBLQ("cacbailq1","Các bài mới nhất cùng chủ đề:");

displayCBLQ("cacbailq2","Các bài cũ hơn cùng chủ đề:");
</script>
</div>
</b:if>

Những chỗ cần thay:

home_page = "http://www.vietwebguide.com/";
maxPosts = 12;

chính là link địa chỉ blog của bạn (địa chỉ hiện tại đang dùng, đừng quên dấu / cuối cùng nhé, và số bài liên quan muốn hiển thị (ví dụ là 12 bài chẳng hạn).

* Code chạy rất đẹp với các nhãn tiếng Anh hoặc tiếng Việt không dấu. Với các nhãn tiếng Việt, có một số từ code không hiểu được nó, do đó không lấy được các bài liên quan. Vì thế, các bạn nên sử dụng ít nhãn tiếng Việt trong blog thôi, hoặc chỉ nên dùng nhãn tiếng Việt không dấu là tốt nhất.