Blogger Tips
One of my readers asked me how to add a Google Adsense ad unit above the header of a Blogger Blogspot blog. Rather than post a long reply I decided to write an article about it so that others looking for help to place an affiliate banner or Google Adsense banner at the top of their blog will find the solution more easily.
To set up Blogger so that ad units can be placed above the header requires the addition of a snippet of code to your Blogger Template. I have aimed this tutorial at beginners and newbies to Blogger. The tweak 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. Tick the Expand Widget Templates box
5. Using CTRL + F to bring up the search box find this line which in most templates will be directly after <body> tag
6. Paste this block of code after this line to create a new section
7. Next we need to add some CSS styling to the new section. Please note that the banner will be centered by default. If you want to change the alignment for some reason you just need to change the CSS styling.
Place the following code in the head section of your template before these lines:
8. Click the Save Template button
9. Go to Layout > Page Elements
10. You will now see that you can add a gadget to a new section above your header and directly below the navbar.
11. To Add a Google Adsense Ad Unit
Click on Add a Gadget and choose your desired Google Adsense ad unit. If you are uncertain how to add a Google Adsense ad unit to Blogger read my article Google Adsense Tips for Blogger Blogs
To Add an Affiliate Banner
Or if you want to add an affiliate banner then you would click on Add a Gadget and choose a HTML/Javascript widget from the list of gadgets available in the menu. You would then 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 your blog's header. For more detailed instructions about adding affiliate banners to a Blogger Blogspot blog please refer to my article Add an Affiliate Banner to the Blogger Sidebar
Tips and Troubleshooting
In today's tutorial you have learned how to create a new section above the Blogger Blogspot header and how to add a Google Adsense ad unit to that spot or an affiliate banner. You have also learned how to place that Google Adsense unit or banner only on the post page rather than on every page on your blog. 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
- Add Affiliate Banner Below Post In Blogger
In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger template....
- Add An Affiliate Banner To A Blogger Header
If your intention is to make money from your blog chances are you will want to add an affiliate marketing banner to your Blogger Blogspot header. Doubtless you have seen plenty of websites sporting advertising banners which are creating revenue for the...
- 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...
- Add An Affiliate Banner To Blogger Sidebar
A lot of people want to make money from their blog and for this reason want to learn how to insert affiliate banners into their Blogger Blogspot blog. In this Blogger tutorial which is the first of a series I will show you how to place a banner in the...
- 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...
Blogger Tips
Add Banner Adsense Above Blogger Header
One of my readers asked me how to add a Google Adsense ad unit above the header of a Blogger Blogspot blog. Rather than post a long reply I decided to write an article about it so that others looking for help to place an affiliate banner or Google Adsense banner at the top of their blog will find the solution more easily.
To set up Blogger so that ad units can be placed above the header requires the addition of a snippet of code to your Blogger Template. I have aimed this tutorial at beginners and newbies to Blogger. The tweak 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. Tick the Expand Widget Templates box
5. Using CTRL + F to bring up the search box find this line which in most templates will be directly after <body> tag
<div id='outer-wrapper'>6. Paste this block of code after this line to create a new section
<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>7. Next we need to add some CSS styling to the new section. Please note that the banner will be centered by default. If you want to change the alignment for some reason 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>
/* 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 the Save Template button
9. Go to Layout > Page Elements
10. You will now see that you can add a gadget to a new section above your header and directly below the navbar.
11. To Add a Google Adsense Ad Unit
Click on Add a Gadget and choose your desired Google Adsense ad unit. If you are uncertain how to add a Google Adsense ad unit to Blogger read my article Google Adsense Tips for Blogger Blogs
To Add an Affiliate Banner
Or if you want to add an affiliate banner then you would click on Add a Gadget and choose a HTML/Javascript widget from the list of gadgets available in the menu. You would then 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 your blog's header. For more detailed instructions about adding affiliate banners to a Blogger Blogspot blog please refer to my article Add an Affiliate Banner to the Blogger Sidebar
Tips and Troubleshooting
- If you wish to add more than one widget to the section 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. - 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 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 if statement we can control where it appears. To have the Google Adsense ad unit only display on the post page add these 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 today's tutorial you have learned how to create a new section above the Blogger Blogspot header and how to add a Google Adsense ad unit to that spot or an affiliate banner. You have also learned how to place that Google Adsense unit or banner only on the post page rather than on every page on your blog. 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
- Add Affiliate Banner Below Post In Blogger
In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger template....
- Add An Affiliate Banner To A Blogger Header
If your intention is to make money from your blog chances are you will want to add an affiliate marketing banner to your Blogger Blogspot header. Doubtless you have seen plenty of websites sporting advertising banners which are creating revenue for the...
- 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...
- Add An Affiliate Banner To Blogger Sidebar
A lot of people want to make money from their blog and for this reason want to learn how to insert affiliate banners into their Blogger Blogspot blog. In this Blogger tutorial which is the first of a series I will show you how to place a banner in the...
- 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...