How to add a Gadget/Widget inside your Blogger Blog Header

Today i am posting how to add a Gadget/Widget inside your Blogger Blog Header:

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog. See in the below screenshot:

But the question is, how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget etc.? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize Blogger Header

Step 1: Go to Blogger Dashboard >> Tamplete >> Edit HTML
Step 2: Check the "Expand widget templates" box

Step 3: Find (CTRL + F) this piece of code:

/* Header
----------------------------------------------- */

Step 4: Now Replace it with this below highlighted code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 150px;
width: 500px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Now Find the below below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with the below highlighted code:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Now Find the following code:

    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>

Step 8. Just above it, paste the below highlighted code:

<div style='clear:both;'/>

Note: If you can't find the code from step 7, search for the below code instead:

      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>

... and paste the code from Step 8 just below it.

Step 9. Now  Save  Template.

B. Add extra Gadget/Widget section to Blogger Header:

Let's go one step forward and add an extra gadget section within Blogger header in new template designers.

Step 1: Go to Dashboard >> Template >> Edit HTML.
Step 2: Find for the below code which you have implemented in previous step:

<div style='clear:both;'/>

Step 3. Paste before/above it, the following highlighted code:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

 Step 4. Now find the below code:

]]></b:skin>

Step 5. Paste just above it, the below highlighted CSS code:

.header-right {
display:inline-block;
float:right;
width:450px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 6. Now Click on  Save Template.

Now all you have to do is to go to Design >> Page Elements tab and add a new gadget to the newly created extra header section in Blogger. You may find that the extra gadget section is created just under your Blogger header as shown in the below screenshot.

Don't worry about its position, the widget now should appear side by side.