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

Tạo

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 bạ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ớ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://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.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='Blog Posts' type='Blog'>

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ài viết liên quan trong template và chèn dòng sau:

<b:include data='post' name='related-posts'/>

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

<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: 150,
  perLabel: 25,
  perPage: 10,
  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ẻ head:

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

15 nhận xét :

  1. Chèn đoạn code http://pastebin.com/raw.php?i=jadhiYiU vào. Sau đó lưu, nhưng khi kiểm tra lại thì sau "Blog1" không còn nữa (nó tự xóa). Sao nhỉ Hỗn tạp?

    Trả lờiXóa
  2. Một số nhược điểm của phân trang như click vào trang sau thì nó hiện ra không đúng khi có nhiều bài đăng trông 1 ngày, không phân trang được cho cho label ( cái phân trang cho blogger kiểu wordpress ấy, không phải cái phân trang của anhvo)

    Còn file css thì mình cũng up bằng svn vào thư mục https://***.googlecode.com/svn/trunk/ như bạn. Lạ 1 cái là, do không chạy nên mình thử lấy file style trên googlecode của bạn chèn vào thì chạy (tuy css khác nhau nhưng 1 số thuộc tính css trùng tên nên mình biết được nó hoạt động), còn khi down file style của bạn về up lên google code của mình thì không hoạt động.

    Trả lờiXóa
  3. Lỗi khi post nhiều bài trong 1 ngày đã được tác giả fix rồi mà bạn:

    http://www.techieblogger.com/2009/10/page-navigation-javascript-code-for-blogspot-blogs.html

    Trang này là nguồn của hack này, các blog lớn khi đăng hack pagination đều link back lại. Bản của Anh Võ mình ko chắc có bắt nguồn từ đây ko, nhưng bạn thử tham khảo thử xem.

    Về Google Code, bạn coi lại file (khi duyệt tại Google Code - Source - svn/trunk) xem mime của file có đúng là text/css ko. Nếu ko thì phải config lại chương trình SVN của bạn để nó chèn mime của file. Trước đây mình cũng gặp lỗi này, cũng phải tự add bằng tay mấy mime vào TortoiseSVN.

    Trả lờiXóa
  4. Hóa ra cái phân trang mình thử là bản chưa fix. Cảm ơn bạn rất nhiều.

    Về google code thì mình không rõ mime là gì, tuy vậy sau một hồi mày mò trên google cũng add được mime vào TortoiseSVN. :D

    Một lần nữa cảm ơn bạn.

    Trả lờiXóa
  5. à, mình đã post bài này lên blog của mìhnh rồi, bán j qua check xem mình để linkback thế đã được chưa nhé, có gì góp ý cho mình luôn

    Trả lờiXóa
  6. Ừ, bạn đổi "hontap.blog" thành tên đúng của mình: "Hỗn tạp Blog" là được :).

    Trả lờiXóa
  7. ah anh có cái code nào làm ẩn tấm ảnh khi xem bài viết ko nhĩ ?
    em muốn chèn 1 tấm ảnh làm hình đại diện (thumbnail )cho bài viết với kích thước nhỏ để khi vào homepages nó sẽ load tấm ảnh nhỏ đấy nhanh hơn.
    Như những trang báo bây giờ đều làm như vậy.

    Trả lờiXóa
  8. Em thêm class="small-thumb" vào trong code của thẻ image, sau đó thì chèn đoạn sau vào phần head http://pastebin.com/raw.php?i=Xn7XTh7p

    Trả lờiXóa
  9. kaka đã test rất tốt ^_^

    Trả lờiXóa
  10. Với blogger, nếu em add domain vào thì traffic rank được chuyển sang domain mới. Còn nếu đổi domain (ko phải .blogspot.com) thì coi như mất traffic rank. Nếu em để mặc định, đương nhiên được cộng dồn vào blogger. Nếu dùng domain riêng, vẫn có 1 phần tính cho blogger (vì các file css, js, images của họ).

    Traffic rank tính theo kỹ theo subdomain. Em có thể tra traffic rank theo từng subdomain của blogspot. Những traffic rank này ko được cộng vào blogger. Traffic rank của Blogger là dành cho các truy cập vào trang chủ blogger.com (lưu ý blogspot thì ko có trang chủ). Cho nên chẳng có chuyện cộng dồn nào ở đây cả.

    Trả lờiXóa
  11. Muốn post code trong bài viết thì làm thế nào vậy bác. Bác viết tut hướng dẫn cách làm sao cho nó hiển thị code như các bài viết ở blog này. Cảm ơn bác!

    Trả lờiXóa
  12. Đây là bản em dùng:
    http://alexgorbatchev.com/wiki/SyntaxHighlighter

    Hướng dẫn ở trang chủ của nó cũng đầy đủ:
    http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage

    Ngoài ra thì bác chỉ cần Google 1 chút là có hàng loạt bài tut hướng dẫn cho cái này, vì nó rất nổi tiếng :D

    Trả lờiXóa
  13. bác có video k ạ? chứ hướng dẫn chữ em k hiểu cho lắm! nhất là từ dòng:
    "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ài viết liên quan trong template và chèn dòng sau:

    "

    => Em k hiểu chèn vào chỗ nào :( nếu chèn ngoài sau thì chèn chỗ nào mới được ạ?

    Trả lờiXóa