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 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.

custom ads in adsense for blogger

  • 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 loosing 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 Adsense department and you would not have to worry about the violation. This code is developed by Amit Agarwal from

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

2. Here the width doesn’t matter but make 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 async src="//"></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 , Alltop9 and 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.

Leave a Reply

27 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
28 Comment authors
newest oldest most voted
Notify of
vandana chhabra

Thanks for a usefull information @Imran Uddin

bro this post is awesome can you plz say me… Read more »

Hii Bro, The tutorial and video is really awesome and… Read more »

That’s really great tips and tricks, this is really going… Read more »

Thanks Imran for sharing this useful information… keep sharing such… Read more »

Hi . Very useful tutorial. It solved my mobile ad… Read more »

Imran is one of the best blogger in india i… Read more »


Im confused about u r tutorial in the above placed… Read more »

Great tutorial bro, I previously used to tweak my blog… Read more »

For blogspot users you have to add one more thing… Read more »

Hi .
Very useful tutorial idea is also awesome.thanks alot bro

Nice post thanks for describing a way even new bloggers… Read more »

This is really an informative post. This type of ad… Read more »

thanks alot bro…. Hope to get some increase in my… Read more »

Hello Imran, it’s really an informative post and your video… Read more »

Nice post
thanks for sharing

Sajib Biswas

Great tutorial!!! I was looking for this for so long.… Read more »

mehedi hasan

Very informative and versatile tips on google adsense. Hope it… Read more »

nice post and describing in a way useful for newbie… Read more »


its really good tutorial and awesome video u have created… Read more »

Cool blog! Ӏs your theme custom made or did you… Read more »

Useful. Thanks

That’s fine but I don’t know what is the main… Read more »

Awesome, Just Followed this guide in my blog, and very… Read more »

Mani Teja

this really very informative and hard to find post like… Read more »


hell brother,,,if we modify as you said does it follows… Read more »


” ); what shall we place between these ? symbol… Read more »

Thanks so much. Just saved a life. Cheers!

Thanks for the useful information..!!!