How to create Google gadgets.Google gadgets là những tiện ích nhỏ ta có thể nhúng vào site, blog hay ngay cả trên desktop. Đặt biệt trong Google sites, Blogger hay iGoogle thì Gadget này càng trở nên quan trọng, chúng làm cho nội dung trang của bạn thêm phong phú và dễ dàng quản lý.
Trước đây để làm site của bạn hấp dẫn, chúng ta chỉ có thê lụt lọi trong kho gadget của google một tiện ích mà chẳng cần quan tâm tại sao chúng lại có mặt trên cõi đời này!!? Nhưng qua bài viết này, các bạn có thể tự tay biên tập cho riêng mình một tiện ích và publish nó cho tất cả mọi người cùng dùng. Nghe thật hấp dẫn đúng không nào nhưng để làm được điều đó, chúng cần phải có một chút kiến thức về lập trình xml, html, javascript ...
Đầu tiên bạn truy cập vào Gadget Editor của Google. Bạn thấy trong vùng soạn thảo có sẵn vài dòng code, đó là cấu trúc cơ bản của file xml.
<![CDATA[Nhưng trước khi biên soạn nội dung, chúng ta bổ sung một vài thông tin cho gadget để xuất bản nó sau này (nếu chỉ dùng mình ên thì không cần!) thông qua thẻ <ModulePrefs>
Nội dung ở đây...
]]>
<ModulePrefs title="Magic Window - SaliproIT"
title_url="http://salipropham.blogspot.com"
thumbnail="đường dẫn ảnh làm đại diện"
screenshot="đường dẫn ảnh xem trước"
height="200" width="300"
author="Salipro Phạm"
description="Cửa sổ ma thuật"
author_email="saliproit.sgu@gmail.com"
category="Tools">
<Require feature="dynamic-height"/>
</ModulePrefs>
Thư giãn xí trước khi đọc tiếp nhé!
Tiếp theo chúng ta cùng biên tập nội dung nhé! Các bạn xem ví dụ tạo một iframe bên dưới:<?xml version="1.0" encoding="UTF-8" ?>Sau khi biên soạn xong, trong Gadget Editor chúng ta chọn File > Save hoặc Save as.. để lưu lại.
<Module>
<ModulePrefs title="Hello World!" />
<!-- Phần khai báo biến để lấy giá trị từ người dùng Gadgets -->
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="home">
<![CDATA[
// Nội dung chính.
<html>
<head></head>
<body>
<span> Đây là phần nội dung sẽ xuất hiện cố định</span>
<div id='dest'>
<img src="http://www.google.com/ig/images/spinner.gif">
</div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// Cài đặt biến.
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
// Tạo đối tượng <iframe> bằng xml.
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// Xóa nội dụng có trong <div id="dest">
var c = document.getElementById('dest');
c.innerHTML = '';
// Thêm đối tượng <iframe> vào <div id="dest">
c.appendChild(iframe);
}
</script>
]]>
</body>
</html>
</Content>
</Module>
Nếu muốn xuất bản cho tất cả mọi người File > Publish > Publish to iGoogle Directory.
Sau này có nhu cầu chỉnh sửa, bạn vào lại Gadget Editor > File > Open
Vậy là chúng ta đã tự mình biên tập xong một gadget. Vậy muốn Add vào Google sites thì sao?
- Nếu bạn đã xuất bản rồi thì sau một khoản thời gian bạn có thể search thấy Gadget của mình trong phần Public
- Nếu không xuất bản thì bạn chỉ cần click vào tên file *.xml trong Gadget Editor và copy đường dẫn. Trong Google sites vào Insert > More gadgets > Add gadget by URL và dán đường dẫn file *.xml vào.
Chúc bạn thành công! Có thắc mắc các bạn comment phía dưới hen. Mình sẽ cố gắng chia sẽ cùng các bạn.
0 Nhận xét