Add an Ad Space or Gadget Area Beside Blogger Header

I have shared a post about Add Email Subscription Box Below Every Post In Blogger.

But today we gonna learn how to add an ad space or gadget area below blogger header. We can use it for displayind ads and earn some money, we can also use it for displaying or adding any gadget.

Affter adding you will see a new GADGET space like below image:

LETS START! Be carefull wile performing the below steps.

Go to Design => Edit HTML [in new blogger interface go to Template => Edit HTML].
Then Find the following codes or similar codes. [Press Ctrl+F; then search for it]

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Now replace the above codes with the code given below.

#header {
          margin-top:-15px;
          width:370px;
          float:left;
          height: 90px;}
#top-ad {
         width: 470px;
         float: right;
         margin-top: 5px;
         padding: 0;
}

Again find the code below.

<div id='header-wrapper'>
<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG (Header)' type='Header'>
</b:widget>
</b:section></div>

Note: You can only find the <div id='header-wrapper'> code and the rest will be below that code.

Finally replace it with the code below.

<div id='header-wrapper'>
<div id='header'>
<b:section class='header' id='blog-title' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG (Header)' type='Header'/>
</b:section>
</div>

<div id='top-ad'>
<b:section class='top-ad' id='top-ad' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>