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

By
Imran Uddin
-
29
149
0
(0)

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.

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

0 / 5. 0

RELATED ARTICLESMORE FROM AUTHOR

29 COMMENTS

  3. Hii Bro,

    The tutorial and video is really awesome and most of the bloggers will find it so much useful 🙂 You made it so simple and understandable by adding the video tutorial. Thank you so much Bro.

    Keep sharing such tutorials along with video instructions 🙂

  7. Imran is one of the best blogger in india i often visit his blog , there is lot of blogging subject available which is indeed helpful for new comers like me thanks for the post actually i dont have adsense account need to wait for 6 months then only i can apply for the adsense is it any quicker way to approve adsense before 6 months. thanks for the post and more expecting from you dude..

  8. Im confused about u r tutorial in the above placed code where i have to place our adsense converted code can u explain ???? or no need of placing adsense code in the above code

  10. For blogspot users you have to add one more thing in this article is that to replace async with async=”async” into adsbygoogle.js otherwise it won’t be saved in template editor.

    and also need to add <![CDATA[” and ends with “]]> into above responsive ads JavaScript.

    BTW, very nice article and video tutorial.. 🙂 (y)

  11. This is really an informative post.
    This type of ad format can also be created by changing data-ad-format=”auto” to data-ad-format=”rectangle” in your responsive ad unit.
    Thanks for sharing this video tutorial! 🙂

  13. Hello Imran,

    it’s really an informative post and your video tutorial idea is also awesome. Readers can easily find out the solutions. Thanks again.

    Thanks & Regards,

    Moumita Ghosh

  15. Great tutorial!!! I was looking for this for so long. I was using custom adsense ad unit on my blog and it was working fine on PC but it was not perfect for the mobile view as I was using a responsive template. After I cam across this post I implemented the method on my blog, since then it’s just working great and increased my earning too.

  16. Very informative and versatile tips on google adsense. Hope it will be helpful for beginner blogger like me who wants to increase their AdSense income. Thanks for nice article

  19. Cool blog! Ӏs your theme custom made or did you dοwnload іt from somewɦere?

    A theme likе yours ѡitҺ a few simple adjսstements would really mɑke my blog shine.

    Please let mе know where you got your theme. Witɦ thanks

  24. hell brother,,,if we modify as you said does it follows the rule of google ad-sense policy …i tried to on blog template but converting your code to xml is says error on save..these two && is error so i could not save and use your logic,,please help me ..

Comments are closed.