Cách 1 tạo Related Posts - Các bài liên quan cho Blogspot

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:



Cách tạo Related Posts - Các bài liên quan cho Blogspot


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


Cách tạo Related Posts - Các bài liên quan cho Blogspot



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


Cách tạo Related Posts - Các bài liên quan cho Blogspot



- 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 :


Cách tạo Related Posts - Các bài liên quan cho Blogspot


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


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
blogID = '1193242412365517650';
maxPosts = 12;
feed2js = &quot;http://feed2js.org//feed2js.php&quot;;
</script>
<script src='http://www.sigmirror.com/files/24826_bvdrh/related_posts_01_fix.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://sites.google.com/site/vntimhost/javascript/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:

blogID = '1193242412365517650';
maxPosts = 12;


blogID Chính là blogID của blog của bạn (cách lấy blogID cho blog)

maxPosts = 12; là 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!

vietwebguide.com

2 Nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết. :)
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Rất cảm ơn những comment thiện ý. Đừng Spam nhé!

Mới hơn Cũ hơn