Use Javascript to Remove Borders from Adsense Ads

In this article, I would like to introduce how to use javascript to remove the white borders from Adsense/Chitika Ads.

In a later post, I will provide a better solution: use CSS to remove the white borders. 

Recently I joined in Google Adsense and Chitika to try to make some money from my humble technical blog.
After add ads to the blog, I notice there is big white border around the Ads. I have to remove the border as it makes the site ugly.

  

Google Adsense or chitika doesn't provide us an option to remove ads directly. So I have to write some javascript to remove the borders around ads.
The JavaScript code looks look below:

<script>
//<![CDATA[
var adStrs = ["AdSense1","AdSense2", "HTML1" , "HTML2"];
for (var i=0,len=adStrs.length; i<len; i++)
{
 var adStr = adStrs[i];
 var ad=document.getElementById(adStr);
 ad.style.backgroundColor="inherit";
 ad.style.border="0px none transparent";
 ad.style.margin=0;
 ad.style.padding=0; 
 var widget=document.querySelector('#' + adStr + ' .widget-content'); 
 widget.style.border="0px none transparent";
 widget.style.margin=0;
 widget.style.padding=0;
}
//]]>
</script>

AdSense1, AdSense2 are ids of Adsense Ads, HTML1, HTML2 are ids of Chitika Ads.
Next login to blogger, go to dashboard -> "Template", Click "Edit Html", at the end of page(before </html> tag) and paste the code above.

-- Here I also use CDATA tag to avoid have to escape special xml characters.

Now the ads looks like below. Now it looks much better.


You may also view: Use CSS to Remove Borders from Adsense Ads