Wednesday, August 19, 2009

build your own gadget

Google gadget are tools for  using in igoogle (Google new home page) or in blogger . This tools are used in sidebar of  blogger and you can add it  from layout with click in “add gadget” options .they are to many pre built gadget that you can use them like follower gadget .You can also  creat  your own gadget. In this article you’ll see how is possible

Gadget source have been writing with xml language .you can write in every xml editor or even  notepad and save them . Of cource it is better that you have a preview and error checker in this page you can have   Google  gadget official  editor This is sample gadget source code  for learning . I write this code by myself you can chage it for another use

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs

    title="dah alert" height="50"

     title_url="http://my-a-it.blogspot.com/"

     author="dawood abbaspour">

    <Require feature="setprefs" />

    </ModulePrefs>

<UserPref

    name="alert"

    default_value="hi"

    datatype="string"/>

<Content type="html">

<![CDATA[

    <script type="text/javascript">

    // Get user preferences

    var prefs = new _IG_Prefs(__MODULE_ID__);

    // Increment value of "counter" user preference

       var youralert= prefs.getString("alert");

       alert(youralert);

    </script>

   your    blog alert

]]> </Content>

</Module>

in model you have all of gadget codes and in modulePrefs you have gadget information like title and author or…in userpref you have your own gadget setting .In this gadget we have one  user setting “alert” and two gadget setting “title” and “height”

clip_image001 

 For drop down menu you can add this code in gadget

<UserPref name="month"
display_name="month"
datatype="enum"
default_value="1">

<EnumValue value="1" display_value="january__"/>
<EnumValue value="2" display_value=" february__"/>
<EnumValue value="3" display_value=" march__"/>
<EnumValue value="4" display_value=" april__"/>
<EnumValue value="5" display_value="may__"/>
<EnumValue value="6" display_value="june__"/>
<EnumValue value="7" display_value="july__"/>
<EnumValue value="8" display_value="august__"/>
<EnumValue value="9" display_value="september__"/>
<EnumValue value="10" display_value="october__"/>
<EnumValue value="11" display_value="november__"/>
<EnumValue value="12" display_value="december__"/>
</UserPref>

And you’ll see month drop down  menu in gadget settings

For getting value of them  inside javascript use this code  for string type

 prefs.getString("alert");

This is all thing that you need to develop your sample gadget .For making advanced gadget you can see here

1 comment:

  1. Great blog... Nice posts and updates... Useful for all bloggers...

    ReplyDelete