Tiện ích Bài viết ngẫu nhiên luân phiên

Bài viết ngẫu nhiên luân phiên là một kiểu tiện ích hiển thị 1 bài viết một cách ngẫu nhiên rồi tự động chuyển sang bài viết khác. Tiện ích này hiển thị tiêu đề bài viết, tác giả, ngày đăng bài viết và một phần tóm tắt bài viết.

Bạn có thể xem Demo ở cuối bài viết này.

Tiện ích này sử dụng Feed Atom nên blog của bạn phải đăng ký với Feedburner của Google.

Để cài đặt tiện ích này, bạn cần có một điều kiện là API Key của AJAX. Để lấy API Key cho blog của bạn, vào trang này để đăng ký. Bạn nhập địa chỉ blog rồi nhấn Generate API Key.

Tiếp theo bạn đăng nhập tài khoản Google bằng địa chỉ gmail để chuyển đến trang lấy API Key. Đó là một chuỗi dài gồm các chữ cái và con số lộn xộn, bạn hãy copy chuỗi số đó rồi lưu lại.

Đã có API Key, vậy chúng ta bắt đầu cài đặt tiện ích này như sau.

Đăng nhập Blogger, vào Design >> Page Elements. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript.

<style type="text/css">
#feedGadget {margin: 0 auto;width: 350px;}
.gfg-root {background-color: #234;border: 1px solid #456;font-family: Arial,sans-serif;font-size: 12px;height: auto;overflow: hidden;padding: 4px;position: relative;text-align: center;}
.gfg-title {background-color: #456;color: #CDE;font-size: 16px;font-weight: bold;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-subtitle {background-color: #456;font-size: 14px;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-entry {height:9.9em;overflow:hidden;position:relative;text-align:left;width:100%;}
.gfg-root .gfg-entry .gf-result {background-color:#123;height:100%;padding:0 10px;position:relative;width:auto;}
.gfg-root .gfg-entry .gf-result .gf-title {color:#ABC;display:block;font-size:13px;font-weight:bold;line-height:1.2em;margin-top:5px;overflow:hidden;white-space:nowrap;}
.gfg-root .gfg-entry .gf-result .gf-snippet {color:#AAA;font-size:12px;line-height:1.3em;margin-top:5px;}
.clearFloat {clear:both;}
.gfg-list {display:none !important;}
</style>
<script src="http://www.google.com/jsapi/?key=API Key" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'Huynh Nhat Ha on Blogger', url:'http://huynh-nhat-ha.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "Bài viết ngẫu nhiên luân phiên"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading ...</div>
<div style='clear: both;'></div>

Trong đoạn code trên, bạn cần điều chỉnh width: 350px sao cho tương thích với chiều rộng vùng bố trí tiện ích này, thay API Key của bạn vừa đăng ký, thay Huynh Nhat Ha on Blogger bằng tiêu đề blog của bạn, thanh huynh-nhat-ha bằng tên blogspot của bạn.

Lưu tiện ích là OK. :55)

Tiện ích này do Blogdoctor.me phát triển. Tôi có điều chỉnh một chút để code trở nên ngắn gọn hơn rất nhiều.

Loading ...

More about →

Tiện ích Bài viết ngẫu nhiên cho blogspot

Bài viết ngẫu nhiên cũng là một tiện ích cần thiết cho bất kỳ blogspot nào. Tiện ích này hiển thị danh mục các bài viết trên blog một cách ngẫu nhiên cho toàn blog hoặc cho một nhãn nào đó.

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

Để 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>

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.

More about →