How to Add Widget/Gadget Inside The Blogger Blog Header Section.

Few blogger asked me how to add a blog Gadget inside the blogger blog header for the reason of displaying AdSense Ads.

That was very attractive for me as because there is no any alternative in default blogger template or even many customized blogger template accessible on internet to add a new Gadget inside the header slot rather you can’t even move the header widget from its default place.

The majority of blogger wants to add their AdSense Ads codes or any direct advertiser’s Ad banner into the blog header because this gap is above the fold, more eye catching and gets maximum number of impressions.

 

So that, today we will learn the tricks to add a new widget inside the Blogger header just besides your blog logo or title or blog name for the purpose of either displaying AdSense Ads or for adding any other third party HTML/JavaScript codes.

At first divide Blogger Blog Header into two parts:

Before start editing blogger template, please backup your template for future reference on the safe side. Now, follow the following steps very charily so that you can easily split your BlogSpot blog header into two parts in first attempt.

Step 01:Go to your blogger dashboard ,click on Template > Edit HTML

Step02: Click anywhere in the template editor window and press Ctrl+F for search box.

Now add the below code inside the search box, then hit enter button to find it.

 

<b:section class='header' id='header' maxwidgets=

Step 03: Replace class='header' with class='header header-left'

Step 04: Now you need to find the following code by pressing Ctrl+F.

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

Just above this code you will find two div tags code like.

</div>

</div>

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

Step 05: Insert this following HTML code just above these div tags.

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

Now add a gadget/widget element on blogger blog header.

Step 06: Just above <div style='clear:both;'/> pest this code.

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

Step 07: Now find </head> tag using Ctrl+F.

Step 08:Now above the </head>  tag insert the following CSS style code. 

<style>

.header-left{

display: inline-block;

float: left;

}

#header-right {

display:inline-block;

float:right;

}

</style>

Step 08: Now save your template and go to blogger layout, there you will see two gadget on header area.

Now, you may apply this new header section for any purpose including AdSense Ads or third party HTML/JavaScript code.