How to Add Gadgets Inside the Header of Blogger Blogs

Some templates allow you to add page elements inside the header. If you are not using one of those you can employ this neat little tweak to put gadgets like a search box or ad spaces inside the header of your Blogger blog. It allows you to place pretty much what ever you want inside the header. And here is how to do it.

1. Go to Dashboard --> Design --> Edit HTML.
2. Find the following code (Ctrl + F):

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

3. Insert the following code just below that:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

4. The result should look something like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now you should have 2 sections to the gadget section inside the header. But you will have to position them correctly.
5. In order to do this you will want to locate the following line of code:

]]></b:skin>

6. Add the following code just above it:
(Older Templates)

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%; float: left;}
body#layout #header-right {width: 50%; float: right;}

(Newer Templates)

#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}

6 a. If you are using a newer template you need to locate the following code as well:

]]> </b:template-skin>

Just above that code place the code below:

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

7. Now apply this to your blog and go to Page Elements. In Page Elements you should see the gadet/widget areas now available. Add a gadget.
8. Now you might have to go back to the code in section 6 and change the width around in the first 2 lines. Play around with it until it is to your liking. You can just click preview after you changed it to see what it looks like. As for the padding you will need to adjust this to move the gadget around on the blog. You can view my post on padding and margin if you have trouble understanding the values.
That´s all!
Good luck!