How to Use Custom Google Adsense Ads and Make them Responsive on Your Blog

Many bloggers use Adsense and for most of them, Adsense is the primary source of income. However, these days with the boom of E-commerce and Online shopping in India its getting replaced by Affiliate Marketing. In this article, I am explaining to you a simple technique using which you can display custom ads on your blog and make them responsive.

How to Use Custom Ads on your Blog:

Previously Google used to give this feature to only Premium Adsense publishers. But now this feature is available for all. You can use custom ads of any size of your wish that fits your blog layout.

• To place custom ads on your blog. Login to your Adsense account.
• Then go to My Ads, then head over to create a new ad unit.
• There you can find Custom Size.

• There you fill out the dimension of the ad which you want to put on your blog.
• Take that code and place wherever you want to.

But the drawback of this custom size ad unit is that its not responsive. So, if you have users operating from different devices then you might be losing some revenue. For this reason, you have to make the custom ads responsive. Follow the tutorial below to make custom ads responsive.

How to make Custom Ads Responsive:

To make custom ads responsive you have to tweak the adsense code a little. This method is approved by the Adsense department and you would not have to worry about the violation. This code is developed by Amit Agarwal from Labnol.

1. First, you have to create a custom ad unit exactly as the above procedure.

2. Here the width doesn’t matter but makes sure the height is given correctly.

3. Then copy the following code and paste in on to some text editor.

<div id="google-ads-1"></div>

<script type="text/javascript">

/* Replace ca-pub-XXX with your AdSense Publisher ID */
google_ad_client = "ca-pub-XXX";

/* Replace YYY with the AdSense Ad Slot ID */
google_ad_slot = "YYY";

/* Replace ZZZ with the custom height of your Ad Unit */
google_ad_height = ZZZ;

ad = document.getElementById('google-ads-1');

if (ad.getBoundingClientRect().width) {
google_ad_width = ad.getBoundingClientRect().width;
} else {
google_ad_width = ad.offsetWidth; // for old IE
}

/* The width of an Ad unit should be between 120-1200 pixels */
if (google_ad_width>1200) {
google_ad_width = 1200;
} else if (google_ad_width<120) {
google_ad_width = 120;
}

/* The height of an Ad unit should be between 50-1200 pixels */
if (google_ad_height>1200) {
google_ad_height = 1200;
} else if (google_ad_height<50) {
google_ad_height = 50;
}

/* Both height or width cannot be more than 300 pixels */
if ((google_ad_width>300) && (google_ad_height>300)) {
google_ad_height = 300;
}

document.write (
'<ins class="adsbygoogle" style="display:inline-block;width:'
+ google_ad_width + 'px;height:'
+ google_ad_height + 'px" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ google_ad_slot + '"></ins>'
);

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

4. Now all you have to do is just put your publisher id at XXX, then ad slot id at “YYY” then give the height of the ad unit at ZZZ.

5. Once that’s done take the code and put wherever you want to on your blog either Blogger or WordPress.

Note: If you are using Blogger you convert the code and get the converted code and place it in your blogger template. We have implemented these type of ads on our sites www.allindiayouth.com , Alltop9 and www.alindiaroundup.com you can have a look.

Let me know if you have any doubts in your comments. I will get back to every comment on this post.