没找到称心的边栏Gadget吧，不必出头丧气咯。下面我们将介绍如何创建自定义的边栏Gadget（以下将成为Gadget），效果如下图所示：
什么是Gadget
边栏Gadget是一种强大的小工具，所以您可能认为创建一个Gadget多么的不容易。事实上如果您了解关于HTML、CSS、JavaScript，创建Gadget变得是那么的简单。最简单的Gadget仅仅有一个HTML文件以及XML描述文件。当然多数的Gadget包含图片文件（jpeg Png ect）、脚本文件(js ,vbs ect)、样式文件(CSS)。所有这些都被放置在一个以.gadget为扩展名的ZIP压缩文件中。
步骤一：创建主HTML文件
命名为video.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>My Video</title>
5 <script type="text/javascript" src="js/video.js"></script>
6 <style type="text/css">
7 body{margin: 0px;padding:0px; background-image:url(images/bg.jpg); background-repeat:repeat-x; width:200; height:155; background-color:#000;}
8 </style>
9 </head>
10 <body id="gb">
11 <embed src="http://www.tudou.com/l/e3MBzOUVNaQ" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" id="elpy" name="elpy" width="200" height="150">
12 </embed>
13 </body>
14 </html>
15
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>My Video</title>
5 <script type="text/javascript" src="js/video.js"></script>
6 <style type="text/css">
7 body{margin: 0px;padding:0px; background-image:url(images/bg.jpg); background-repeat:repeat-x; width:200; height:155; background-color:#000;}
8 </style>
9 </head>
10 <body id="gb">
11 <embed src="http://www.tudou.com/l/e3MBzOUVNaQ" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" id="elpy" name="elpy" width="200" height="150">
12 </embed>
13 </body>
14 </html>
15
步骤二：创建XML描述文件
XML描述文件是一个描述Gadget的文件，也可以说是一个Manifest。它将一个Gadget中的内容链接在一起，但是我并不认为其是一个Manifest。因其仅仅提供了该Gadget的描述信息（作者，版本，描述，名称，图标链接等）以及主HTML文件的链接。命名为：gadget.xml
1 <?xml version="1.0" encoding="utf-8" ?>
2 <gadget>
3 <name>My Video</name>
4 <namespace>netwenchao.gadget</namespace>
5 <version>1.0</version>
6 <author name="Denny.dong">
7 <info url="http://netwenchao.cnblogs.com%22/>
8 <logo src="images/logo.png" />
9 </author>
10 <copyright>Denny.dong © 2009</copyright>
11 <description>You can view video from any video site when you have the URL of the video.Just like tudou or youku ect.</description>
12 <icons>
13 <icon height="320" width="240" src="images/gadgetIcon.png" />
14 </icons>
15 <hosts>
16 <host name="sidebar">
17 <base type="HTML" apiVersion="1.0.0" src="video.html" />
18 <permissions>full</permissions>
19 <platform minPlatformVersion="0.1" />
20 </host>
21 </hosts>
22 </gadget>
2 <gadget>
3 <name>My Video</name>
4 <namespace>netwenchao.gadget</namespace>
5 <version>1.0</version>
6 <author name="Denny.dong">
7 <info url="http://netwenchao.cnblogs.com%22/>
8 <logo src="images/logo.png" />
9 </author>
10 <copyright>Denny.dong © 2009</copyright>
11 <description>You can view video from any video site when you have the URL of the video.Just like tudou or youku ect.</description>
12 <icons>
13 <icon height="320" width="240" src="images/gadgetIcon.png" />
14 </icons>
15 <hosts>
16 <host name="sidebar">
17 <base type="HTML" apiVersion="1.0.0" src="video.html" />
18 <permissions>full</permissions>
19 <platform minPlatformVersion="0.1" />
20 </host>
21 </hosts>
22 </gadget>
- name: gadget的 名称
- version: gadget 的版本.
- author: 作者信息
- info url: 网址
- info text: 网址名称
- logo src: logo图片地址
- copyright: 版权声明
- description: gadget的描述
- icon src: 该Gadget的图标文件
- base src: 该Gadget的主HTML文件
步骤三：创建Gadget
选择以上两个文件，压缩成ZIP格式。修改扩展名从.ZIP为.gadget。双击该文件，即可出现安装提示窗体。如下图：
必备知识：
HTML相关知识
Web脚本，如javascript，vbscript等
相关资源：
http://msdn.microsoft.com/en-us/library/dd370867(VS.85).aspx
下一篇将介绍如何显示并添加配置信息，以及添加Dock等...