Now Reading
How To Add Responsive Google Adsense In BlogSpot Blog ?

How To Add Responsive Google Adsense In BlogSpot Blog ?

by AdminAugust 26, 2016

Below is the HOW-TO guide to tweaking the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of its framework. Here’s an easy way to make it happen.


Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad units.

Make sure you select “asynchronous” code type from the drop down menu.

<script async src="//"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
(adsbygoogle = window.adsbygoogle || []).push({});
  1. You simply add a <div> around it.
  2. Named the class to responsive-ad on the <div>
  3. Added the class responsive-ad to <ins>. So it’s now ads by google responsive-ad.
  4. Changed the style to display:block
  5. You must replace data-ad-client numbers and data-ad-slot numbers with yours.
  6. Added data-format=“auto” before closing </ins> tag.
  7. Add <style> tags. You can tweak it whatever you want.
<div class="responsive-ad"> 
<script async src="//"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
(adsbygoogle = window.adsbygoogle || []).push({});
<style type="text/css">
.responsive-ad { width: 320px; height: 50px; margin: 0 auto; }
@media (min-width:480px) { .responsive-ad { width: 468px; height: 60px; } }
@media (min-width:768px) { .responsive-ad { width: 728px; height: 90px; } }

The <style> above has set a minimum of 768px (and up) for desktops, a minimum of 480px (and up but below 768px) for tablet, and 320px (and up but below 480px) for mobile. You may feel free to change the numbers of min-width: as your site structure.

Enjoy your blogging and monetizing with the new Responsive Google Adsense!

Please wait...
About The Author

Leave a Response