Create your own Blogger Widget

If you're interested in creating a widget for your blog, then listen up!

Why might you want to make one? A couple reasons - Usually, these are seen on blogs offering some sort of networking. From the Warp, House of Paincakes, Wargaming Tradecraft are just a few examples of this.

However, there's nothing stopping anybody from making a Blogger widget of their own. Back in the day, and still seen on the occasional blog is a form of quid pro quo link sharing - If you link to me, I'll link to you.

For whatever reason you want to do this, creating a widget makes adding a link as easy as clicking a button.

Creating the Widget

Google discusses the process in the following link, but I'll clear it up some:
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=53219

All you have to do is put some code on your site. You don't have to sign up or register the widget. Using my widget as an example, change the fields I say to:

The following line creates a form containing the widget details:
<form action="http://www.blogger.com/add-widget" method="POST">

This gives a title to the widget:
Change the value="" text to your own blog title.
<input name="widget.title" type="hidden" value="Wargaming Tradecraft" />

The content the widget will display on blogs it's added to. This is important and a little tricky
The "value" field is what will be displayed on other webpages. This needs to contain a link and you probably also want an image.
You can't use special characters like < or > or "
Instead of < use &lt;
Instead of > use &gt;
Instead of " use '
If you copy the following code, just replace the href='' link with your own website and the src='' link with your own image.
<input name="widget.content" type="hidden" value="&lt;a href='http://nplusplus.blogspot.com/p/network.html'&gt;&lt;img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6iEZw7vUJiL6Nw0Qz7PAscKF5rVdsirHrCn2qATqPQKDX7p692X_xnzgl9e32B8IrYT1keALPI-tYX5CzJDgULZ1-fZRN4mecE_Uh3LNZGe00hlWlXY6xqOmc4k8W5aix-_4PA/s1600/banner_find_a_blog.jpg'&gt;&lt;/a&gt;" />

Required by widget:
<input name="widget.template" type="hidden" value="&lt;data:content/&gt;" />

The website the widget should end up linking to:
Change the value="" text to the address you want the widget to link to. (Used above)
<input name="infoUrl" type="hidden" value="http://nplusplus.blogspot.com/p/network.html" />

The image for the widget::
Change the value="" text to the image you want the widget to link to. (Used above)
<input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6iEZw7vUJiL6Nw0Qz7PAscKF5rVdsirHrCn2qATqPQKDX7p692X_xnzgl9e32B8IrYT1keALPI-tYX5CzJDgULZ1-fZRN4mecE_Uh3LNZGe00hlWlXY6xqOmc4k8W5aix-_4PA/s1600/banner_find_a_blog.jpg" />

Create a button the user clicks to add the widget to their blog.
Change the value="" text to read what you want your button to say.
<input name="go" type="submit" value="Add the Wargaming Tradecraft Widget" />

This closes off the form:
</form>


This will create the following:

Creating the Image

Use a respectably sized image for your widget. While you want to be noticed, you don't want a huge obscene block that eats up real estate on other people's sites. They probably won't go to the effort to resize it for you. Just keep in mind you want something that fits nicely into most bars on the side of a blog.

I use an image 175 pixels wide by 80 pixels tall, I believe I used that because I liked FTW's size and HoP is about twice as tall. That width seems to fit on all the sites I've seen FTW, HoP and my widgets on. Careful when using transparency as you want to make something that will be visible nomatter what blog it appears on. Also, you don't have a lot of room to work with; keep your design simple so the image is not cluttered.

If you wanted, you could even make a banner, which it about 2-4 times wider and lets you add more information to your advertisement, but it won't fit in nearly as many places as a smaller one.