Hôm nay:

Tài chính doanh nghiệp

Tin cập nhật

12 tháng 1, 2008

Recent Post & Recent Comment với Google Gadget

Có thể bạn đã quen thuộc với những Recent Comment hay Recent Post được tạo bằng cách đưa feed lên một số trang web và chuyển chúng sang các code javascript. Nhưng cách đó có thể sẽ khiến bạn gặp các lỗi font như :các chữ tiếng việt đều chuyển thành các ô vuông...Vậy phải giải quyết vấn đề đó thế nào? Google Gadget là giải pháp tối ưu nhất.

Bạn hãy tới http://code.google.com/apis/gadgets/docs/gs.html và trong bảng Popular Gadgets bạn chọn Feeds in Tabs. Bạn có thể thấybảng code của Feeds in Tabs sẽ xuất hiện ngay phía dưới.

Bạn hãy xem những đoạn code đầu tiên:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="__UP_title__"
directory_title="Feeds in Tabs"
description="Read up to four Atom or RSS feeds from within a single gadget using tabs. Feed titles and descriptions are optionally included and can be turned off. Customize the font-size and text for tab titles. Fetch 3-12 entries per feed including summaries if available."
author="Daniel L."
author_email="daniel.feedback+feedstabs@gmail.com"
author_affiliation="Google Inc."
author_location="Mountain View, CA"
screenshot="/ig/modules/feeds_tabs.png"
thumbnail="/ig/modules/feeds_tabs-thm.png"
height="250"
scrolling="false"
singleton="false">
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
<Require feature="tabs"/>
<Require feature="analytics"/>
</ModulePrefs>


<ModulePrefs title: tiêu đề của Gadget (Bạn hãy xóa dòng này nếu bạn không muốn nó xuất hiện)
directory_title : tên của Gadget đó khi đưa lên directory của Google (bạn có thể bỏ phần này)
description: Bạn điền blog description của mình vào đây (không bắt buộc)
author: tên bạn
author_email: địa chỉ email của bạn
author_affiliation: tên blog
author_location: Nơi ở của bạn
(đây là những thông tin đi kèm gadget này khi bạn đưa nó lên directory của Google, bạn có thể bỏ trống những chỗ đó cũng được)

height: chiều dài của Gadget (đơn vị px)
scrolling: nếu bạn muốn đưa nhiều bài viết vào đây nhưng không muốn gadget có chiều dài quá lớn bạn hãy thay "false" thành "true"- gadget của bạn lúc này đã có thêm 1 thanh trượt dọc. Bạn có thể click vào preview để xem.

Đoạn code tiếp theo:

<UserPref name="title" display_name="Gadget Title" default_value="Feeds in Tabs"/>
<UserPref name="tabFontSize" display_name="Tab Font Size" default_value="0.7em"/>
<UserPref name="showFeedDesc" display_name="Feed Descriptions" datatype="bool" default_value="true"/>
<UserPref name="feed1"
display_name="Feed 1: URL"
datatype="string"
default_value="http://groups.google.com/group/Google-Gadgets-API/feed/
atom_v1_0_topics.xml"/>
<UserPref name="feedTitle1" display_name="Feed 1: Title" datatype="string" default_value="Gadgets API"/>
.....................
<UserPref name="entries" display_name="# of Entries" datatype="enum" default_value="3">


Ở bảng trên, tôi chỉ đưa ra 1 tab chứa feed và sẽ hướng dẫn các bạn cách thay đổi, các bạn có thể làm tương tự với các 3 tab còn lại. Trong bảng này bạn chỉ cần quan tâm đến những đoạn code sau:

  • <UserPref name="feed1"
display_name="Feed 1: URL"
datatype="string"
default_value="http://groups.google.com/group/Google-Gadgets-API/feed/
atom_v1_0_topics.xml"
/>

default_value=" bạn điền feed của blog vào đây". Ví dụ: tôi sẽ đưa feed của label Adsense-VN vào đây. Đây là địa chỉ feed của tôi:

http://crazyboy89.blogspot.com/feeds/posts/default/-/Adsense-VN


  • <UserPref name="feedTitle1" display_name="Feed 1: Title" datatype="string" default_value="Gadgets API"/>

default_value=" Bạn điền tên tab đó vào đây" . Ở đây tôi lấy tên là :Adsense-VN

  • <UserPref name="entries" display_name="# of Entries" datatype="enum" default_value="3">

default_value=" Bạn điền số bài viết bạn muốn xuất hiện trong Gadget này". Bạn chỉ nên đưa từ 15 bài trở xuống nếu bạn đưa qua nhiều sẽ làm chậm tốc độ load blog.


Đoạn code tiếp theo:

<EnumValue value="3"/>
<EnumValue value="4"/>
............
<UserPref name="summaries" display_name="Summaries" datatype="enum" default_value="-1">
...............
<UserPref name="selectedTab" datatype="hidden"/>
<Content type="html"><![CDATA[

Bạn có thể quy định số chữ của bài viết sẽ hiện trong Gadget thông qua đoạn code:
<UserPref name="summaries" display_name="Summaries" datatype="enum" default_value="200">

Bạn có thể thay giá trị trong code mầu đỏ. Nếu bạn không muốn hiện bài viết bạn điền giá trị "-1"
Nếu bạn muốn hiện toàn bộ bài viết bạn điền giá trị "0". Còn các giá trị từ "1" trở lên sẽ quy định số chữ tương ứng của bài viết sẽ xuất hiện.

Tiếp theo là các code CSS :

<style type="text/css">>
.tablib_table {
font-size: __UP_tabFontSize__;
.......
</style>

.tablib_table :

Font-size: quy định cỡ chữ trong các tab, đơn vị px hoặc em.
Bạn có thể thêm các đặc tính margin và padding, background...vào đây.

.tablib_selected, .tablib_unselected :

Width: chiều rộng các tab, đơn px hoặc %.

.statusLabel:quy định các đặc tính của dong thông báo ( click vào 1 tab bạn sẽ thấy hiện lên dòng thông báo: loading)

.feedHeader: phần header của gadget được mô tả ở đây (nó nằm ngay dưới các tab và trên các bài viết)
Các đặc tính bổ sung: color (mầu chữ), font-weight (kiểu chữ): bold/ lighter/normal/..., font-style: italic/normal....

.feedHeader .feedTitle: đây là đoạn code quy định đặc tính blog title của bạn.
Bạn cũng có thể thêm các đặc tính như trên vào đây.

.feedHeader .feedAuthor: đây là code quy định các đặc tính của tên tác giả

.feedList , .feedList li :bạn có thể thay đổi các đặc tính các bài viết của mình tại đây.

.feedList li div.entryTimestamp :đây là code của thời gian đăng bài. Bạn có thể bỏ nó nếu muốn.

Nhưng đoạn code còn lại là những code Javascript, bạn không cần quan tâm đến nó nhiều.
Sau khi đã chỉnh sửa xong bạn preview trước sau đó save lại. Trong menu "FILE" bạn chọn pulish và chọn Add to a webpage. Trang mới sẽ hiện ra, bạn có thể thay đổi Gadget của mình tại đây. Cuối cùng là "Get the code", bạn copy code này và paste vào 1 widget HTML trong Page element.

Vậy là bạn đã có 1 Recent post cho mình rồi đó. Còn đối với Recent comment, bạn chỉ cần thay
http://crazyboy89.blogspot.com/feeds/posts/default/-/Adsense-VN

bằng:

http://crazyboy89.blogspot.com/feeds/comments/default

Bạn chỉ cần 1 tab Recent Comment thôi (nếu bạn muốn có 4 tab thì có thể giữ nguyên code đó), vì vậy hãy tìm trong bảng code đó và xóa toàn bộ những code liên quan đến những tab còn lại. Chúc các bạn thành công.

Nguồn:www.crazyboy89.blogspot.com

Cảm ơn bạn đã ghé thăm Blog của tôi, nếu bạn muốn theo dõi thường xuyên các bài viết hãy đăng ký nhận bản tin RSS. Và nếu bạn có thắc mắc hay góp ý gì về các bài viết, xin hãy để lại nhận xét của mình bằng cách nhấp vào link "Đăng một nhận xét mới" hoặc "Post a Comment" ở phía dưới. Xin cảm ơn!.
no image
  • Bạn đang đọc : Recent Post & Recent Comment với Google Gadget
  • Đăng bởi :
  • Ngày : 18:42
  • Labels :
  • Mặc định
  • Facebook Comments

4 nhận xét:

NỘI QUY KHI BÌNH LUẬN :
» Không sử dụng những từ ngữ thô tục, thiếu văn hoá
» Không Spam. Được chém gió thoải mái
» Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Chèn link bằng thẻ: <a href="Link" rel="nofollow">Tên</a>
» Tạo chữ <b>đậm<b> và <I>Ngiêng<I>
» Mọi thắc mắc xin liên hệ qua Email,

Cảm ơn bạn đã để lại nhận xét!

Top