Tiện ích Bài viết liên quan có phân trang

Lấy cảm hứng từ tiện ích Bài viết liên quan có phân trang từ blog Hỗn tạp, tôi có điều chỉnh một số điểm và có hướng dẫn chi tiết hơn để giúp cho tiện ích Bài viết liên quan có phân trang (Related Posts with Navigation) trở nên hoàn thiện hơn.

Xem Demo.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0 4px 0;margin-top:4px;padding:0 0 5px}
#related-posts a{color:blue;text-decoration:none}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:0;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block;background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
.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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
</script>
</b:if>
<!--Related Posts Scripts and Styles End-->

Chú ý trong phần code ở trên, tôi thêm vào đoạn javascript được đánh dấu màu đỏ nhằm giúp cho thư viện jQuery không xung đột với các thư viện khác (nếu blog của bạn chứa các thư viện khác như Scriptaculous chẳng hạn), bởi vì nếu xảy ra sự xung đột thì chức năng phân trang sẽ không hoạt động được.

Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-1'>
rồi đặt trước nó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='related-posts'/>
</b:if>

Bước 3. Tìm dòng <b:includable id='feedLinksBody' var='links'>
rồi đặt trước nó với đoạn code sau đây.

<b:includable id='related-posts' var='post'>

<div id='related-posts'>
<h2>Bài viết liên quan</h2>
<ul id='related-posts-list'/>
</div>
<script type='text/javascript'>
var relatedPostsConfig = {
maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]
};

function getRelatedPosts(json) {
var posts = [],
num = 0,
max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count &gt; json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded

if (max &lt;= 0) {
return;
}

for (var i = 0; i &lt; max; i++) {
entry = json.feed.entry[i];

posts[num] = {};
posts[num].title = entry.title.$t;
for (var j = 0; j &lt; entry.link.length; j++) {
if (entry.link[j].rel == &quot;alternate&quot;) {
posts[num].url = entry.link[j].href;
break
}
}
num++;
}

relatedPostsConfig.count += max;

for (i = 0; i &lt; num; i++) {
var li = document.createElement(&quot;li&quot;),
a = document.createElement(&quot;a&quot;);
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 &lt; relatedPostsConfig.hiddenLabel.length; i++) {
obj[relatedPostsConfig.hiddenLabel[i]] = &#39;&#39;;
}

relatedPostsConfig.count = 0;
relatedPostsConfig.container = document.getElementById(&quot;related-posts-list&quot;);
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
if (!(&#39;<data:label.name/>&#39; in obj)) {
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;/feeds/posts/summary/-/&#39;+&#39;<data:label.name/>&#39;+&#39;?alt=json-in-script&amp;callback=getRelatedPosts&amp;max-results=&#39;+relatedPostsConfig.perLabel+&#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
}
</b:loop>
</b:loop>
})();

$(function(){
var pages = 1;
while ($(&#39;#related-posts-list &gt; li&#39;).length) {
var $ul = $(&#39;&lt;ul/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
$(&#39;#related-posts-list &gt; li:lt(&#39;+relatedPostsConfig.perPage+&#39;)&#39;).appendTo($ul);
pages++;
}
$(&#39;#related-posts &gt; ul:gt(1)&#39;).hide();
var $div = $(&#39;&lt;div class=&quot;related-posts-navi&quot;/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
for (var i = 1; i &lt; pages; i++) {
var $a = $(&#39;&lt;a id=&quot;related-posts-page-&#39; + i + &#39;&quot; href=&quot;#&quot;/&gt;&#39;).click(function(){
var id = $(this).attr(&#39;id&#39;).substr(19);
$(&#39;#related-posts &gt; ul&#39;).hide();
$(&#39;#related-posts &gt; ul:eq(&#39; + id + &#39;)&#39;).show();

// change class
$(&#39;.related-posts-navi &gt; a&#39;).removeClass(&#39;related-posts-navi-selected&#39;);
$(this).addClass(&#39;related-posts-navi-selected&#39;);
return false;
}).append(i).appendTo($div);
}
$(&#39;.related-posts-navi &gt; a:first&#39;).addClass(&#39;related-posts-navi-selected&#39;);
$(&#39;&lt;div style=&quot;clear:both&quot; /&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
});
</script>
</b:includable>

Lưu Template là OK.

Chú ý: Trong đoạn code trên, bạn có thể thay đổi những tham số trong những dòng sau đây:

maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]

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

Chúc bạn thành công!