'Bài viết liên quan' cho Blogger, bản nâng cao, có phân trang

“Bài viết liên quan” cho Blogger, bản nâng cao, có phân trang Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản “bài viết liên quan” hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang. Trong bài viết này, tôi sẽ hướng dẫn các...
Nội dung trích xuất từ tài liệu:
“Bài viết liên quan” cho Blogger, bản nâng cao, có phân trang “Bài viết liên quan” cho Blogger, bản nâng cao, có phântrang Script tạo danh sách các bài viết liên quan cho Bloggerban đầu được Hoctro phát triển, sau đó được nhân rộng ravới khá nhiều chỉnh sửa. Các bản “bài viết liên quan” hiệnnay đều cho phép cấu hình số bài viết hiển thị và số bài viếtlấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê sốlượng lớn các bài viết liên quan thì chưa script nào có khảnăng phân trang. Trong bài viết này, tôi sẽ hướng dẫn cácbạn làm phân trang cho chúng.Script này thích hợp với các blog cần liệt kê số lượng lớncác bài viết liên quan (VD như các tập trong 1 bộ truyệntranh). Nếu blog bạn không có nhu cầu này, hãy dùng cácbản cũ mà bạn thấy phù hợp.Cách cài đặtMở template của bạn ở chế độ chỉnh sửa HTML (hoặcdownload file template về để mở), chèn đoạn sau ngayphía trước thẻ : 2 .related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display3:block;float:left;margin- right:10px;padding:2px 5px;text- decoration:none} .related-posts-navi4a:hover{background:#36c;color:#fff;text -decoration:none} .related-posts-navi .related-posts-5 navi- selected{background:#36c;color:#fff}6 Sau đó, tìm trong template của bạn dòng: rồi chèn ngay phía sau đoạn code trong link này:http://pastebin.com/raw.php?i=jadhiYiU.Cuối cùng, tìm đến vị trí mà bạn muốn hiển thị các bàiviết liên quan trong template và chèn dòng sau: Cách tùy biếnTiê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ằmtrong đoạn code mà bạn copy từ linkhttp://pastebin.com/raw.php?i=jadhiYiU):1 2 Related Posts3 4 (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:1 var relatedPostsConfig = {2 maxPosts: 150,3 perLabel: 25,4 perPage: 10, hiddenLabel: [Label 1, Label 2,5 Label 3]6 };Trong đó:- maxPosts: chỉ số lượng bài viết liên quan (tối đa) đượchiển thị- perLabel: chỉ số lượng bài viết liên quan (tối đa) tínhtheo 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âncách bằng dấu phẩy. hiddenLabel được dùng khi bàiviết của bạn có nhiều label, trong đó có 1 số label đặc biệtmà 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ầnliệ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:1 hiddenLabel: []Mẹo nhỏ:Để chỉ hiện các bài viết liên quan của label đầu tiên, hãycấu hình maxPosts = perLabelNgoài ra, tôi cũng tạo 1 số style cơ bản cho các nút chuyểntrang, là đoạn CSS được chèn ở trong thẻ head:1 .related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display2:block;float:left;margin- right:10px;padding:2px 5px;text- decoration:none} .related-posts-navi3 a:hover{background:#36c;color:#fff;tex t-decoration:none} .related-posts-navi .related-posts-4 navi- selected{background:#36c;color:#fff}5 Các nút phân trang này tôi làm theo mẫu của Flickr, nếucá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 comment