How to Add Widget inside Blogger's Header

Well you may have seen many professional blogs that have a Special widget in their header.Specially on those Blogs that have Ad sense or any other Widget inside their blogger's header.Well most of the bloggers use Ads of 468x60 Ad banners there.because it is the perfect place to install such type of widgets.So if you cant see Option like Add a Gadget link on your blog's header then Here is a Small trick to Add it.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 )
• Backup a Copy of your Template
• Now Find for the Below Code

/* 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;
}

• You Can 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 be in little different format in your template as coding of each template differs.The best way to find above code is search for only half piece of code i.e. upto 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  the background color of Blogger's header is not visible or it is missing. To bring it back, you need to add some more piece of codes.

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 the below code just below of above code

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

Now save your template.And Go to your Layout page and you can find "Add a Gadget" link inside your header.

That's it Enjoy!

You Might Also Like