How to Responsive Google Adsense code on Responsive template

You are planning to use Responsive Google AdSense ads with a responsive design, this tip will help you to do it. The difference is in the underlying code. You can copy the above text and paste it in your website, and don’t forget to replace publish ID and ad unit ID with yours.

Responsive Google Adsense
Responsive AdSense Ads (Synchronous)

Multiple ad can also be placed using the same code above. All you need to do is change the DIV ID, so that they become google-ads-2, google-ads-3 and so on.

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

    <script type="text/javascript">

    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');

    if (ad.getBoundingClientRect().width) {
    adWidth = ad.getBoundingClientRect().width; // for modern browsers
    } else {
    adWidth = ad.offsetWidth; // for old IE
    }

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

    /* Replace 1234567890 with the AdSense Ad Slot ID */
    google_ad_slot = "1234567890";
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
    google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
    google_ad_size = ["468", "60"]; /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
    google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
    google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
    google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
    google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
    google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
    google_ad_size = ["125", "125"]; /* Button (125 x 125) */

    document.write (
    '<ins class="adsbygoogle" style="display:inline-block;width:'
    + google_ad_size[0] + 'px;height:'
    + google_ad_size[1] + 'px" data-ad-client="'
    + google_ad_client + '" data-ad-slot="'
    + google_ad_slot + '"></ins>'
    );
    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    </script>
Share this :

Comments are closed.

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter