A lot of people who are interested in monetizing their Blogger blog want to know how they can add a Google AdSense ad unit or an affiliate banner above the header of their blog. Therefore I am going to show you in this post how you can place an affiliate banner or Google AdSense banner/ad block right at the top of Blogger blogs.
Setting up Blogger so that ad units can be placed above the header requires the addition of a snippet of code to the template of your Blogger blog. This tutorial is aimed at beginners and newbies to Blogger and blogging. The adjustments can be performed in less than 5 minutes.
How to Add a Google AdSense Ad Unit or an Affiliate Banner Above the Blogger Header
1. Login to Blogger if not already logged in.
2. Navigate to Layout --> Edit HTML.
3. As a precaution back up your template by downloading the full template to your computer.
4. Check the Expand Widget Templates box.
5. Search for the following line of code which in most templates will be directly after the <body> tag (The easiest way to do this is by pressing Ctrl + F and then entering the line into the search box):
<div id='outer-wrapper'>
6. Paste the following block of code directly after this line to create a new section:
<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>
7. Next you need to add some CSS styling to the newly created section. Please note that the banner will be centered by default. If you want to change the alignment for some reason or other you just need to change the CSS styling.
Place the following code in the head section of your template before these lines:
]]></b:skin>
</head>
The code to be inserted:
/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
#topads {margin: 0; padding: 0;}
#topads .widget {margin: 0; padding: 5px 0;}
8. Click on Save Template.
9. Now go to Layout --> Page Elements.
10. You will find that you can add a gadget to a new section above your header and directly below the navbar.
How to Add a Google AdSense Ad Unit
Click on Add a Gadget and choose your preferred Google AdSense ad unit. The best choices for this position are the 728x90 Leaderboard, the 468x60 Banner, and the 728x15 or 468x15 Horizontal Lines. For best results choose either the Blend Template or Match Template option. Do not forget to save when you are done.
How to Add an Affiliate Banner
If you´d rather add an affiliate banner, click on Add a Gadget and choose the HTML/Javascript widget from the list of gadgets available in the menu. You then need to paste the affiliate banner code into the content box in the popup window and save your changes. Click on View Blog and you will see your new banner displayed above the header of your Blogger blog. For more detailed instructions about adding affiliate banners to a Blogger blog please refer to my article How to Add an Affiliate Banner to the Blogger sidebar.
Tips and Troubleshooting
a) If you wish to add more than one widget to the section above the header you will need to change the template code from:
<b:section class='topads' id='topads' preferred='yes'/>
to:
<b:section class='topads' id='topads' maxwidgets='3'>
This change to the template will allow you to add up to 3 widgets above the Blogger header.
b) If you wish to display your Google AdSense ad unit only on the post page and not the home page then you need to add an <b:if> statement. For instance go to Layout -- > Edit HTML after you have created your ad unit and you will see that the code you inserted is now different. That is because the Adsense widget code has been added. You are likely to have something that looks like this:
<b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>
</b:section>
By inserting the code within an <b:if> statement you will be able to control where it appears. To have the Google AdSense ad unit only display on the post page you need to add the following lines of code:
<b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:adCode/>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
In this tutorial I have shown you how to create a new section above the header of your Blogger blog and how to add a Google AdSense ad unit or an affiliate banner to that spot. In addition I have shown you how to place the aforementioned Google AdSense unit or banner only on the post page rather than on every page of your blog. If you have any questions please leave a comment.
Good luck!
Related articles:
How to Add an Affiliate Banner to the Header of Your Blogger Blog
How to Add an Affiliate Banner to the Sidebar of your Blogger Blog
Better Google AdSense Placement for Blogger
Posts
