Home Home » Blogger » Random Posts cho Blogger

Random Posts cho Blogger

Saturday, February 28, 2009
Tôi có tìm kiếm trên mạng hướng dẫn cách hiển thị các bài ngẫu nhiên trong Blogger, nhưng chỉ tìm thấy 2 hướng dẫn của Phydeaux3 và Purple Moggy. Cả 2 hướng dẫn này chỉ hiển thị 1 bài ngẫu nhiên, không hỗ trợ hiển thị 1 danh sách gồm nhiều bài, vì thế tôi viết bài này để chia sẻ với các bạn có cùng quan tâm. Hi vọng nó có ích với những ai đang dùng Blogger.

Làm theo dạng widget


Cách làm này sẽ giúp bạn chèn thêm 1 widget (page element) vào 1 vị trí tùy ý do bạn lựa chọn trong Layout. Để thực hiện, bạn hãy làm theo các bước sau:

- Login vào Dashboard, chọn Layout
- Nhấn vào Add a gatget và chọn kiểu HTML/Javascript
- Phần tiêu đề bạn đặt tùy ý, còn phần nội dung, bạn copy và paste đoạn code sau vào:

<div id="random-posts"></div>
<script type='text/javascript'>
function getRandomPosts(json) {
    var maxEntries = 10;
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    indexPosts.sort(function() {return 0.5 - Math.random()});
    if (maxEntries > numPosts) {
        maxEntries = numPosts;
    }
    var container = document.getElementById('random-posts');
    var ul = document.createElement('ul');
    for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == 'alternate') {
                a.href = entry.link[j].href;
                break;
            }
        }
        a.appendChild(document.createTextNode(entry.title.$t));
        li.appendChild(a);
        ul.appendChild(li);
    }
    container.appendChild(ul);
}
</script>
<script src='/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999999' type='text/javascript'></script>

- Để tùy biến số lượng bài viết hiển thị (mặc định là 10), bạn hãy sửa lại giá trị của maxEntries trong dòng thứ 4, thay số 10 bằng số bài sẽ hiển thị mà bạn muốn:

var maxEntries = 10;

- Save lại và thử nghiệm

Chèn vào vị trí bất kì trong blog


Có đôi lúc bạn không muốn chèn vào các widget mà chèn thẳng vào 1 vị trí nào đó trong blog như phía dưới mỗi bài viết chẳng hạn, thì khi ấy bạn hãy làm như sau:

- Login vào Dashboard, chọn Layout và chọn tiếp Edit HTML
- Nhớ nhấn vào Download Full Template để sao lưu template trước khi thực hiện
- Đánh dấu vào ô Expand Widget Templates để hiện thị đầy đủ template
- Tim đến vị trí bạn muốn hiển thị, VD nếu ở dưới mỗi bài viết thì thường vị trí đó là post-footer-line-1
- Chèn đoạn code ở trên vào vị trí đó

Lưu ý: nếu bạn copy trực tiếp đoạn code trên thì có khả năng bị báo lỗi. Nguyên nhân là do các kí tự <, >, & ... đã không được mã hóa đúng. Để khắc phục, bạn hãy vào trang Code Converter để chuyển các kí tự đó sang dạng tương ứng. Sau đó tiến hành chèn lại vào vị trí đã định là được.

Chúc các bạn ngày cuối tuần vui vẻ.

************************************************

Update: Nếu đoạn code trên không thực thi được thì các bạn thử với đoạn code dưới đây xem sao. Ở đây tôi chỉ thay thế việc thao tác với các DOM node bằng hàm document.write:

<script type='text/javascript'>
function getRandomPosts(json) {
    var maxEntries = 10;
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    indexPosts.sort(function() {return 0.5 - Math.random()});
    if (maxEntries > numPosts) {
        maxEntries = numPosts;
    }
    document.write('<ul id="random-posts2">');
    for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == 'alternate') {
                var link = entry.link[j].href;
                break;
            }
        }
        document.write('<li><a href="' + link + '" title="' + title + '">' + title + '</a>');
    }
    document.write('</ul>');
}
</script>
<script src='/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999999' type='text/javascript'></script>
Chia sẻ bài viết
Bài liên quan