How to put a gadget above your blog's header

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.