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