Thursday, February 5, 2009

[BlogSpot]Add Google Adsense Adds in the middle of the Blogger post

Note: I strongly recomend you to back up your template before start editing your blog template from Backup/Restore Template under Layout.

First of all thank you very much Daniele Perilli for letting me use his code which allows you to use Adsense ads in the middle of your Blogger Blog post. Adsense In the Middle Blog  explain simple but effective way to place Adsense or any other Ads network add in the middle of each post in two ways. One is manually telling in each post where to display the Ad and second method is automatically add the Ads in the middle of each post. As I am too lazy to define in each post I likes the second method more. But I needed couple things to be changed. 
                       In main page after Displaying three Adsense (Adsense allows only three ads per page) it start displaying blank spaces in middle of other posts. 
                       Sometimes it did display part of HTML code ( Specially When there is any image ) in the post and image got disappear. 
                       Sometimes I have noticed it display the ads without completing the sentence. I wanted ads to be displayed after end of a sentence.
                       
First let us see how can we add these simple hacks to the Ads in the middle of Blogger post hack. 
                      I simply removed the Adsense Ads in the middle of the post when it display on main page. That will keep your main page nice and clean. What I did was I will display ads in the middle of the post when it display as a single post. Still If you like to display some ads I would recommend to enable ads after each post from Layout > Page Element > Click on Edit link in the Blog Posts Element. 

Then go to Edit HTML under Layout and tick Expand Widgets check box and find the tag and replace with following code.


<div expr:id='"aim1" + data:post.id'/>

<div style='clear:both; margin:10px 0'>
<b:if cond='data:blog.pageType == "item"'>
<!-- Your AdSense code here -->
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:if>
</div>

<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>

<script type='text/javascript'>
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(". ");
if(r&gt;0) {obj0.innerHTML=s.substr(0,r+ 1);obj1.innerHTML=s.substr(r+ 2);}
</script>

Then click Save Template and check how Adsense Ads will display in middle of each post when you go into a post. Once again I am really thank full to Daniele for letting me update original  Adsense In the middle of Blogger Post code. I hope to discuss more hacks and tricks you can do with this in future. Please let me know what you think about it and ways you would like to display Adsense Ads and also if you come cross any bug or cool ideas share with us.
Blog Widget by LinkWithin