Sunday, August 21, 2016

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.

If your blog has a layout or designer theme / template, then it most probably has 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 theme.

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:

Edit your blog's theme in the usual way

2  Find this code in your theme:
<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 the theme-editor search tool, to look for a key phrase like "id='Header1'

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

Job Done:   after you have successfully saved this change, then the next time you edit your blog layout  (Dashboard > Layout  ), 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 theme

How to set up an extra administrator for your blog

Types of Blogger theme

Planning changes to your blog - in private

How the data in Blogger blogs is organised

How to edit your Blogger theme

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. Thanks..
    I was looking for this to add my adsense in header.
    Now I am able to add adsense in header.
    Thank you

  2. Thanks. nice one..

  3. it works but only as a list not as tabs. how do i change that?

  4. Thank you so much for taking the time to explain this. I got this at one point by adding the meebo bar but didn't know how to add it manually on my other blogs. Bravo!

  5. thank you so much for posting this...this is what i`v been lookig for the past few days and now i`ve got it and my site looks nearly perfect now...thank you and more power :)

  6. How do you put these gadgets as tabs? I'm able to put them above it, but they show up as lists.

  7. Thank you for this! Easy and effective! Thanks again!

  8. How to put the gadget into the page? just like ur "TOPIC" page. need help~ thanks!

    1. Does this help?

  9. It really don't add more gadget beside header.

  10. Hi, I tried doing it in simple template but I keep getting an error Error parsing XML, line 618, column 5: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.Please help

  11. Thanks for the tutorial. Question - It worked but I was looking to get the gadgets side by side instead of list form. Any tips on how to fix that? I was hoping to have the About Me, Search, etc. next to each other across the top of the blog. Any advice would be greatly appreciated. Thanks!

    1. You need to do some more serious template-editing for that. BloggerSentral has a good tutorial, over here:

  12. Unfortunately I keep getting the error that the b:section need to end with a b/section ! but there IS a correct end-tag in my code, so I don't know what's wrong? :s Could you help? :)