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

29
89

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.

29
Leave a Reply

avatar
27 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
28 Comment authors
PoojaNonyeBikashnirdoshMani Teja Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
vandana chhabra
Guest
vandana chhabra

Thanks for a usefull information @Imran Uddin

subash
Guest

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

Amit Kumar
Guest

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

Yaduvanshi
Guest

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

rahul rastogi
Guest

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

vijay
Guest

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

charan
Guest

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

Arun
Guest
Arun

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

Jacob Koshy
Guest

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

Nitin Maheta
Guest

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

Bilal
Guest

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

rajesh
Guest

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

Subodh Kumar Sharma
Guest

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

diamond
Guest

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

Moumita Ghosh
Guest

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

Azure
Guest

Nice post
thanks for sharing

Sajib Biswas
Guest
Sajib Biswas

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

mehedi hasan
Guest
mehedi hasan

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

rajesh
Guest

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

Mohammed
Guest
Mohammed

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

xxx
Guest

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

Rejul RS
Guest

Useful. Thanks

Gopalakrishnan
Guest

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

Arsh
Guest

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

Mani Teja
Guest
Mani Teja

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

nirdosh
Guest
nirdosh

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

Bikash
Guest
Bikash

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

Nonye
Guest

Thanks so much. Just saved a life. Cheers!

Pooja
Guest

Thanks for the useful information..!!!