Tự Tạo Google Ajax Feed Widget cho Blogger

(danghienIT) - Hôm nay blogviet đọc được một bài viết của HocTro nói về cách tự tạo Google Ajax Widget cho các blog hiện đang sử dụng dịch vụ của Blogger.com. HocTro là một người khá giỏi trong việc sử dụng kiến thức CNTT của mình để tối ưu hóa các tính năng vốn không thể thành có thể từ dịch vụ của Blogger.com. Chính vì những người như Hoctro, Jackbook hay Amanda mà các blogger ngày càng yêu thích blogger. Hơn thế nữa, ranh giới giữa các blogging platform dần bị thu hẹp nhờ những chuyên gia thực sự như họ.

Xin được đăng và sắp sếp lại các ý cho dễ hiểu trong bài của Hoctro và hy vọng các bạn thấy có ích cho blog của mình.

Bước 1: Trước hết hãy lấy một mã code API của Google, mã code này hoàn toàn miễn phí. Bạn có thể theo đường link ở dưới để lấy mã code cho riêng blog của mình nhé:

http://code.google.com/apis/ajaxfeeds/signup.html

Sau khi khai báo địa chỉ blog và nhấn nút Generate Key bạn sẽ thấy màn hình hiện ra và mã API của bạn sẽ có dạng như sau:

ABQIAAAA9vsQ6YcZXQgKy22oJGZUsxSWQzZUNFv5m7C1XECc7Wp0-CKXVBRaUmMrvG1KKgCaGq_wy8OiAsjAqg

Bước 2: Tiếp theo, bạn đăng nhập vào Blogger Dashboard của mình và tìm đến thẻ như hình dưới:

Bước 3: Sau khi tìm được thẻ , dán đoạn code ở dưới vào ngay trước thẻ nhé, lưu ý khi dán code thì nhớ thay từ YOUR-KEY in đậm ở hình dưới bằng code mà bạn mới Generate ở trên nhé. Mỗi blog chỉ có một key để phân biệt với blog khác mà.

<script src=’http://www.google.com/jsapi/?key=YOUR-KEY‘ type=’text/javascript’/>
<script src=’http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js’ type=’text/javascript’/>
<style type=’text/css’>
@import url(”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css”);
#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: “Georgia”, sans-serif;
}

</style>
<script type=’text/javascript’>
function load() {
var homeUrl = “<data:blog.homepageUrl/>”;
var feed = homeUrl + “feeds/posts/default”;
new GFdynamicFeedControl(feed, “feedControl”);
}

google.load(”feeds”, “1″);
google.setOnLoadCallback(load);
</script>

Sau khi dán vào, bạn hãy Save Changes.

Nếu không sảy ra lỗi gì khi Save Changes thì bạn tiếp tực làm theo các bước tiếp theo nhé. (Trong trường hợp sảy ra lỗi khi copy code và past, hãy Clear Edits và làm lại nhé).

Bước 4: Bạn tạo một Gadget hay Widget mới, và chọn “HTML/JavScript” widget, như hình dưới nhé:

Sau khi đã chọn Widget hoặc Gadget như trên, bạn thêm đoạn code ở dưới vào phần content:

<div id=”feedControl”>đang tải dữ liệu, xin hãy chờ…</div>
Xem hình dưới để biết nhé:

Sau khi thêm Widget hoặc Gadget mới, bạn kéo nó và thả vào vị trí mà bạn muốn nó hiển thị. Mình thêm vào trên cùng của bài viết ở giữa như hình dưới:

Bạn có thể thay đổi font, màu sắc, chiều ngang….v..v bằng cách chỉnh sửa CSS.

Tìm đến đoạn code ở hình dưới để chỉnh sửa như in đậm màu đỏ nhé, mặc định là chiều ngang là 440 nhưng Blog VietAd đã đặt mặc định như hình dưới. Các bạn có thể tùy vào blog mình mà chỉnh sửa nhé:

margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 600px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFFFFF;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;