Blogger Tips

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of the post.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Manually inserting Adsense ads in the middle of posts in Blogger is pretty simple, just follow these steps below:

Before proceeding, it is recommended do backup your template (go to Template > click on the Backup/restore button)

Step 1. First thing we need to do is to "parse" the AdSense code, in other words, convert it to plain text. Then go to Template, click on the Edit HTML button, click anywhere inside the code area and look for this tag (CTRL + F):

<data:post.body/>

Note: you may find it several times, but we need to stop at the second one or if you can't see any changes, test the third one

Screenshot

Step 2. Replace the <data:post.body/> tag with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div >

</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 3. Put the converted Adsense code to where you see the  annotation, then save the changes by clicking on the Save template button.

Note: For centering ads, add the center tag before and after the AdSense code, like this:

<div >
<center>

</center>
</div>

Step 4. When you create a New Post, add this tag inside the HTML section to where you want the Google AdSense ads to appear:

For example:

<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>
<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>

Screenshot

Note: If you don't add the label to bring up the ad, then the ad will appear below the title by default.

And you don't have to worry about violating the Google's Terms of Service because applying this method we are not changing the structure of the ad.

- Insert Adsense Inside Posts: After The First Paragraph
Want to know which part of your site or blog will bring you more profit? Add AdSense inside posts and then check out the famous Google AdSense heat map. Recent studies, however, showed that placing AdSense after the first paragraph of a site or blog is...

- Add Masonry, Grid Layouts To Blogger Posts With Css And Javascript
How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy...

- How To Create Magazine Style With Post Summaries And Thumbnails On Blogger
The magazine or newspaper style templates are those that display the posts summaries in the homepage by stacking the columns on top of each other. This kind of templates is very popular nowadays, and whether it is a news or technology blog, everyone needs...

- How To Add Different Backgrounds In Blogger Pages
In the last tutorial, we have seen how to add different backgrounds in Blogger posts. This tutorial, however, will show you how to apply a different background to the body of the template that will change when navigating to specific pages, thus making...

- Awesome Slide Open Heart Bookmarking Gadget For Blogger
This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook,...

Blogger Tips