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.
- 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 Labnol.org.
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>
<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.
Imran Uddin started his career as a Blogger, now runs a Tech company -
vandana chhabra says
Thanks for a usefull information @Imran Uddin
subash says
bro this post is awesome can you plz say me whether how can we get adsense approve for my blog http://techyknowbuzz.blogspot.in/ without buying a domain my site can be
Amit Kumar says
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 🙂
Yaduvanshi says
That’s really great tips and tricks, this is really going to help especially students bloggers.
Thanks
rahul rastogi says
Thanks Imran for sharing this useful information… keep sharing such informative content… cheers mate..
vijay says
Hi .
Very useful tutorial. It solved my mobile ad problem. Are u sure is it won’t violate google AdSense rules
charan says
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..
Arun says
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
Jacob Koshy says
Great tutorial bro, I previously used to tweak my blog layout and width to match the ad unit sizes, now this seems to be an easier option.
Nitin Maheta says
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)
Bilal says
Hi .
Very useful tutorial idea is also awesome.thanks alot bro
rajesh says
Nice post thanks for describing a way even new bloggers can understand
Subodh Kumar Sharma says
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! 🙂
diamond says
thanks alot bro…. Hope to get some increase in my earning using these ads format now
Moumita Ghosh says
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
Azure says
Nice post
thanks for sharing
Sajib Biswas says
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.
mehedi hasan says
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
rajesh says
nice post and describing in a way useful for newbie bloggers
Mohammed says
its really good tutorial and awesome video u have created .,
thank you bro.
xxx says
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
Rejul RS says
Useful. Thanks
Gopalakrishnan says
That’s fine but I don’t know what is the main use for creating this custom ads pls explain
Arsh says
Awesome, Just Followed this guide in my blog, and very excited to see the results. thanks Imran 😀
Mani Teja says
this really very informative and hard to find post like this
nirdosh says
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 ..
Bikash says
”
);
what shall we place between these ? symbol i have edited this with ? symbol
Nonye says
Thanks so much. Just saved a life. Cheers!
Pooja says
Thanks for the useful information..!!!