How to put a gadget above your blog's header

Iskandar Blogger 5:42 AM
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.