How to Put Adsense or Yahoo Publisher in the Middle of Blogger Posts

I have wanted to put ads in the beginning of my Blogger posts, so that they blend with the posts, but until now, I haven't been able to. Because Blogger doesn't give users the ability to insert ads inside posts, the only alternative until now was to stick them before or after a post.

The typical way of doing it renders a webpage that looks like the blog below. Stick AdSense or Y! Publisher Before the Post. There are several problems with this approach: It is not very attractive. It creates a very poor user experience. Click thru rates are low. Blogger doesn't allow you to put AdSense code easily at the beginning of your post by default, and that makes for bad design and occasional emails from readers that there are too many ads.

Problem: Blogger places ads before the content. This creates a poor user experience.

To put ads in the middle or beginning of your post so they blend with the content, you need Javascript. Now you too can place the ads besides your posts, Wave Theory style, like the blog below. (See the actual page.) Note how the ad flows right next to the text and your ad appears next to your article? Simply put, the ad blends in. That's good design. It pays too. According to the AdSense heatmap, clicks are highest when you place ads in the middle of a page. Webmasters who place ads in the hot spots of the heatmap report significant increases in profits.

Solution: Place Ads beside the content using Javascript.

Because alot of people use Blogger, I thought I'd share my solution to the problem. Here's how you can blends ads into your Blogger posts in 4 easy steps.

1. Place the following Browser Detection Script immediately before the </head> tag in your Blogger Template. This piece of code will detect whether you are using Internet Explorer or FireFox. Because IE and FireFox render different HTML object models, you need this piece of code. Otherwise, IE and FireFox will mangle your webpage.





<script type="text/javascript">
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};
BrowserDetect.init();
</script>







2. Put your AdSense or Yahoo! Publisher ad code between the <!-- Begin Yahoo Large Rectangle --> and the <!-- End Yahoo Large Rectangle --> tags. Place the entire DIV below into your Blogger Template after the <body> tag.





<div id="ypnlargerect" style="visibility:hidden;width:0px;height:0px;overflow:hidden;position:absolute;">
<!-- Begin Yahoo Large Rectangle -->
<script language="JavaScript" type="text/javascript">
<!--
ctxt_ad_partner = "1189821761";
ctxt_ad_section = "45988";
ctxt_ad_bg = "";
ctxt_ad_width = 336;
ctxt_ad_height = 280;
ctxt_ad_bc = "FFFFFF";
ctxt_ad_cc = "FFFFFF";
ctxt_ad_lc = "CC6600";
ctxt_ad_tc = "000000";
ctxt_ad_uc = "CC6600";
// -->
</script>
<script language="JavaScript" src="http://ypn-js.overture.com/partner/js/ypn.js">
</script>
<!-- End Yahoo Large Rectangle -->
</div>






3. Add this attribute to the DIV containing the <$BlogItemBody$>





id="<$BlogItemNumber$>post"




When you are done, you should have something that looks like this.




<div id="<$BlogItemNumber$>post"><$BlogItemBody$>





4. Add the following Javascript right before the <!-- End .post --> section of your Blogger Template






<!-- Begin Yahoo Large Rect Ad //-->
<script type="text/javascript">

if(counter < 3)
{
counter++;
var documentobj = document.getElementById('<$BlogItemNumber$>post');
var documenthtml = document.getElementById('<$BlogItemNumber$>post').innerHTML;
var clearindex = documenthtml.indexOf("both");

var offset = 12;
if(BrowserDetect.browser.search(/FireFox/gi) > -1)
{
offset = 13;
}

var head = documenthtml.substr(0,clearindex + offset);
var tail = documenthtml.substr(clearindex + offset);
var middle = document.getElementById('ypnlargerect').innerHTML;
documentobj.innerHTML = head + "<div style='float:right;position:relative;'>" + middle + "</div>" + tail;

}
</script>
<!-- End Yahoo Large Rect Ad //-->

You're done. Now you AdSense ads will blend in with your Blogger posts and your blog will look much better. Congratulations!

Send to a Friend!       Subscribe!