Tôi chưa biết đích xác ai là tác giả viết phần Javascript của tiện ích này, chỉ biết rằng nó được lưu truyền khá lâu rồi. Trước đây Blogger Fan Dung có giới thiệu tiện ích này tại một bài viết trên Mothuthuat.com. Khi tôi giới thiệu lại tiện ích này, tất nhiên ban đầu sẽ không được chú ý bởi các độc giả đã biết qua cách cài đặt tiện ích này. Tuy nhiên, tôi muốn cho tiện ích hoàn thiện hơn và bạn sẽ không phải uổng công khi đọc lại bài viết của tôi.
Bạn có thể xem Demo ở đây.
Bài viết ngẫu nhiên
- Tạo Auto Readmore cho blog chuyên về phim
- Tiện ích Danh ngôn trong ngày sử dụng Javascript độc lập
- Tạo sidebar menu trượt độc đáo sử dụng Scriptaculous
- Tạo nút Back to Top siêu đơn giản
- Giới hạn số bài viết cho các trang nhãn
- Tạo thanh menu sổ dọc sử dụng Scriptaculous
- Giới thiệu một kiểu phân trang đẹp cho Blogger
- Làm đẹp code trong bài viết bằng SyntaxHighlighter
- Cài đặt Bộ Yahoo Emoticons cho Comments
- Hiệu ứng đàn xếp trượt ngang sử dụng Javascript
Để cài đặt tiện ích này cho blogspot của mình, bạn chỉ cần đặt toàn bộ phần code sau đây vào phần nội dung của một tiện ích HTML/JavaScript là được.
<style type="text/css">
#random-posts {
}
#random-posts ul {
list-style-type: none;
margin: 0 10px;
}
#random-posts li {
}
#random-posts a {
background: transparent url(http://img97.imageshack.us/img97/9070/weedbullet.gif) no-repeat 5px 50%;
display: block;
font-weight: normal;
height: 16px;
line-height: 16px;
padding: 3px 5px 2px 20px;
}
#random-posts a:hover {
background-color: #f5f5dc;
}
</style>
<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10; // Thay số 10 để hiển thị số lượng bài viết
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=999" type="text/javascript"></script>
</div>
#random-posts {
}
#random-posts ul {
list-style-type: none;
margin: 0 10px;
}
#random-posts li {
}
#random-posts a {
background: transparent url(http://img97.imageshack.us/img97/9070/weedbullet.gif) no-repeat 5px 50%;
display: block;
font-weight: normal;
height: 16px;
line-height: 16px;
padding: 3px 5px 2px 20px;
}
#random-posts a:hover {
background-color: #f5f5dc;
}
</style>
<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10; // Thay số 10 để hiển thị số lượng bài viết
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=999" type="text/javascript"></script>
</div>
Tôi đã thêm vào phần CSS để định dạng các thuộc tính CSS cần thiết cho tiện ích này. Nếu muốn hiển thị các bài viết ngẫu nhiên cho một nhãn nào đó thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code sau.
<script src=”/feeds/posts/summary/-/Tên nhãn?alt=json-in-script&callback=getRandomPosts&max-results=999999″ type=”text/javascript”></script>
Bạn cần thay tên nhãn áp dụng tiện ích cho đoạn code trên.
Cam on bai viet cua ban
Trả lờiXóa