Where to get the HTML code for popular gadgets in Blogger

This article explains where to find alternative code for many of the gadgets provided by Blogger - and why you might want to do this, and how to back up your HTML gadgets.

Gadgets in Blogger

Blogger makes it easy to add a gadget to your blog: you pick the one you want from a list, enter the details on the gadet-options screen, click ok and save. Voila, a gadget doing "just what you want" appears where you put it.

But there are some issues with this simple process.

1 Controlling (and even knowing) what the code does

You don't control what the code does - and you can't even see it, so you have to believe that it does what it says it will do, and nothing else.

For many people this seems obvious: of course a gadget will do what it promises, or people won't use it. But maybe it does what it promises and more, eg if you use the poll-gadget, the results are shown on your blog. But does Google keep a record of them anywhere else? You can't tell, because you cannot see the code behind the gadget.

2 No more customisations

You can only customize the gadget using the options in the gadget screen - and sometimes these are limited or out-dated.. For example, if you have signed up with Adsense and use the AdSense gadgets, then there is no way to restrict them to only show image ads, even though the option is available in AdSense itself. And you can only choose from the limited the ad-unit sizes and colour-schemes availabel in Blogger

3 Keeping a backup copy

You can't back up the "widget settings" that you put into the gadget-options, besides manually writing a note to yourself or taking a screen shot.

Is there a way around these issues?

The answer to these issues is to not use the gadgets that Blogger provides. Instead, replace them with the HTML code for the gadget which you need to "find somewhere", and install it into your blog as code. (And if you install it into a HTML/Javascript gadget, make sure you keep a backup copy in a documentation blog or similar).

This table lists places where you can get HTML/Javascript code equivalents for many of the popular Blogger gadgets. In general, this code is not restricted to Blogger - it can be installed into any blog or website that accepts HTML / Javascript gadgets.

Gadget	Where to get the code?
Any of the AdSense gadgets	Log in to your AdSense account at www.adsense.google.com, and get the code from there in the usual way.
The Amazon Affiliates / Associates gadgets	See Amazon/Blogger integration is finished - what are our options now for information about these
Search	Use a Google Custom Search engine
Translate	Go to https://translate.google.com/manager/add, enter your website name and the language it is in. Then on the next screen, choose the options you want (all languages vs specific ones), and press Get Code. You are given a meta-tag to add to your blog in the usual way for adding meta-tags, and some HTML/Javascript which you add in the usual way for code.
Labels	You can build your own linked list (see below) and put the label-search value into them (eg http://YOUR-URL/search/label/LABEL-VALUE). This isn't quite the same, because it doesn't give a count of posts by label, but may be good-enough for some cases
Link List - and Unlinked list.	Make your own, by using the post-editor to make the code, and creating a linked-list there.
Google Plus	Get code for a range of gadgets from http://www.google.com/webmasters/+1/button/
Offering an RSS subscription to your blog	See offering an RSS-subscription service, using Feedburner.
Follow-by-email	See Offering an email-subscription to your blog, using Feedburner
Recent Posts	If you have used Feedburner to make an RSS-Subscription option (see above), then you can also get the code for a Recent-posts gadget from Feedburner: go into the Publicize tab, choose BuzzBoost. Choose the settings, Save, and Feedburner gives you the HTML code to display your feed.
RSS	Make an RSS feed for the site you want to display, then use Feedburner's BuzzBoost tool to get the code to display the feed.
About Me	Make your own, by using the post-editor to make the code eg you might like to include a picture etc. Or you can just type the plain text into the Contents field of an HTML/Javascript gadget if you won't want any formattting or links
Archive	I haven't been able to find any way to do this - apart from making your own in a page and linking to it.
Picture	See getting the HTML-code to put a picture into your blog