Gadgets

To make a gadget you need to use a text editor, and have a web site to embed the gadget into once you have finished. Not all sites permit embedding gadgets.

Google Gadgets Editor

There are 3 main sections in a gadget:
Content Section-type of gadget, html for appearance
User Preferences-controls to specify settings
Gadget Preferences-characteristics of the gadget, i.e title, author, size

Chose the content first- Example:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
  <small style="font-weight: bold; text-decoration: underline;"><span style="font-family: Comic Sans MS;"><Content type="html"></span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">  <![CDATA[ </span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">    <div style="text-align:center"><a</span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">      id="Riggs" title="My Photo Album" target="_blank" </span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">      href="http://picasaweb.google.com/doc.examples/ShelfBoy"></span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">      <img border="0" alt="Photo" src="http://doc.examples.googlepages.com/Riggsie-OP.jpg" </span /><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">      title="Click Here."></a></span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">    </div></span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">  ]]> </span><br style="font-family: Comic Sans MS;" /><span style="font-family: Comic Sans MS;">  </Content></span></small>
</Module>

<big><big>Then choose the user preference-Example:</big>

</big><span style="text-decoration: underline; font-weight: bold;"><?xml version="1.0" encoding="UTF-8" ?></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;"><Module></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  <ModulePrefs title="Preferences for __UP_myname__" height="250" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  <UserPref name="myname" display_name="Name" required="true" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  <UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/rowan-headshot.jpg"/></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  <UserPref name="mychoice" display_name="Show Photo?" datatype="bool" default_value="true"/></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  <UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" ></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Red" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Aqua" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Lime" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Yellow" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Pink" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="Orange" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">    <EnumValue value="White" /></span><br style="text-decoration: underline; font-weight: bold;" /><span style="text-decoration: underline; font-weight: bold;">  </UserPref> </span>

DOC Types - <a href="http://en.wikipedia.org/wiki/Document_Type_Declaration">DOCTYPE</a>   Quirks Mode - <a href="http://en.wikipedia.org/wiki/Quirks_mode">quirks mode</a> 
Choosing Content - <a href="http://code.google.com/apis/gadgets/docs/fundamentals.html#Content_Type">Choosing a Content Type</a> 
<big><big>User Preference Attributes</big></big> - <a href="http://code.google.com/apis/gadgets/docs/reference.html#Userprefs_Ref">Reference</a>
Javascript Preferences - <a href="http://code.google.com/apis/gadgets/docs/reference/">JavaScript Reference</a>
Lock-down Domain Feature - <a href="http://code.google.com/apis/gadgets/docs/reference.html#lockeddomain">locked-domain</a>
Substitutions - <a href="http://www.google.com/search?q=html+escaping">HTML-escaped</a> - <a href="http://www.google.com/search?q=url+escaping">URL-escaped</a>
<big><big>Module Preference Attributes</big></big> - <a href="http://code.google.com/apis/gadgets/docs/reference.html#Moduleprefs_Ref">Reference</a>
<big><big>Gadget Checker</big></big> - <a href="http://www.google.com/ig/adde?moduleurl=www.google.com/ig/modules/codechecker/codechecker.xml" target="_blank">Gadget Checker</a>