Blogger - How To Add Adsense Inside Single Posts Only

I was recently optimizing Adsense on one of my Blogger sites and decided I wanted to place Adsense inside the posts - but only on single posts, not on the home page or in the archives. Here’s how.

Why Blogger?

Although my primary blog platform is WordPress, I do occasionally use Blogger for some side projects. Why? Go and read everything that Grizzley’s written on his Make Money Online For Beginners site. Blogger can be an excellent option. It’s free, easy to create a site, can scale to handle massive traffic etc.

The only downside to Blogger is the limited ability to customize the site. With WordPress I can change pretty much anything I want. With Blogger I can only change things within the narrow framework that Blogger allows. In this case, I ran into the limitations with the built-in options to display Adsense ads.

Blogger’s Built In Options To Display Adsense

The easiest way to add Adsense to a Blogger blog is via the built-in gadget. I won’t go through the whole process, as it’s written about elsewhere, but you can add an Adsense gadget in the same way you can add a Profile gadget, Text gadget, Poll gadget, etc. Just go to Layout, then Page Settings, then click on Add a Gadget, select the Adsense gadget and then configure it.

The first time you use it, Blogger will ask you for your Adsense publisher number and link the blog to your Adsense account. Then you simply decide where you want the gadget to appear, what size and colour the ads should be and you’re off! You’re ready to start making money online.

You can also add Adsense between posts. To do this, click Edit on the Body gadget and turn on the Show Adsense Between Posts option. You’ll then be presented with the same options that the gadget gives you (size, colour etc).

Limitations With Built-In Options

There are several limitations to using Blogger’s built-in Adsense gadget:

1. Can’t Put Adsense Ads Within Posts

The main limitation with using the built-in Adsense gadget is that you can’t place ads within a post. You can add them before posts, after posts, between posts, in the sidebar, but not in the actual post.

It’s well known that the CTR (click through rate) is higher for ads within a post than for ads in other positions. So putting Adsense within a post will make more money for you. I cover how to do this below.

2. Can’t Use Channels

Another limitation of the built-in Adsense gadget is that you can’t use channels to track the performance of ad units.

However, this isn’t really a limitation - if you want to use channels, simply create your code on the Adsense site, then copy and paste your Adsense code into a JavaScript gadget, instead of using an Adsense gadget. In all other ways it will work the same as the Adsense gadget.

3. Blogger Only Shows Three Ad Units

The last limitation is only an issue for those people who place an Adsense unit in the sidebar. Some people choose not to do this, but I find that an Adsense unit in the sidebar performs relatively well (not as good as units at the top of the page, but better than those lower down the page).

The problem is that Google makes sure that only three ad units are displayed on a Blogger page, as per their Terms Of Service. Great in general, but it means you have less control over which ad units appear. Unfortunately the sidebar is rendered last in most templates, so it’s one of the units that disappear if there are too many units on the page.

This won’t happen on the single post page. However, if you display ads between posts (or within posts) then the sidebar ad unit will disappear on pages with multiple posts, such as the home page and archive pages. I explain how to overcome this below.

Adsense Within Posts

As I mentioned above, you can’t place Adsense ads within the post body using the built-in gadgets. To do this, we’re going to have to put our Adsense code directly into the template.

We still can’t put the ad unit in the middle of the post, but we can put it at the top of the post, below the title, with the text wrapping around it. Great! That’s proven to be the most effective placement, so that’s exactly what we want.

Now, the technique used to do this isn’t new. In fact I learned how to do it by reading Bonnie Calhoun’s Wrapping Adsense in Blog Post. You can go and read her post for the full instructions, but here are the basic steps:

1. Get your Adsense code from the Adsense website
2. Parse the code to replace special characters with HTML entities
3. In Blogger, go to Layout, then choose Edit HTML
4. Make a backup of your template by clicking Download Full Template
5. Click Expand Widget Templates
6. Search for or

7. Place your Adsense code on the line immediately above this
8. Save the template

Note 1: It’s very important to parse the code as per Bonnie’s site (ie replace <> with > etc). If you do not do this, your Adsense units will not display correctly and you risk being banned by Google.

Note 2: You probably want to place your Adsense code within a floating div, so that the text wraps around it.

Here’s what the code will look like (with the publisher specific information removed). The first and last lines should already exist in the template, the rest is what you’re adding.

view plaincopy to clipboardprint?

1. <div class='post-body entry-content'>
2. <div style='float: left;'>
3. <script type="text/javascript"><!--
4. google_ad_client = "pub-xxxxxxxxxxxxxxxx";
5. google_ad_host = "pub-xxxxxxxxxxxxxxxx";
6. google_ad_slot = "xxxxxx";
7. google_ad_width = 336;
8. google_ad_height = 280;
9. //-->
10. </script>
11. <script type="text/javascript"
12. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
13. </script>
14. div>
15. <p><data:post.body/>p>

 
 <script type="text/javascript"><!-- google_ad_client = "pub-xxxxxxxxxxxxxxxx"; google_ad_host = "pub-xxxxxxxxxxxxxxxx"; google_ad_slot = "xxxxxx"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> 
 
 

This solves the problem of getting Adsense to appear within the post, driving up CTR. However, the sidebar unit will still disappear on the home page, as there will be more than 3 units on the page (one embedded in each post).

Only Showing Adsense In Posts On A Single Post

To solve the problem of the sidebar unit disappearing, I decided that I only wanted to show Adsense within the post (ie solution in the previous section) on single posts. I didn’t want this ad unit to appear on the home page or on archive pages.

It would be easy enough to do this in WordPress / PHP, but I had no idea how to customize a Blogger template. I consulted Blogger’s Help facility and found a list of Layouts Data Tags, which let me see what could be done. Despite the options being fairly limited, I found the answer I needed: The pageType tag, which can have a value of ‘item’, ‘archive’ or ‘index’.

My XML coding skills are a little rusty, but thankfully it wasn’t hard to work out how to include some HTML based on the type of page:

view plaincopy to clipboardprint?

1. <b:if cond='data:blog.pageType == "item"'>
2. PUT YOUR CODE HERE
3. b:if>

 PUT YOUR CODE HERE  

This says: If it’s a single post, include the HTML (obviously you have to put it in). So single posts (pageType of item) will display the HTML, but the home page (pageType of index) and archive pages (pageType of archive) will not.

Applying this to our Adsense problem, here is the full code you need (with the publisher specific information removed). Use this instead of the code in the Adsense Within Posts section above. The first and last lines should already exist in the template, the rest is what you’re adding.

view plaincopy to clipboardprint?

1. <div class='post-body entry-content'>
2. <b:if cond='data:blog.pageType == "item"'>
3. <div style='float: left;'>
4. <script type="text/javascript"><!--
5. google_ad_client = "pub-xxxxxxxxxxxxxxxx";
6. google_ad_host = "pub-xxxxxxxxxxxxxxxx";
7. google_ad_slot = "xxxxxxxxxx";
8. google_ad_width = 336;
9. google_ad_height = 280;
10. //-->
11. </script>
12. <script type="text/javascript"
13. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
14. </script>
15. div>
16. b:if>
17. <p><data:post.body/>p>

  
 <script type="text/javascript"><!-- google_ad_client = "pub-xxxxxxxxxxxxxxxx"; google_ad_host = "pub-xxxxxxxxxxxxxxxx"; google_ad_slot = "xxxxxxxxxx"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> 
  
 

Of course, this means that only two Adsense units will be shown on the home page. If you’re doing things properly, most of your visitors should arrive on single posts, via the search engines, so this solution’s good enough for me.

Final Thoughts

If you want to make money online and you’ve decided that using Adsense on Blogger is the way to do it, then optimize it!

Hopefully this has helped you a) increase your CTR by showing you how to place Adsense units at the top of your posts and b) how to preserve income from the sidebar unit by stopping it from disappearing on multiple post pages.