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 haventt 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

I'm sure that there are others too - what gadgets would you like to find the code for?  Drop a comment below, and I'll see what I can find.

---

Related Articles:

Use a documentation blog to keep important information about your blog.

Installing code into your blog

Adding a gadget to your blog

Setting up Adsense for your blog a

Showing picture-only AdSense ads in your blog.

Read more > Where to get the HTML code for popular gadgets in Blogger

How to put a gadget into a post in Blogger

This article describes how to put a gadget into a blog post / page - or at least how to make it look like you have done so.

Gadgets and Blog-posts

Previously, I've explaiend how to add a gadget to your blog. In that post, I said that the only place where you could put a gadget was one of the areas defined by your template - basically the header, footer or sidebar.

For gadgets where you get the HTML or Javascript code from somewhere else, it's easy to add the code to a post - see adding code from external sources to your blog for more information.  But for gadgets from the Add a Gadget list, there is no way to do this.

But it's fairly easy to make it look like you have put a gadget into a post or page, provided you're willing to accept the risks of editing your template.

The way to do this is by putting the gadget below the blog-posts area, putting any further post-content into another HTML-gadget under this, and then setting both of these up to only show on the specific post or page that you want the gadget to be "in".

While this is tedious, I don't expect the restriction of putting gadgets inside posts to be changed anytime soon.   (Go on Blogger ... prove me wrong!)

Follow these steps to put a gadget into a post or page:

1)   Make the post or page
Give it a title, and if there is any content that you want to put above the gadget, then add it now.


2)   Publish the post / page.
If you use a Post, remember that it will go out in your RSS feed - and it could look strange for your subscribers to see a half-written post - make sure that what you'd doing is worth any confusion that this may cause.
And if you use a Page, you may need to adjust the Pages gadget to not show it, depending on what how visitors will access the page.

Despite these side-effects you need to publish the post/page now, before the gadget is added, because you need its address later on.   So take note of the URL of your published post.


3) Add the gadget to your blog in the usual way.
Position it immediately underneath the Blog Posts gadget. Find out the gadget-ID, and keep a note of it.


4) If there is any content that you want displayed after the gadget, then

• Use the post-editor (or any other tool) to generate the HTML code for this content 
• Add an HTML/Javascript gadget:  Put the code you made into the Content field, and position the gadget immediately underneath the gadget you added in step 3.
• Note the ID of this gadget, too.

5)   Set up which page/post your gadget is shown on:

Edit your template (don't tick the expand widgets checkbox).

For both of the gadget-IDs that you noted (the one that's going "inside" the post, and the one that contains the rest of the "post"),  change the template so that they are only displayed on the Page or Post that you created in the first step.

The way to do this is very similar to only showing a gadget on your home page, except that instead of

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

the condition to use is

<b:if cond='data:blog.url == "URL-OF-THE-POST-YOU-MADE"'>>

How well does it work?

I'm still testing to see how well this approach works, and what gadgets it's most suitable for.  Some, eg the Labels and Followers gadget, are likely to expand to fill the space available.   So will Search - though if it doesn't then it might be as easy to just use a custom-search-engine, which will give you the code.   AdSense gadgets will take the space required for the type of gadget you choose, but again it's probably simpler to just get the code from AdSense and put it into your post directly.

One issue I've found is that the gadget is left-aligned, and there is no way to make the "post" text flow around it if it doesn't take the entire post-width.

It may be possible to centre the gadget within the post, by putting this code around in in the template:

<div style='text-align: center;'>
<b:widget id='XXXn' locked='false' title='YOUR-GADGET-TITLE' type='Text'/>
</div>

That said, I haven't tried this yet, and there may be some extra things to think about here.   Let me know if it doesn't work, and I'll try to find a way to solve any problems.

---

Related Articles:

Adding a gadget to your blog

Finding the id for a gadget 

Using the post-editor or generate HTML

The Pages gadget:  a menu bar for Bloggers

Showing a gadget on your home-page and no other pages

Advantages and disadvantages of editing your template

Putting AdSense ads into posts

Read more > How to put a gadget into a post in Blogger

Adding gadgets to your mobile-template makes your blog better for smartphone visitors

This article shows how to add gadgets to the mobile version of your blogger template.

Gadgets and mobile templates 

Previously I've described how to add a gadget to your blog.

If you have not enabled a mobile template for your blog, then visitors who look at it using a mobile device (smartphone, tablet etc) will see all your content and gadgets.   But they will probably have to scroll left and right a lot, because your blog will be a lot wider than their screen.  There might be some issues if you have gadgets that require javascript or particular media players, which their device doesn't have installed. But these are exactly the same as the issues for your visitors who are using desktop computers.

But if you have enabled a mobile template, then readers who are using a mobile device see a different design which is tailored to their screen-width, though still using the colour/theme that you chose.

Blogger faced some challenged when they built these mobile templates: many bloggers put a lot of effort into design and providing gadgets that.    But a 300-ish pixel screen simply does not have room for a sidebar and blog content, and may not have space for some of the things that gadgets do, either.

What Blogger have done is to say that only some gadgets are normally shown on mobile-template versions of your blog:

• Header
• Blog Posts
• Profile
• Pages
• AdSense
• Attribution

However it's easy to add other gadgets to your own customized mobile template, and to set up gadgets that are only seen by readers using mobile-devices - provided you are willing to take the risks of editing your template.

(I've described how to remove the attribution gadget from mobile-templates before, because it's one that some people particularly hate - and of course the same approach can be used for the other standard gadgets too.)

How to add a gadget to the mobile template

First, check that mobile has been enabled for your blog, and that your mobile template is set up to show customizations:   go to the Template tab, click on the gear-wheel under mobile, tick Yes (for show mobile template), then select Custom, and press the Save button.

Add the gadget to your blog, in the usual way:  when you are choosing the parameters, make sure you think about the amount of screen-space that your mobile-readers will have to see it.

Find the gadget ID.

Edit your template: you don't need to expand the widgets.

Locate the gadget code, by searching for the ID you found (tip: use your brower's search function, eg ctrl/F). It will look something like this (slightly different, of course, if the gadget you are working on is of a different type):

<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'/>

To show the gadget on the mobile version of your blog, add mobile='yes' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>

To show the gadget only on the mobile template and not to desktop users, add mobile='only' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

Save the changes.

Use either a mobile device (ideally), or another tool that lets you test blogs as they would appear on different screen sizes, to check that the gadgets are showing as you think they should.

What gadgets should you add to your mobile template?

There are no hard-and-fast rules here:   it's all about what you want your mobile visitors to be able to access.   I have seen people add blog-rolls, linked-lists, polls, profiles, and various other simple widgets.

Gadgets that I think could be more troublesome are slideshows, popular posts (if you try to show a thumbnail), newsreel, subscriptions, gadgets from Amazon.com and other 3rd parties.

You just need to remember amount of screen space which your visitors have, and how large the images are likely to be for them.   And also that gadgets are likely to be shown as the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), so won't be nearly so obvious as they are in the sidebar.

Why put gadgets only in the mobile blog?

You may wonder why a gadget should only go on the mobile version.

One reason is to provide a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I use a two-page google-custom-search option here on Blogger-Hints-and-tips. This lets me control what sites are searched, and use some advanced display features. But a mobile-sized screen won't cope with this. So if I wanted to make Blogger-HAT more mobile-friendly, I'd add a regular search-gadget, but only show it to on mobile-devices so that non-mobile visitors didn't get confused.

Positioning gadgets on the mobile template

As far as I can see, we do not easily have any control over the positioning of gadgets in the mobile-template versions of our blogs.

Some experiments make me think that:

• gadgets from the header in the regular layout are put above the list of posts in the mobile view
• gadgets from the footer in the regular layout are put below the list of posts in the mobile view
• gadgets from the sidebar in the regular layout are put below the list of posts in the mobile view

But there could be more going on here - please let me know if you've worked out any more rules that are applied.

Also, I have no idea how mobile templates will cope with tricks like gadgets that are put above your header: test your blog extra carefully if you've tweaked your template in this way before adding mobile-specific tweaks.

Troubleshooting

Stopping gadgets from showing on mobile-template blogs (ie adding mobile='no') does not require you to choose the Custom option from the list of mobile template.   But adding them (except for the ones in the default list) does.

The default mobile gadgets are  only shown if you have put them onto your blog template: if they are not in your blog at the moment, then they will not automatically be shown just because you enable a mobile template.

What other problems have you had with mobile-templates?

---

Related Articles:



Putting a gadget into your blog

Turning your blog's mobile template on

Advantages and disadvantages of editing your blogger template

Finding the id for any gadget

Adding a google-custom-search

Giving your blog a home-page

Read more > Adding gadgets to your mobile-template makes your blog better for smartphone visitors

Finding the gadget ID for a widget in your blog

This article shows you how to find the "identifier" for a gadget in your blog.  This isn't useful in itself, but is a set in various other template customizations, including putting a gadget on a single page only.

Sometimes you need to find the code-name for a gadget that you have added to your blog, so you can edit your template and control how and where that gadget is displayed.

This may be part of giving your blog a home-page, controlling how your blog looks on mobile devices, or various other tweaks.

Luckily this is very simple.

How to find the id-code for any gadget:

"gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.


Add the gadget to your blog in the usual way.

Edit it again, but don't make any changes to it.

Maximise the window, so you can see the very end of the address bar in the window - at the top of the screen.

Note the word there, entering in a number.   This is the Gadget-id.

In this example, it's Text1,   Other possible values are HTML1, Attribution1, Followers1, etc.

What does the number mean?

The digits at the end of the widget-id show to the number of times that a gadget of this type has been added to the blog:  in a complicated situtation, with lots of gadgets of the same type, it can get into double, or even treble-figures.)

---

Related Articles: 

Controlling what goes on the homepage

Adding a gadget / widget / page-element to your blog

Editing your blogger template

Putting a gadget on your static-pages only - or your home page

Read more > Finding the gadget ID for a widget in your blog

Blogger developer documentation has moved

Blogger have announced that the documentation for people who write tools using the Blogger APIs has moved to https://developers.google.com/blogger/

This iinformation is what you need to know to create and share you own gadgets. It is also very useful for blogger-helpers who want to understand the data / schemas that Blogger uses, in order to work out hacks for the rest of us to use to control the look and feel of our blogs.

The blogger developer forum is another very handy place too.

Read more > Blogger developer documentation has moved

Adding a gadget to your blog, using Blogger's WYSIWYG interface

This article shows how to use Blogger's add-a-gadget tool.  It also looks at how you can move a gadget around in your blog, and describes what you can do with some of Blogger's most-popular gadgets.

Gadgets and types of Blogger template

Previously, I've explained what gadgets (ie widget) are, and the advantages and disadvantages of each method of adding one to your blog, and how to add a gadget to a blog with a dynamic-view template.

This artile looks at the details of using Blogger's own add-a-gadget tool, how exactly to use it, and how to change the placement of gadgets in your blog.

This is more in-depth than the dynamic templates article, and applies mainly to blogs with layout and designer templates.  The same general approach is used for dynamic template blogs, but they do have some features  that aren't discussed here (eg a limited range of gadgets that actually work).

In-post, and HTML-code gadget:

The tool described here lets you put a gadget in any of the "gadget areas" in your blog.   The options are a little different if you want to put a gadget right inside a blog-post.

Also, there are reasons why you might prefer to get the HTML-code for a gadget, and install it like you install any other code to your blog.   Read more about the reasons for using HTML-gadgets and places to get code that's equivalent to Blogger's official gadgets.

How to use Blogger's Add-a-gadget feature

In post-Sept-2011-Blogger (ie the new UI): go to the Layout tab
OR
In pre-Sept-2011-Blogger (ie the old UI): go to the Design > Page elements tab


The Add a Gadget links on the screen shows you all the places that you can currently add a gadget.  Choose which place to add one to to.
(You can make it possible to add gadgets to other places see How to add a gadget above your header, or Adding a new footer section to your template for ideas on how to do this.)

Click the Add a gadget link at the top of the area you choose.

The format of the Choose-a-gadget  that opens is being updated to the look like new interface.

I suspect it's not quite finished yet, so the it may look a little different to what's shown in this picture.

But the main contents should be the same.

Choose a gadget from the list, or one of the tabs:

• You may need to scroll down the list to find the one you need.

• Do not use the search tool in the list to find the gadget that you want - it sometimes doesn't work correctly and only shows gadget from 3rd parties and not the official ones from Blogger.

• Every gadget in the list has a source: some are from Blogger.com. Some are from other recognised companies (eg Amazon.com), But some are from individuals, just like you and me. The danger with using a 3rd party gadget from this list is that you have no way of looking at the code behind it, so you cannot decide if it's safe or not.
  
  I recommend only choosing gadgets from Blogger.com, or other well known companies.

Select the gadget by clicking the small blue plus sign beside the name.


This opens the gadget configuration screen, where you enter the details of how you want the gadget to work.

Every gadget needs different details.

For example, in the Popular Posts gadget, you must choose

• to list popular posts since statistics started, or the last 7 or 30 days
• whether to show the image thumbnail
• whether to show the post snippet
• how many posts to show

When you have entered the parameters, click Save.

This takes you back to the blog-layout screen.  The new gadget is at the top of the list of gadgets in the area where you put it. If you gave it a title, then this will show up. But if you left the title blank, the screen just shows the gadget type.

Use the Preview button to see what the front page of your blog will look like with the gadget added.

Change the position of the gadget if you want to (see the next section if you need help with this).

Once you are happy with the gadget and its position, click Save to apply it to your blog.

How to change the position of a gadget:

You can move a gadget (new or existing) into any place in your blog-layout that you can add a gadget to.   In the Layout (Design > Page elements) screen:

1. Single-click on the gadget and hold the mouse button down.   Keep holding it down.
2. Dragging the mouse moves the gadget to other places, including further down the list of gadgets currently in that space, or into a totally different part of the blog.
3. Once the gadget is in the place where you want it to be, let go of the mouse-button.

Once you are happy with the position of all the gadget, click Save (in the old Blogger) or Save arrangement (new Blogger) to apply the new places to your blog.

There are other things that you can do with gadget, too, including only show them on the Home-page, and making a gadget that looks like a post.

What can Blogger's gadgets be used for

Some of the most popular gadgets provided by Blogger are:

Labels	Lets your readers pick a category and see a list of posts from your blog with that category.
Popular posts	Shows the most-frequently read posts from your blog
Pages	Similar to Labels and the linked-list gadget, this one can show a list of either Pages from your blog or external sources, and it can also be used to make a menu bar for your blog
Blogroll	Highlights other blogs that you follow
Picture	Shows a picture, of your choice, which can link to somewhere as well.
RSS	Displays the last few posts from an RSS feed - this can be any feed that you choose - not just your own one.
HTML/Javascript	Lets you add code that came from a 3rd party, or that you wrote yourself, without having to edit your template.
Link List	A general-purpose gadget for adding a list of web-sites and blog pages, either inside or outside your blog.

Related Articles:

Showing a gadget on the home page only

How to edit your blog's template

Options for adding gadgets to your blog

Adding a gadget above your header

Adding a new footer section to your template

Read more > Adding a gadget to your blog, using Blogger's WYSIWYG interface

Adding a gadget to a blog with a dynamic-view template

This article is about how to add widgets (also known as gadgets) to blogs that have dynamic templates.

Things are looking up: 

Beer glasses can have widgets, and
now  dynamic-view blogs can have them too

Previously I've described dynamic templates, and how you can turn them on, and also off, on your blog.   And when people asked "how do I put a whatever gadget onto my blog", the short answer was " you can't - yet".

But now Blogger have announced that it's possible - their post also shows us how the docked widget bar works.

And if your blog already has a dynamic template, they've added a few gadgets for you.   For my test blog, this was Followers, Archive About me and Subscribe - I'm not sure if these are the only ones, or it was based on my layout before the blog went dynamic.

How to add a gadget to a blog with a dynamic template:

This is just like adding a gadget to a blog with a designer or layout template, ie:

• Go to the Layout tab   (Design > Page Elements, if you're using pre-Sept-2011-Blogger)
• Click Add A Gadget.
• Choose your gadget, and configure it if necessary.
  (NB Blogger appear to be converting all the existing gadget setup screens to the new-interface-look-and-feel, so don't be surprised if the buttons etc inside the gadget parameter windows look different)
• Preview to check it's ok
• Click Save Arrangement.

It's not perfect yet:

The layout editor window looks somewhat strange, in post-Sept-2011-Blogger anyway:

More importantly, Blogger's announcement says

Gadgets supported in Dynamic Views currently include: Blog Archive, Followers, Labels, Profile, Subscribe (a new gadget - automatically present if either Follow By Email or Subscription installed), and Link List.

So no HTML, no AdSense, no Blogroll (except you can make your own with the Link List), Statistics, Slideshows, Polls, etc ... yet.    To make matters worse, there's nothing to tell you what gadgets you cannot add:  you put them in, but they're just not there once you save and look at the blog.

But some of them may become available, if Blogger can figure out how to place with within the type of space they're using for gadgets on dynamic views, where we don't really have a sidebar.   And until then, the following section from my original post still applies.


In the meantime:

The October announcement did show how you can customize the colors of your dynamic-template blog.

Southern Speakers has been publishing lots of how-to information about how you can format dynamic blog elements by adding CSS rules - his most recent post is about how to remove static page titles.   He has also described a way to put gadgets that you can get the code for into a page - this description is specifically for the Followers gadget, but could be applied to other code too, provided you can get the code.

And if you want, you can just switch back to using your most-recent template, and wait for the improved version of dynamic templates to arrive.

Or you could do cunning things, like put AdSense ads into your posts instead.




For history's sake:

This is the body of my original post.   It's not true any more, but I want to keep it here, in case I need to use some of this text agaon - or so you can see how much better things are now.

The Full Story:Google told us in late October 2011 that they're working on making this possible.   They haven't said when they expect to have this available.   If we're really lucky it will be "one day very soon" (and boy will I have a red face if they announce how to do it tomorrow!)

I suspect that it's not an easy thing to do, because dynamic template blogs are basically a totally different way of displaying your blog, using your RSS feed and (now) CSS rules, rather than reading all the design details from the blog itself.   Providing this, along with the level of design control that people with Designer and Layout templates are used to, might be quite technically challenging.

I've written this article because I got sick of explaining "no not yet" in the help forum:  I really want to give people there the full story, but finding the link to that October announcement every time was a pain.   Now I can just link to this.

But hopefully I'll be able to totally re-write it, very soon  :-)    Giving negative answers isn't nearly as satisfying as explaining how to do things.

---

Related Articles:



Dynamic templates and your blog

Options for adding gadgets to your blog

Remove your dynamic template carefully, to return to your previous design

Putting AdSense ad-units inside blogger posts

Understanding your RSS feed

How to add a CSS formatting rule to your blog, without editing the template

What type of template does your blog have?

Read more > Adding a gadget to a blog with a dynamic-view template

Options for adding gadgets to your blog

There are (at least) three different ways of adding a gadget to your blog.  This article explains what a gadget / widget is, and looks at the advantages and disadvantages of each method.

Gadgets and Blogs

A gadget is simply a small thing that does "something useful". In real-life, it may be a bottle-opener, screw-driver, pocket-knife, etc.

On your blog, a gadget may be called a  widget or page-element. But it's the same idea: a small piece bit of code that does something useful. You could put a gadget into a post, but usually they're found in the sidebar, header or footer.

There are three main ways to install a gadget into your blog:

1. The Add a Gadget wizard provided by Blogger
2. Manually installing the code into your template
3. Using a customized "add to Blogger" button provided by some 3rd parties who make gadgets for websites

The pros and cons of with each approach are listed here.

Note that adding gadgets to blogs with dynamic-view templates is a little different - the following lists are written with layout or designer templates in mind.


Blogger's Add a Gadget feature

The add a gadget option is a built-in part of the Blogger software. It is the first way that most people add extra useful tools to their blogs.

Advantages

• Easy to use - you can move items around with just drag and drop
• Gives access to Blogger's pre-built tools
• In gadgets built by Blogger, the screen where you enter the details (title, picture location, code, which labels to include, etc) is usually easy to understand: they don't use geeky words like "parameter" (even though this is really what they are asking for on the screens)
• You have total control over where to put gadgets - you just drag-and-drop them in to place.

Disadvantages

• You don't have total control over item formatting and placement
• There is no easy way to back up your settings
• If you use the same type of gadget many times, and don't give each one a title, it can be confusing to see in the layout which gadget you are working with.
• There are some gadgets available in the add-a-gadget wizard that did not come from Blogger -and some of them don't work properly. (Google do not guarantee that all the gadets in the list are correct, or that they are free of viruses, malware, etc.)
• You cannot see the code behind any of the gadgets, so you can never be 100% certin what they do.

Manually installing code into the template:

Adding a gadget into your template is just the same as adding any other code: you need to get the code, and you need to know exactly where to put it.   As well as the usual advantages and disadvantages of editing your template, there are these ones:

Advantages

• You have total control over item placement, alignment and formatting
• Code you have installed is fully backed up when you back up your template
• You can use code from anywhere, not just from Google
• You can control what pages the gadget appears on, by adding some extra code at the same tim you add the gadget.

Disadvantages

• You need to get the code from somewhere: either you need to write it yourself, or from a 3rd party that you trust.
• It's not nearly as easy - you need to edit your template
• You need to position items using code, drag and drop will not work.
• You can use code from anywhere, not just from Google - so you might be tempted to use code from dodgy 3rd party sources.
• If you do make calls to 3rd parties, and they later disappear, then your gadgets will give an odd-looking messages instead of working the way they used to.

Suggestion:
If you are going to install code from 3rd parties, make sure that you read it over first. If it calls pictures, consider making a copy of those pictures youeself, and changing the code to link to your copy instead of theirs. If it has calls to scripts that are hosted somewhere, consider doing the same - but be aware that the downside is that if the code needs to change for a future version of Blogger (or windows), you won't automatically get the new code.

Another option:
If you have the code, then you can also add it to an individual post or page, by pasting it into the HTML table of the editor.  If you link to this from the menu bar, then readers will have a way to get to it from every post, otherwise they will only see it when they see the page/post you put it in.


Use a 3rd party's "add to Blogger" option:

Many websites that let you generate code to do "something useful" also ask you where you want to put that code.

If you choose "a website", they just give you the HTML, which you can install in the normal way.

Choosing "Blogger" in the AddThis gadget window shows a big red "Install Blogger Widget" button

But if you tell them that the code is going into Blogger, they give you a button, or perhaps even open a new window or tab for you, call www.blogger.com, and go into the Add-a-gadget screen and put a gadget with their code into the screen: all you need to do is check that it's ok, move it to a different place if wanted, and press Save changes.

The big advantage of this approach is that it is easy: you don't have to copy-and-paste the code yourself.


Disadvantages:
As well as all the regular disadvantages of adding a gadget using Blogger's add-a-gadget too, there are some specifc ones for this approach:

• If the 3rd party is dishonest, they may ask you to enter your Blogger ID and password into their site - and you have no guarantees that they won't do nasty things with them.
• If you have more than one Blog, you may accidentally put the gadget onto the wrong one
• If your blog is complex, it may be hard to find where on the layout screen the new gadget has been put
• You don't get an opportunity to look at the code to check if it does strange things.
• Because you don't look at the code, you cannot make a backup copy of it (and because it's put into your gadgets, a template backup may not include it or the user-settings that you chose).

My Recommendation

There is no "one right way" to install gadgets: some of Blogger's built-in gadgets are very handy, and I make a lot of use of them. But in general:

Usually, I just tell the 3rd party sites that I'm putting their code onto "my website" and install the code that they give me in into a regular HTML/Javascript gadget.  There is a slight risk that this could cause problems if the other company offers slightly different code for Blogger vs regular websites - butI have not yet found a case where this happens.

If you're adding code from a 3rd party, then it's a good idea to store a copy of that code in a documentation blog (or similar), so that you can easily re-cereate it it if the gadget is accidentally deleted.

---

Related Articles:



How to put posts into your pages in blogger

Using Blogger's widget-addition tool

Advantages and disadvantages of editing your template

Use a private blog to store documentation about your blog

Adding 3rd party HTML into your blog

Templates types in Blogger.

Read more > Options for adding gadgets to your blog

The Page gadget: a menu bar for your blog, with links to just about anywhere

This article shows how you can use the Pages gadget as a general purpose menu bar for your blog.

Evolution of the pages gadget 

Based on a work by latvian (evolution)
 [CC-BY-2.0], via Wikimedia Commons

When Blogger first introduced so-called "static" pages, I thought they had a lot of potential.

As I investigated, though, I came to the conclusion that they were more trouble than they were worth, so I recommended abandoning them and just using posts.   Or at least abandoning the Pages gadget - even I sometimes use a Page for things that I don't want to send out in my RSS feed, eg custom-search-engine results.

But when the September-2011 version of Blogger  was introduced, the Pages gadget got a new feature:  now, it can include links to any website URL, not just your own pages.  

This makes it a lot more versatile - even though the effect is just the same as adding a Link-list gadget and putting it into the right area of the blog-layout.


How to add general web-links to your Pages gadget.

Make sure you are using the new (ie Sept 2011) Blogger software.  
(Get to it with the "switch to updated version" link if you're not - you can always go back later with the item in the gear-wheel menu, or the link on my sidebar)

Go to the Pages tab of your blog's dashboard.

Click the drop-down arrow beside New Page:

Select web-address

Enter the title that you want to show up on your menu bar  (phrases with spaces are allowed, some special characters may not be).

Enter the URL which should be opened when someone clicks on the new menu-bar item   (make sure the web-site address starts with http:/  )

Click Save

You can change the order of the items in your menu bar by picking them up using the "grab bar" to the left of the item name, and drag-and-dropping them up or down the list of menu-bar entries.

When your menu-bar items are in the right place, click Save Arrangement in the top right corner of the window.



What your readers see ...

Visitors to your blog will see a menu bar either at the top or the side depending on where you put your pages gadget.

Most readers will think that the items in your menu bar will take them to "pages" in your blog.   Iif they hover over an item in the bar, they will see the web-address it is linked to, in the same way that their browser usually shows this   (eg in Chrome, I see it in faint text at teh bottom left of the screen).

This will work well if the web-addresses you have added are within your own blog (eg search-labels, if you are using this approach to putting your posts into pages).

But it may be confusing if you've put in links to other websites, or invalid links   (remember, there was no "test this link" option when you were adding the web-site URL to link to).

Currently I do not know any way to make pages-gadget links to external websites open in a new browser window.    (If you know a way, the comments area is just below - please share!)




The Pages-gadget vs a Link-list

When the Pages-gadget was first introduced, they were just like regular linked-list:   the magic was that Blogger introduced a new area in the templates where linked-lists are formatted differently.

This is still true to a great extent.   But on blogs viewed with dynamic templates, the presence of a Pages gadget causes the layout to be a little different.  

I haven't tested it thoroughly, but I suspect that the presence of a link-list gadget on the template (remember, you cannot currently add gadgets to dynamic template blogs)  would not have the same effect.  

This makes me suspect that Blogger may introduce some other enhancements based on the Pages gadget, so it may be worth using them instead of Link-list gadget in the future, so as to get the benefit of these changes when they eventually happen.

---

Related Articles:



Putting your posts into Pages

Making your links open in a new browser window or tab

Adding a search tool to your blog

Adding gadgets to dynamic view blogs

Blogger'sPages are more trouble than they're worth

The difference between posts and pages

What are dynamic blog templates?

Read more > The Page gadget: a menu bar for your blog, with links to just about anywhere

How to put a gadget above your blog's header

This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger.

Overview

If your blog has a layout or designer template, then (almost?) all of Blogger's templates start out with a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image if you've uploaded one.

And even if you go into the place in the layout-designer where you can re-arrange the layout by drag-and-dropping items, you cannot drag any gadgets to above the header.

But this is easy to change, provided you are willing to accept the disadvantages of editing your blog's layout template.


How to allow changes above your blog's header:

Follow these steps to make it possible for you (or any blog administrator) to add gadgets to the area about your blog's heading section:

1  Edit your blog's template
Old UI:  Design > Edit HTML
New UI:  Template > Edit HTML > Proceed

2  Download a full copy of your template, and put it somewhere safe (in case something goes wrong, and you need to restore from it).

3  Find this code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Hint:  use your browser's search tool, (Edit>Find in Firefox, Ctrl/f in Chrome) to look for a key phrase like "id='Header1'

4  Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Notice that there are two changes made:

• Setting maxwidgets to greater than 1, and
• Setting showaddelement to Yes, instead of No

5  Click Preview, to check that your template is working:
This shows you a view of the screen, but you won't be able to click the items on the preview srcreen.   It's a good idea to do this even for very simple changes, so that you know that they will save correctly.

6  Click Save to apply the changes to your blog's template.

7  Quickly test your blog, to make sure that nothing else was accidentally changed.   At very least, you should click one of each "type" of link on the main page (eg one post title, one page tab, on search button)


What you will see:

After you make this change, the next time you edit your blog layout (New UI:  Layout    Old UI:  Design > Page Elements), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.


Related Articles: 



Disadvantages of editing your blog's layout template

How to set up an extra administrator for your blog

Types of Blogger template

Planning changes to your blog - in private

How the data in Blogger blogs is organised.

Read more > How to put a gadget above your blog's header

Blogger / Amazon integration is finished - what are our options now?

This article is an update about the interation between Blogger and Amazon, and what options Blogger users have instead.

Blogger and Amazon working together ...

In December 2009, Blogger announced integration with Amazon (which was actually only integration with Amazon.com).

At the time, there were hints that this was only the first of many new money-making  options and programmes for Bloggers.

These features were added to Blogger to support the integration:

• Ability to sign up for Amazon.com on the Monetize tab
• Existing Amazon.com users link their Blogger and Amazon account on the Monetize tab
• A tick-box on the Monetize tab that let "amazon-integrated" bloggers turn on the Amazon-product-preview  without having to install the code
• Amazon Product Finder (APF) - a gadget that bloggers could use in the the Post Editor, to make a link to a product from Amazon.com without leaving the Post Editor screen
• A range of gadgets from Amazon were added to the list  in Add a Gadget 

... but not any more?

For months, there have been complaints in Blogger-help-forum that existing Amazon.com associates couldn't  link their Blogger and Amazon.com Amazon.com accounts on the Monetize tab any more: the function just returned an error, or appeared to work, but didn't actually storing the connection.

Now, with the release of Blogger's new interface, the Monetize tab has been renamed Earnings.  There's no mention of Amazon on it, and no sign of the Amazon Product Finder (APF) in the Post-editor.   And there are reports in Blogger-help-forum that people who had APF turned on in "old blogger" find that it's gone in the new interface - and is broken even if they switch back to the old interface.

On the Amazon.com site their official Amazon-Associates blog is now made with TypePad.   I know that I recently saw instructions about putting things (widgets?) into Blogger, that that these commented that blogger has a new look.   However the instruction were still based on the old interface.   And today, I can't find them at all.

There has been nothing said (that I've seen anyway) by either company.  But I think it's safe to assume that the Blogger / Amazon integration has been abandoned.


Why Did This Happen:

My guess is that there are two big issues.

Firstly, Amazon.com is a lot more than just a bookseller:  Google and Amazon are competitors in some areas (eg document storage), so there's bound to be some friction, even though they managed to agree a compromise in 2009.   And possibly that compromise wasn't profitable enough for either of them.

Second, and possibly more importantly, there is an internationalisation issue.

Blogger is a multi-lingual, multi-country platform:  different languages and cultures are catered for within the same platform and subject to the same terms and conditions.  Blogger users all live with the same rules, that are based on American law (eg the 13-year age limit, which is most probably based on America Children's Online Privacy Protection Act).

Amazon, on the other hand, have different platforms for different countries (even amazon.ca for Canada, vs amazon.com for the USA+rest of the world).   This is understandable, because countries have  vastly different laws about on-line selling and taxes, so Amazon's rules need to be quite different in different places.  Even in the European Union,  we see regular updates to the terms and conditions that basically amount to the addition of new countries/languages - Amazon.es (for Spain) was the latest one - and these come with small rule-tweaks too.  These big differences mean that integration with a multi-national product like Blogger is not easy:   there would be lots of on-going issues with making the sites work well together.

My guess is that these two factors combined have killed off the integration.


What can bloggers do instead

You can still sign yourself up for Amazon.com (or Amazon.co.uk, or .ca or whatever-other country), and make the links to products and Amazon-widgets yourself.   Personally, I think this better anyway, because it gives you control ove the look and feel (colours, backgrounds, tracking-IDs) used on the ads, and choices about where to install the HTML on your blog.

There is no alternative for the Amazon Product Finder gadget - except opening Amazon in a different tab, and making the links there as you need them.  It's little bit more work - but only just.

There are still Amazon.com gadgets in the Add a Gadget list  (from Layout in the new interface, Design > Page Elements in the old one) - you can find them under the features tab.

For now at least, it looks like Blogger's monetize tab is limited to AdSense , and it is a money-making option that you can sign up for from within Blogger.  (Even though there are a few vital extra steps that you should take, even though Blogger hasn't told you about them, like blocking certain ad-categories, and stopping malicious use of your AdSense ID).

And there are, of course, many other advertisting programmes and affiliate programmes that you can consider if AdSense doesn't work for your blog.

---

Related Articles:

-->

Signing up for Amazon.com

Alternative advertising programmes

Stopping malicious use of your AdSense ID
.
Making links to products and Amazon-widgets yourself

Changing colours and design of Amazon.com advertisements

Installing the Amazon Product Preview code

Amazon / Blogger integration is with Amazon.com only

Read more > Blogger / Amazon integration is finished - what are our options now?