Modification of Adsense Responsive Ads With Media Query -
There are some Bloggers who are still confused to modify the Adsense ad unit
for fear of violating the Adsense policy. So they can not adjust the Adsense
ads to the desired size.
For this reason, this time I will show you how to modify the
size of acceptable Adsense ads and will not violate the AdSense Program
policies by modifying responsive ad code in this agreed manner.
We can modify Adsense responsive ads by using CSS media
queries to determine a certain size on a certain screen width so that ads
appear more optimally.
Determine the Ad Unit Size per Screen Width
The following is an example to show you how to change the
responsive code of your Adsense ads to set more specific ad unit sizes for
three types of screen width, i.e., mobile, tablet, and desktop.
You at least have a little experience about using CSS media
queries so that when modifying AdSense ad code to follow this example it can be
as expected and does not cause errors on your theme.
Here are a few examples of responsive ad code that is
modified by setting the right ad unit size for per screen width:
Horizontal Advertising
1. For screen widths up to 500px: use a 320x100 ad unit.
2. For screen widths between 500px and 799px: use a 468x60
ad unit.
3. For screen widths of 800px and wider: use a 728x90 ad unit.
For Non AMP
Add the following CSS to your blog style.
.iklan_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }Then add the class iklan_responsive_1 to the ad code as follows. You can place the same ad code in several places according to your blog's design.
<ins class="adsbygoogle iklan_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Then please save the following JS Adsense code above the </body> code. Please note that we only need to use 1 JS Adsense on the blog so it doesn't interfere with loading the blog. Or you can also use Adsense lazyload so that it doesn't interfere with blog loading.
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>For AMP HTML
For AMP HTML, we can use media queries in HTML . For this
ad, you can use a code like this.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='100' media='(max-width: 499px)' type='adsense' width='320'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='60' media='(max-width: 799px) and (min-width:500px)' type='adsense' width='468'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' media='(min-width: 800px)' type='adsense' width='728'>
</amp-ad>Use the same data-ad-client and data-ad-slot in the three amp-ad codes and save the three codes in the same ad slot on your blog. And you can use it in several slots according to your theme design.
Square Ad
1. For screen widths up to 500px: use a 100vw x 320 ad unit.
2. For screen widths between 500px and 799px: use a 300x250
ad unit.
3. For screen widths of 800px and wider: use a 336x280 ad
unit.
For Non AMP
Add the following CSS to your blog style.
.iklan_responsive_2 { width: 100vw; height: 320px; }
@media(min-width: 500px) { .example_responsive_2 { width: 300px; height: 250px; } }
@media(min-width: 800px) { .example_responsive_2 { width: 336px; height: 280px; } }Then add the iklan_responsive_2 class to the ad code as follows. You can place the same ad code in several places according to your blog's design.
<ins class="adsbygoogle iklan_responsive_2"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Then please save the following JS Adsense code above the </body> code. Please note that we only need to use 1 JS Adsense on the blog so it doesn't interfere with loading the blog. Or you can also use Adsense lazyload so that it doesn't interfere with blog loading.
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>For AMP HTML
For AMP HTML, we can use media queries in HTML . For this
ad, you can use a code like this.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 499px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='250' media='(max-width: 799px) and (min-width:500px)' type='adsense' width='300'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='280' media='(min-width: 800px)' type='adsense' width='336'>
</amp-ad>Use the same data-ad-client and data-ad-slot in the three amp-ad codes and save the three codes in the same ad slot on your blog. And you can use it in several slots according to your theme design.
Responsive Ads With Fixed Height
As a bonus, you can modify the Adsense responsive ad code by
specifying a width that can adjust to the width of the ad slot and a fixed
height for the ad unit, for example with a height of 90px.
Here is an example of how to make modifications to determine
a fixed height of 90px and variable width from the min-width screen width of
400px to max-width of 970px:
For Non AMP
Add the following CSS to your blog style.
@media(min-width: 400px and max-width: 970px) {.iklan_responsive_3 { width: 100%; height: 90px; } }Then add the class iklan_responsive_3 to the ad code as follows. You can place the same ad code in several places according to your blog's design.
<ins class="adsbygoogle iklan_responsive_3"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>For AMP HTML
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' media='(max-width: 970px) and (min-width:400px)' type='adsense' layout='fixed-height'>
</amp-ad>May be useful. If you don't understand, please ask in the comments column.