How to embed Adsense ads inside a Blogger.com post
Monday, September 03, 2007
One of the most annoying things of a Blogger.com blog was how difficult was to add AdSense ads in your blog. Currently this is not an issue anymore because you can add automatically AdSense ads in your page thanks to the Blogger dashboard. But if you read blogs you will realize that some blogs embed Google AdSense ads inside the post. Most tutorials on how to monetize your blog recommends it. But it's not possible in Blogger. Why? Because the content of every post is wrapped by a DIV element with the style 'clear:both;'. And it's not possible to modify it in the template, it's created by the Blogger.com's render engine.
So here goes the steps I have followed to embed AdSense ads inside a Blogger.com post:
- Edit your template
- Find this tag: <div class="post-body">, inside you will find this tag <$BlogItemBody$>.
- Insert your Google AdSense code wrapped by a floating layer between both tags. You can change to style="float:left" if you want to align at the left hand side:
<script type="text/javascript"><!--
google_ad_client = "XXXXXXX";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
google_ad_channel = "XXXXXXX";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
- Now you have to find the DIV tag that contains the id to the 'sidebar'. Normally it's after all the comments stuff. Insert BEFORE this DIV tag the following javascript code:
<script type="text/javascript">
var nodes = document.getElementsByTagName('DIV');
var size = nodes.length;
for (var i = 0; (i<size); i++) {
if (nodes[i].style.clear=='both') {
nodes[i].style.clear='';
}
}
</script>
<!-- END: Remove the stupid clear: both; added by blogger render engine -->
And that's all folks. Test it before publishing. I have tested it in FireFox and Internet Explorer in Windows. If you can test it in Safari or Opera, please send me some feedback.
Comments, improvements and problems will be welcomed!
Update 1: A colleague sent me a CSS hack. You can find it here.
Update 2: To restrict the effect of the script to the posts avoiding the sidebars and other effects, this version modified of the script only affects the post bodies.
<script type="text/javascript">
var nodes = document.getElementsByTagName('DIV');
var size = nodes.length;
for (var i = 0; (i<size); i++) {
if (nodes[i].style.clear=='both') {
if(nodes[i].parentNode.className=='post-body') {
nodes[i].style.clear='';
}
}
}
</script>
2 comments:
what about for classic template pls help! thanks
Thanks, Diego! I've been looking for ways to add adsense to my posts!
One question, though: would this add adsense to ALL my posts? What if I only want to add ads to certain posts? Any clue?
Thanks!