Add Google Adsense to Blogger Header

In this Blogger tutorial you will learn how to add Google Adsense to the header of your Blogger blog. This article assumes no knowledge of Blogger and provides a walk through of the steps involved to add Google Adsense to the header of your blog.

This is the third Blogger tutorial in a series on adding Google Adsense to a Blogger blog (Blogspot blog).

1. How To Add Google Adsense to the Header (Above the Title)
   If you want to add Google Adsense to your header for instance above the title you can by adjusting your template to give you the option of adding more than one widget to the header area.
   
   1. Login to Blogger and navigate to Design > Edit HTML
      
   2. Back up your template as a precaution by downloading the full template to your computer
      
   3. Using CTRL + F to bring up the search box find the following line of code. For default Blogger templates - Layout (2006) such as Minima, Thisaway and Sand Dollar and for many custom templates find <div id='header-wrapper'>
      
      For new Blogger templates such as Simple and Awesome Inc find this line <div class='region-inner header-inner'>
      
   4. Replace the following code in red: 

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

      
      with
      

      <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

      
      
   5. Save Template
      
   6. Navigate to Design > Page Elements (previously Layout > Page Elements) and view the new option to add a gadget to the header area
      
      
      
   7. Click on Add a Gadget and select the Google Adsense gadget.
      
   8. Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an Adsense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template.
      
   9. Click Save
      
   10. Click View Blog to see your new Google Adsense unit in place. All going well your new ad unit should appear look something like the image below
       
       
   
   
2. How to Add Google Adsense to the Header (Below the Title)
   To have your new Google Adsense linked unit appear below the title the steps are the same as above. The difference is that you will need to shift the ad unit into position by using the drag and drop feature to move the widget below the header title in the Design > Page Elements page.
   
   
   

Tips and Troubleshooting
By default Blogger will left align these ads so if you want to center the Adsense unit then use the <div align='center'>

How to Center a Google Adsense Unit in Blogger

1. Once you have created your Google Adsense unit go to Design > Edit HTML
   
2. Check the Expand Widgets Template box
   
3. Find the code you replaced in Step 4
   

   <b:section class='header' id='header' maxwidgets='3' showaddelement='yes>

   
   
4. Directly below you will see lines of code that resemble the following:
   

   <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
<b:include name='quickedit'/>
</div>

   
   
5. Add the following code shown in red

   <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<div align='center'><data:adCode/></div>
<b:include name='quickedit'/>
</div>

   
   
6. Save template and view your Adsense widget which will now be centered

In this Blogger tutorial you have learnt how to add a Google Adsense unit above and below the blog title in the header section of your Blogger blog (Blogspot Blog). I have also demonstrated how to center the Google Adsense unit. As always any questions please ask.

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, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below:

But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? 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 >> Design >> Edit HTML and backup your template

Step 2: Check the "Expand widget templates" box

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

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

Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
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 changefloat: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

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

Step 6: Replace it with:

<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. Find the following code:

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

Step 8. Just above it, paste this:

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

Note: if you can't find the code from step 7, search for this 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. 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 >> Design >> Edit HTML and backup your template.
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 code:

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

Step 4. Now find:

]]></b:skin>

Step 5. Paste just above it, this CSS code:

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

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. 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 image below.

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

If you have any questions or need some help, leave a comment below.