Add Widget for Blogger To Add Others To You.

The Layouts feature of Blogger opens up all sorts of new possibilities for people to customize their blogs in interesting ways. And even better, you can design new widgets or modules for others to add to their own blogs.

Here's the general concept: First, design your widget. Then, on your website, create a form that sends its results to me through comment. In that form you include the content of the widget you've created, and maybe some other optional information. When someone clicks the "submit" button on your form, they'll be taken to Blogger where they can add your widget into their blog's layout.

Let's look at a simple example to start with. The following code provides the user with a single button, labeled "Add Me." Clicking that will let me add a widget to your layout that links to the Online Money Xtreme.

<input type="hidden" name="widget.title"

value="Online Money Xtreme"/>

<input type="hidden" name="widget.content"

value="<a href='http://onlinemoneyxtreme.blogger.com/' >Tip and Trick for Blogger</a>"/>

<input type="hidden" name="widget.template"

value="<data:content/>" />

<input type="hidden" name="Online Money Xtreme"

value="http://onlinemoneyxtreme.blogger.com"/>

<input type="hidden" name="Online Money Xtreme"

value="http://www.blogger.com/img/add/add2blogger_lg.gif"/>

</form>

You'll notice we used hidden input fields here, because we don't want the user to change any of the information; I want everyone to get the same widget. You could have easily used other kinds of form fields if, for instance, you wanted the user to enter a title for the widget themselves. It's the name attributes of the form fields that are important, rather than the type attributes.

The important parts of the form are the following:

form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. We recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's blog. It can include almost any well-formed code that you want, except for <html> and <body> tags. Note, however, that you will need to escape the code, as in the example above (e.g. <a> becomes <a>).
widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses <data:title/> <data:content/> as a default.
infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).