Saturday, April 18, 2009

How to create blogger gadgets?

The blogger gadgets are nothing but simple XML files.
Each of these xml files are composed of html and
optionally javascript code.

In this post I will show a simple example where a user
can create a simple gadget, include in her blog and then
eventually modify and submit the gadget to google so that
it could be made available worldwide to all users.

The following simple code is the test.xml file which you can
upload at your favorite webserver.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Test, gadget!
]]>
</Content>
</Module>

Use the add a gadget on your google blog. At the bottom end
of the left hand side you will see an option that says add your own.
Use that option to enter the URL of place where you are hosting
this test.xml file. Adding the gadget from there on should be
as simple as adding any other gadget to your blog.


Inside a Blogger Gadget -

As shown in the code above, the gadget is just a simple xml
file that can include html and (optionally) javascript code.
This code is a vanilla html hello world program which can
be modified by adding other html tags such as the image
( <img> ) tag. In a simple followup to this example I will
add an <img> tag to the file to add an image that you
can use to display an image in your gadget -

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Test, gadget!
<img alt="Photo" src="http://URL_to_my_image.gif" />
]]>
</Content>
</Module>

In the above code please change src of the picture to
the place where the image is hosted. Upload the code
to any webserver and use that URL to add and test
the gadget as mentioned above.

Please post comments if you see any issues with
the same.

0 comments:

Post a Comment