"Tiện ích bài viết ngẫu nhiên"

(Traidatmui.com) – Hôm trước mình đã giới thiệu cho các bạn tiện ích bài viết mới nhất có ảnh thumbnail, tiện ích khá hữu ích. Tuy nhiên tiện ích đó chỉ hiển thị những bài mới đăng gần đây thôi, mình xin chia sẽ thêm cho các bạn một tiện ích sẽ hiển thị tất cả các bài viết trên blog một cách ngẫu nhiên không theo thời gian đăng bài. Chắc hẳn cũng đã có nhiều blog áp dụng tiện ích này rồi, tuy nhiên nếu blog bạn chưa có thì có thể tham khảo thủ thuật này.

Hình ảnh minh họa

☼ Tiến hành thủ thuật

1. Đầu tiên bạn hãy vào tài khoản blog mình
2. Vào bố cục
3. Thêm phần tử HTML/Javascript và thêm code bên dưới vào phần tử đó

<style>
.random-posts a {
color:#006666;}
.random-posts a:hover {
color:#ff0000;
}
</style>

<div class="random-posts" id="random-posts"><script type="text/javascript">

function getRandomPosts(json) { var maxEntries = 15; 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="http://www.traidatmui.com/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script></div>

☼ Chỉnh code:
- Code màu xanh dương nhạt là màu của tiêu đề bài viết.
- Code màu xanh lá là màu chữ và màu nền khi rê chuột vào tiêu đề bài viết.
- Số 15 trong code chính là số bài viết hiển thị.
- Thay địa chỉ http://www.traidatmui.com thành địa chỉ blog của bạn.

4. Cuối cùng save lại là xong

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