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.