how to create gadgets using google gadget

Google gadgets are small components that are offered by Google that can be easily plugged into your website. Google gadgets allow you to create a dynamic reusable components that can be placed on any webpage on the web. Creating gadgets using google gadget editor is very easy.

First you have to create the gadget xml file using google gadget editor (GGE).

http://code.google.com/apis/gadgets/docs/legacy/gs.html

A google gadget input file is an xml having parent Module tag.

Module tag contains ModulePrefs and Content tag.

A typical google gadget xml file is shown below:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="My Gadget"
         directory_title="My Gadget"
         description="This is a sample gadget"
         author="your_name"
         author_email="your_name@xyz.com"
         author_location="your_location"
         author_link="http://www.your_name.com"
         width="300" height="200">
                  <Require feature="dynamic-height" />
                  <Require feature="analytics"/>
                  <Require feature="setprefs" />
  </ModulePrefs>
  <UserPref name="refresh"
         display_name="Refresh Interval (seconds):"
         default_value="20"/>
  <UserPref name="resize"
         datatype="bool"
         display_name="Resize text based on % change:"
         default_value="true"/>
  <UserPref name="bold"
         datatype="bool"
         display_name="Bold Text:"
         default_value="true"/>
  <Content type="html">
          <![CDATA[  
                  <script>
                           // your javascript code here
                           /**
                            * _IG_Prefs will allow you to access the value of UserPref
                            * that you have defined like refresh, resize and bold.
                            */
                           var prefs = new _IG_Prefs();
                  </script>
                  <style>
                           // your css style code here
                  </style>
                  <div id="contentdiv"></div>
         ]]>
  </Content>
</Module>

Next you need to publish it using google GGE. Once you're done with your gadget publishing it will be ready for your website. You can personalize your iGoogle webpage by adding your newly created gadget. Also, you can add your gadget to Google gadget directory from your gadget dashboard. You can also add your gadget xml file on your website directly without hosting it to Google gadget directory.