How To Place 728 x 250 Custom Responsive Adsense Ad In WordPress Blog

How To Create And  Place 728 x 250 Custom Size Responsive Adsense Ad  In WordPress Blog:

Adsense is the major income source for bloggers, and that’s the reason every blogger and webmaster use Adsense in their websites. Google Adsense provides good CPC when compared to other networks. Now while placing the ads, most of the people use responsive ads because they will automatically adjust width when viewed in a smaller device. That’s a good thing with Adsense. If you place a responsive ad on your site, it will adjust width automatically for mobiles and tablets as you all know. Also, responsive ads can be used for text and display ads only not for link ads as you all know. Don’t miss the deal: Godaddy $1/Month Hosting.

how-to-create-place-728-x-250-custom-size-responsive-adsense-ad-wordpress-blog

But when you view the responsive ad on the desktop, you will notice the size of the ad to be 728×90 banner. But once think, you can get more clicks if the size of the ad is more than that.

Hope you didn’t get what I am talking about. Right?

No problem. I will go in detail. Yeah, what I am talking about is the size of the ad. More the size of the ad, more will be the chance for clicks and improves your earnings. Instead of 728×90, why can’t you place a bigger responsive ad with more size say 728×250?

Check: Blogger Vs WordPress Infographic 2017

I think some of the blogs are already using this technique and earning more. Don’t worry; I think you will also implement after reading this guide.

Here is how to implement 728×250 size custom responsive Adsense ad on your blog.

  • Firstly, login to your Adsense account with your Adsense email id.
  • Click on My Ads and create a new ad unit.
  • Give your ad unit name and select Ad size as “custom size.”
  • Select Width as 728 and height as 250 (as I am discussing about 728×250 size. You can try other. Of course width doesn’t matter.)
  • Remain the other settings as it is.
  • Click on save and get code.
  • Now don’t place the code in your blog.

You have to make small changes to your code to make your code responsive.

Note: If you place the code as it is, your ad is not responsive, and it will be ugly on some low screen devices.

So, you have to make some changes to make the ad code responsive and work on all devices.

Here is the step by step process to make your custom AdSense code responsive

Now copy the below code in a notepad and replace few things with your ad code details.

 

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

<script type="text/javascript">

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

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

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

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>

Now replace “ca-pub-id” with your AdSense publisher id, “slot-id” with the AdSense ad unit id, and height as 250.
Now place this code in your AdSense plugin which you are using or in any widget.

Now check the ads on various devices. If you are using blogger, you have to convert the code for blogger. Hope you know that.

Note: This is not an Adsense violation and approved by Adsense staff. Script developed by Amit Agarwal (labnol.org)

You can use this technique in posts and improve your earnings.

Hope you liked the post. Share this and don’t forget to bookmark the site for more updatesKeep visiting……

Check: Google Adsense Approval Guide 2017

Leave a Reply