Blogger Tips

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 walkthrough 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).

Place Google Adsense Below Post Title in Blogger
Better Placement of Google Adsense on a Blogger Blog

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
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

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

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes>
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>
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>
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.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogspot Blogger Guide to Google Adsense Placement
Google Adsense Tips for Blogger Blog
Add an Affiliate Banner to the Blogger Sidebar
Better Placement of Google Adsense on a Blogger Blog
Add Google Adsense or Banner Above Blogger Header
Place Google Adsense Below Post Title in Blogger
Add Google Adsense Below Blogger Post Content
5 Easy Ways to Make Money from Blogger
Bloggers Guide to Google Adsense Myths

- Add Google Adsense To Blogger Header (above The Title)
In some of my last tutorials (Social Media Buttons beside Adsense ads & Adsense inside Blogger Header ), you've seen a few tricks for Adsense ads placement that may help you to increase your adsense earnings. Now, I will show you how...

- Blogger Guide To Google Adsense Placement
There are so many places to position Google Adsense in a Blogger Blogspot blog. This article covers the most common places to add Google Adsense ad units and linked units in a Blogger blog together with links to the various articles which explain in detail...

- Better Placement Of Google Adsense In Blogger
To increase the performance of Google Adsense on your Blogger Blogspot blog you can extend the choice of placement options of your Google ads with some simple tweaks. This involves making a few minor adjustments to your Blogger template to increase where...

- Google Adsense Tips For A Blogger Blog
As the Blogger platform is owned by Google it is not surprising that Blogger makes it very easy to add Google Adsense to your Blogger Blogspot blog. In this tutorial you will learn about different ways to add Google Adsense to your blog. Along the way...

- Position Adsense On Blogger To Earn Extra Money
Want to know more about how to make money with Google Adsense and your Blogger blog (Blogspot blog)? A lot of bloggers make money blogging solely from Google Adsense clicks. Placement of your Adsense ad units on your blog is critical if you are to earn...

Blogger Tips