Cách tạo "Các bài liên quan" chuyên nghiệp

Qua blog của Anhvo (vietwebguide) thấy bài này rất hữu ích nên xin phép được post lại tại đây cho các bạn tham khảo. Dưới đây là toàn bộ bài viết nguyên bản. Cám ơn http://www.vietwebguide.com với thủ thuật hữu ích và cực hay này.

(Đã thay host lưu trữ file .js thay thế cho host samba bị lối vừa qua)

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.

>> Bản sửa lỗi widget – Các bài liên quan

>> Tạo Related Posts / Articles cho Blogspot Blogs

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 Post ->, 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).

- Vào Setting -> Formatting ->, chọn dạng như trên.

- 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). Nếu không tiện ích này sẽ không thể thực hiện được.

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 == &quot;item&quot;'>
<script type='text/javascript'>
home_page = &quot;http://www.vietwebguide.com/&quot;;
maxPosts = 12;
feed2js = &quot;http://feed2js.org//feed2js.php&quot;;
</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(&quot;min&quot;);</script>
</div>

<div id='cacbailq2' style='display:none; visibility:hidden; height:0px'>
<script type='text/javascript'>creattaga(&quot;max&quot;);</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(&quot;cacbailq1&quot;,&quot;Các bài mới nhất cùng chủ đề:&quot;);

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


Những chỗ cần thay:

home_page = &quot;http://www.vietwebguide.com/&quot;;
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.

Hy vọng bạn sẽ thích bài hack này!

Source: http://www.vietwebguide.com

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.