Add Widget/Gadget Inside Blogger's Header

You may have seen many blogs that have installed Adsense or any other widget/gadget inside their blog's header.Most of them use the 468x60 unit ad banner in their banner and it is a perfect place to place your ads and earn more money from your blog.But what is you can't see the "Add a Gadget" Link" in your blog's template layout ? Here I have a solution for this problem we will fix this with adding some codes inside your template.Now let's do the work.

How To Add Widget Widget/Gadget Inside Blog's Header?

• Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
• As always download a copy of your template before making any changes.
• Now find for below code in your template

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

• If you can't above code then find for below code :

#header

• Now replace above code with below piece code

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

• If you want to change height and width of the logo then edit the lines in blue from above code.
• To change position of the logo to right the change float: left; to float: right;

• Now find for below code in your template

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

Note - Above code will little different in your template as coding of each is differ.The best way to find above code is search for only half piece code i.e. till id='header'.

• And replace above code with below 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:

• Find the following code:

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

• If you can't find above code then only find for below piece of code in your template.

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

• And paste below code just below of above code

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

Now save your template.

Go to your Layout page you will watch "Add a Gadget" link inside your header.

Enjoy....