Templates by BIGtheme NET

How to Make Your Adsense Responsive Ad Code To Display 300×250 Banner On Mobile

How to Make Your Adsense Responsive Ad Code To Display 300×250 Banner On Mobile

I will walk you though, how to change ad size in adsense, If you or your visitors noticed that your Adsense responsive ad code is not showing the sized of ad banner you expected it to show, do you know you can definitely modify ad code to the taste of your responsive blog. Rather than showing up the ad code to be 300×100 banner above the fold, you can adjust it show 300×250 mobile banner. Google Adsense accepts this.

So, in this short post, I want to show you How to Make Your Adsense Responsive Ad Code To Display 300×250 Ad Banner On Mobile above the fold on mobile.

Here is how my ad code looks like:

<style>
.OBResponsiveTop { width: 300px; height: 250px; }
@media(min-width: 500px) { .OBResponsiveTop { width: 468px; height: 60px; } }
@media(min-width: 800px) { .OBResponsiveTop { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<div style=’display:block;text-align: center’>
<!– OBResponsiveTop –>
<ins class=”adsbygoogle OBResponsiveTop
style=”display:inline-block”
data-ad-client=”ca-pub-XXXXXXX10XXX1“
data-ad-slot=”7XXXXX1“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

This is what the Adsense code above does on your :

  • For screen widths up to 500px: a 300×250 ad unit is shown.
  • For screen widths that ranges 500px and 799px: a 468×60 ad unit is shown.
  • For screen widths of 800px and wider: a 728×90 ad unit is displayed.
  • And the displayed ad unit displays at the center.
ALSO READ:  Pull This Trailer With A Small Car And Be A Happier Camper

How to Make Your Adsense Responsive Ad Code To Display 300×250 Banner On Mobile

So, to make this simple ad code on your blog, follow the steps below.

1. Set up a responsive ad unit in your AdSense account, and note down the following information from your responsive ad code:

Your publisher ID, for example, ca-pub-1221320591234567
Your ad unit’s ID (data-ad-slot), for example, 1590247890.

2. The Codes above:

Replace all instances of OBResponsiveTop with a name, for example. front_page_123, etc.

Replace ca-pub-XXXXXXX10XXX1 with your own publisher ID.

Change it to 4XXXXX3 with your own ad unit’s ID.

3. After then, Copy and paste the ad code you’ve modified to your blog’s HTML where the ads to be shown.

Having done that, open a different browser to test it and make sure that the responsive behavior is working perfectly.

About talkgeria

Leave a Reply

Your email address will not be published. Required fields are marked *

*