How to create responsive Google Ads adsense Ad on your responsive Website Blog

Table of Contents

Responsive ads code is meant that we made adsense for flexibility on comon device like mobile, tablet and desktop device layout. We can customizing with a little css for responsive to put inside ad code on your website blogger template or wordpress template.

Rule in google  adsense that above the fold not pushing a content to the below so a reader can't see what your content write when read the blog first load especially in mobile and desktop. And you can ignore rule for below the fold with size you want but read the ads information with good perfom in layout so not disturbing your blog worst in search engine because failure in placing adsense ads. 320x300 now is permit for publisher on above the fold oj mobile device.
For best performance in tablet, mobil and desktop you can use 320x100 or 320x50, 320x60 and below the fold and sidebar use 300x250 and 336x280 or 160x600 and 300x600 size ads content to display adsense ad sizes.
Before placing adsense ad you need For Parsing adsense ads Code.
If you think to put adsense in blog posting without ads in sidebar, 3 ads in post make this code, take responsive google ad code and you must go to google adsense sin in with your account google id :

<!-- responsive adsense code by https://blogonpageseo.blogspot.com -->
<style type='text/css'>
.responsive_adsense { width: 300px; height: 100px; }
@media(min-width: 470px) { .responsive_adsense { width: 468px; height: 60px; }}
@media(min-width: 730px) { .responsive_adsense { width: 728px; height: 90px; }}
.responsive_adsense1 { width: 300px; height: 250px; }
@media(min-width: 340px) { .responsive_adsense1 { width: 336px; height: 280px; }}
.responsive_adsense2 { width: 300px; height: 250px; }
@media(min-width: 340px) { .responsive_adsense2 { width: 336px; height: 280px;} }
</style>
<!-- responsive adsense code by https://blogonpageseo.blogspot.com -->

Css code above put in head tag.

<!-- responsive adsense code by https://blogonpageseo.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- responsive_adsense -->
<ins class="adsbygoogle responsive_adsense"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
&lt;/div&gt;
</b:if>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- responsive_adsense1 -->
<ins class="adsbygoogle responsive_adsense1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
&lt;/div&gt;
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- responsive_adsense2 -->
<ins class="adsbygoogle responsive_adsense2"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
&lt;/div&gt;
</b:if> <!-- responsive adsense code by https://blogonpageseo.blogspot.com -->

Replace <data:post.body/> in blogger template with above code but you must replace the adsense code to yours.
For customizing in sidebar remove adsense code 3rd (responsive_adsense2) just paste code adsense without parsing code in your sidebar blogger. Adding size in css 3rd (responsive_adsense2 class) above @media(min-width: 800px) { .responsive_adsense2 { width: 300px; height: 160px;} }.
Note :

For light loding adsense and not making heavy your blog just put one java script asyncronous adsense code <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/> in betwen head tag. And remove from your adsense that js everywhere you place in blogger template.