Integrating Adsense into Blogger (for Experts)

Blogger is a famous free blog service provider (BSP). It belongs to Google.com. Although it is free to use, you can use Adsense on you blog to make money. Inserting adsense is very easy. But sometimes we need more. For example, I want to show a 468 x 60 banner above the first article in the index page or achive pages. But I don't want it to be shown in a single post page. Moreover, I want to show another 468 x 60 banner below the article in each single post page only, but it won't appear in the index page or achive pages, etc. See below:

• index page screenshot
• single post page screenshot

So the simple way won't work. How to solve it?

First we need some software tools. What I will use are Firefox, Firebug extension for Firefox, a text editor (Notepad++). That's all. Now let's begin.

Go to your Blogger -> Layout -> Edit HTML. Download the full template and use your editor to open it. Then use Firefox to visit your blog. Enable Firebug (right click its icon and make sure "Disable Firebug" isn't selected). Then click the icon and you can see the its interface. Click "Inspect" button (top left), and move your mouse on the webpage to find the right HTML code segment. Here's the screenshot.

I used Firebug to find out that the main content is located in a "div" whose id is "content". Then open your editor to find <div id='content'>. Add these lines after it:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div id='index_banner'>
    <b:section id='index-banner-only' locked='false' preferred='yes'>
    </b:section>
  </div>
</b:if>

Save and upload it. Then go to Layout -> Page Elements. You will see a new "Add a Page Element" above the blog posts area. You can add an Adsense banner. This banner won't appear in any single post page.

Now let's add the article page ads. In the same way, use Firebug to find the right HTML code. And then search it in your text editor. Or you can search for "<data:post.body/>". data:post.body stands for the content text. Add these lines below it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
your adsense code
</b:if >
Because I want to add Adsense below the article, just add Adsense code below it. But it won't work. You must use Ad Code Converter to convert your Adsense code, and then put it into your template.

OK. Now save your template and upload it. Go to "Page Elements" panel to add an Adsense banner. This banner will only display in the index page and archive pages, etc. It won't display in a single post page. However, if you open a single page, the ads below the content will appear.

PS: I think this trick will increase the Adsense CTR.