Script này thích hợp với các blog cần liệt kê số lượng lớn các bài viết liên quan (VD như các tập trong 1 bộ truyện tranh). Nếu blog bạn không có nhu cầu này, hãy dùng các bản cũ mà bạn thấy phù hợp.
Cách cài đặt
Mở template của bạn ở chế độ chỉnh sửa HTML (hoặc download file template về để mở), chèn đoạn sau ngay phía trước thẻ </head>:
<script type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/jquery.min-1.8.2.js"></script>
<style type="text/css">
.related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff}
</style>
Sau đó, tìm trong template của bạn dòng:<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
(Ở đây chữ Bài đăng trên Blog màu đỏ là tên của phần tựa đề trang bài viết của bạn, hãy sửa lại cho đúng với blog của mình.)rồi chèn ngay phía sau đoạn code này: (copy code trong khung dưới hoặc tại đây http://pastebin.com/raw.php?i=jadhiYiU)
<b:includable id='related-posts' var='post'> <div id="related-posts"> <h3>Related Posts</h3> <ul id="related-posts-list"></ul> </div> <script type="text/javascript"> var relatedPostsConfig = { maxPosts: 10, perLabel: 200, perPage: 8, hiddenLabel: ['Label 1', 'Label 2', 'Label 3'] }; function getRelatedPosts(json) { var posts = [], num = 0, max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count > json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded if (max <= 0) { return; } for (var i = 0; i < max; i++) { entry = json.feed.entry[i]; posts[num] = {}; posts[num].title = entry.title.$t; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == "alternate") { posts[num].url = entry.link[j].href; break } } num++; } relatedPostsConfig.count += max; for (i = 0; i < num; i++) { var li = document.createElement("li"), a = document.createElement("a"); a.href = posts[i].url; a.title = posts[i].title; a.appendChild(document.createTextNode(posts[i].title)); if (a.href != location.href) { li.appendChild(a); relatedPostsConfig.container.appendChild(li); } } } (function() { var obj = {}; for(var i = 0; i < relatedPostsConfig.hiddenLabel.length; i++) { obj[relatedPostsConfig.hiddenLabel[i]] = ''; } relatedPostsConfig.count = 0; relatedPostsConfig.container = document.getElementById("related-posts-list"); <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> if (!('<data:label.name/>' in obj)) { document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+'<data:label.name/>'+'?alt=json-in-script&callback=getRelatedPosts&max-results='+relatedPostsConfig.perLabel+'"></' + 'script>'); } </b:loop> </b:loop> })(); $(function(){ var pages = 1; while ($('#related-posts-list > li').length) { var $ul = $('<ul/>').appendTo($('#related-posts')); $('#related-posts-list > li:lt('+relatedPostsConfig.perPage+')').appendTo($ul); pages++; } $('#related-posts > ul:gt(1)').hide(); var $div = $('<div class="related-posts-navi"/>').appendTo($('#related-posts')); for (var i = 1; i < pages; i++) { var $a = $('<a id="related-posts-page-' + i + '" href="#"/>').click(function(){ var id = $(this).attr('id').substr(19); $('#related-posts > ul').hide(); $('#related-posts > ul:eq(' + id + ')').show(); // change class $('.related-posts-navi > a').removeClass('related-posts-navi-selected'); $(this).addClass('related-posts-navi-selected'); return false; }).append(i).appendTo($div); } $('.related-posts-navi > a:first').addClass('related-posts-navi-selected'); $('<div style="clear:both" />').appendTo($('#related-posts')); }); </script> </b:includable>Cuối cùng, tìm đến vị trí mà bạn muốn hiển thị các bài viết liên quan trong template và chèn dòng sau:
<b:include data='post' name='related-posts'/>Ở đây, vị trí mà bạn muốn hiển thị tiện ích Bài viết liên quan là bất kỳ chỗ nào bạn muốn trên bài viết. Nếu bạn muốn đặt nó ở cuối nội dung bài viết thì đặt code trên vào ngay sau thẻ <data:post.body/> (thường là thẻ ở vị trí đầu tiên nếu có nhiều kết quả)
Cách tùy biến
Tiêu đề của mục các bài viết liên quan được mặc định là "Related Posts". Để sửa nó, các bạn sửa lại chỗ sau (nằm trong đoạn code mà bạn copy từ link http://pastebin.com/raw.php?i=jadhiYiU phía trên):
<div id="related-posts"> <h3>Related Posts</h3> <ul id="related-posts-list"></ul> </div>
(Nếu không muốn hiển thị, có thể xóa nó đi)
Tham số tùy biến của script được liệt kê ở phần đầu của đoạn code như sau:
var relatedPostsConfig = { maxPosts: 50, perLabel: 25, perPage: 8, hiddenLabel: ['Label 1', 'Label 2', 'Label 3'] };
Trong đó:
- maxPosts: chỉ số lượng bài viết liên quan (tối đa) được hiển thị
- perLabel: chỉ số lượng bài viết liên quan (tối đa) tính theo mỗi label
- perPage: chỉ số lượng bài viết liên quan được liệt kê trong 1 trang
- hiddenLabel: danh sách các label không hiển thị, phân cách bằng dấu phẩy. hiddenLabel được dùng khi bài viết của bạn có nhiều label, trong đó có 1 số label đặc biệt mà bạn không muốn liệt kê các bài viết liên quan nằm trong đó (VD 'Thông báo', 'Tổng hợp', ...). Khi đó bạn chỉ cần liệt kê các label dạng này vào biến hiddenLabel là xong. Nếu muốn hiển thị tất cả các label (không ẩn label) nào thì khai báo:
hiddenLabel: []
Mẹo nhỏ:Ngoài ra, tôi cũng tạo 1 số style cơ bản cho các nút chuyển trang, là đoạn CSS được chèn ở trong thẻ <head> (đoạn code màu xanh đầu tiên):
Để chỉ hiện các bài viết liên quan của label đầu tiên, hãy cấu hình maxPosts = perLabel
<style type="text/css"> .related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none} .related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none} .related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff} </style>
Các nút phân trang này tôi làm theo mẫu của Flickr, nếu các bạn thích style khác, hãy tùy biến CSS theo ý mình.
Cuối cùng, chúc các bạn blogging vui vẻ. Mọi góp ý xin để lại dưới comments.
Anh Từ Thức ơi!
ReplyDeleteM sáng nay đã đưa theo hướng dẫn ở bài này và các bài viết đã hiện ra các tag liên quan rồi.
Cám ơn anh nhiều, sẽ tiếp tục học các bài khác anh ạ.
Chúc mừng chị M nhé!
DeleteBT chạy qua ngó cái xem sao ...hihihi
Theo chân chị M vào học bài ở đây. Cám ơn anh.
ReplyDeleteNhưng thấy con số của các trang kế tiếp biến thành màu trắng không biết làm sao mà sửa nữa. Anh có thể xem giúp được không?
[img]http://4.bp.blogspot.com/-KJivkUDzbx4/UKlha_XxkxI/AAAAAAAAAGs/3DhmlUTqMNM/s1600/code.jpg[/img]
ReplyDeleteTừ Thức ơi!
ReplyDeleteTối hôm qua thấy KB hỏi, nên sáng nay chị vào tìm cái tag nào mà số bài nhiều nhất để kiểm tra, thì thấy số các trang của chị cũng hiện ra màu trắng giống bên KB. Để chị cũng sửa lại.
Cám ơn TT hihi.
Nên chỉnh lại cho đúng ý mình thì mới vui, khoái chí đó chị M.
DeleteChị chỉnh xong rồi. Đã thử xem ở những bài chuyển từ Mul sang, thì thấy màu phù hợp với trang màu đen thui của chị rồi TT ơi! hihi
DeleteVậy là vui rồi, trông rất đẹp.
DeleteNhưng bên nhà Kichbu thì vẫn chưa thấy động tịch gì. Cả những trang dài lòng thòng cũng nên chỉnh lại, chứ để thế nhìn rối mắt lắm.
Hôm qua cậu ấy có nhờ, chắc chị phải vào chỉnh lại dùm cho cậu ấy, nhưng kg hiểu sao cái font chữ khi thu gọn lại thì font chữ bị mã hóa, để hôm nào rãnh đã mới vào giúp cho cậu ấy được.
ReplyDeleteBây giờ Chị qua học thêm bài mới đây.
ReplyDeleteChị M xem bài nào thực dụng cho mình thì học cho bõ công đèn sách. hihih
DeleteTT ơi! chị về nhà hai tuần, bận với ta bà thế giới, nên ít cắp đèn sách qua bên đây. Hôm nay lại cắp đèn sách qua đây.
ReplyDeleteChị giúp bạn Vynn làm 1 trang nền, trang của chị làm thì bỏ code vào CSS với lệnh là body {..
Nhưng trang đó di chuyển theo con chuột, cũng giống như trang của TT là di chuyển, còn qua trang của Yên Vũ, thì trang của cô bé đó làm thật là đẹp. Em ấy đã hướng dẫn rồi, nhưng chị chưa tìm được cái sai xót của mình, TT vào xem rồi nói hộ chị sai ở chỗ nào nhé..
http://vynn-k-gb.blogspot.com/
Em có qua đó xem, thấy Cô Yên Vũ nói hết trong đó rồi, nó rất đơn giản thôi. Chị qua nhà Bống xem có phải như ý chị nói không?
DeleteHai tuần mau nhỉ, mới quay đi quay lại là hết ...hihih
Luôn an vui, bính yên chị M nhé!