Thursday, May 23, 2013

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


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


Sau đó, tìm trong template của bạn dòng:

(Ở đâ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)




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:

Ở đâ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ẻ  (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 phía trên):

(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ỏ:
Để 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
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ẻ  (đoạn code màu xanh đầu tiên):

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.

No comments:

Post a Comment