Learn How To Add Gadget Inside Header

Sometimes we want to add a gadget for adsense, HTML, Javascript or other beside header. Here i've just got it from AiresOfwar. From his explanation, I've tried do it to my template and it work. Actually, this template have 2 columns. First column for header and another one is still empty but I can put a gadget there. Here I try to share with you what I've done to my template.

1. Login to Blogger > Design > Edit HTML. Don't check the box beside 'Expand Widget Template'.
2. Back up your template first before you do anything to your template.
3. Locate this code, you can use CTRL + F at chrome or firefox.

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

4. Insert the following code just below that.

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

After you enter that code, it should look 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 we have 2 gadget in header but we have to correct the position.

5. Locate this code ]]></b:skin>
6. Here we have 2 kind of template, old template and the new one. Put this code above the code mentioned in no. 5

[Old Template]

#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 Template]

#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;}

Note: if you are using the newer template, you have to locate this code ]]> </b:template-skin> and put the following code above it.

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

7. Save your template. Now go to page element and put a gadget beside the header and see what you've got. You can change the width as you like. Happy blogging... :)