DESIGN WEB: "Latest Headlines" Widget Bài đăng mới nhất V2

Đây là widget hiển thị tóm tắt các bài viết mới nhất trên blog của bạn, dựa vào đó mà người đọc có thể theo dõi tin từ blog đó một cách dễ dàng và làm cho blog của bạn trở lên chuyên nghiệp hơn. Widget này được bác Hoctro viết cách đây cũng khá lâu nhưng quá hay nên mình xin dịch sang tiếng Việt cho các bạn dễ làm. Bạn có thể xem hình ảnh của widget đây như sau:

Cách làm rất đơn giản, bạn chỉ cần làm theo đây 3 bước mà thôi.

Bước 1: Đăng ký nhận đoạn mã từ Google AJAX Feed API:
http://code.google.com/apis/ajaxfeeds/signup.html
Bạn chỉ cần bấm chọn vào ô ở dòng I have read and agree with the terms and conditions (printable version) và điền địa chỉ blog vào dòng My web site URL và ấn Generate API Keylà xong. Ngay lập tức bạn nhận được đoạn mã ngay ở dòng Your key is.

Bước 2: Chèn đoạn mã sau vào trước thẻ </head> và nhớ thay YOUR-KEY bằng đoạn mã của Google AJAX Feed API lúc nãy.

<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", {numResults : 4}); <h6>Widget by <a href='http://vntim.blogspot.com/'>VnTim</a></h6> } google.load("feeds", "1"); google.setOnLoadCallback(load); </script>

Bước 3: Vào Layout > Page Elements, sau đó tạo thành phần "HTML/JavScript" mới rồi dán đoạn mã sau vào ô trống:

<div id="feedControl">Loading...</div>

Bạn có thể sửa con số ở dòng sau để điều chỉnh số lượng bài viết được phép hiển thị ( Mặc định là 4 và tối đa là 25 ).

new GFdynamicFeedControl(feed, "feedControl", {numResults : 4});

Nếu bạn muốn thay đổi font hay kiểu chữ thì chỉ cần chỉnh lại đoạn mã này cho phù hợp

.gfg-title { color : #612e00; background-color: #FFF3DB; } .gfg-title a { color : #612e00; } .gfg-root { border: 1px solid #956839; font-family: "Georgia", sans-serif; }

Cuối cùng bấm Lưu lại để hoàn tất. Khi bạn vào blog sẽ bắt gặp widget đó như hình ở trên. Theo mình bạn nên kéo widget đó vào ngay đầu trang trông sẽ đẹp hơn.

vntim