We are facing a big transition in web design. In recent days, majority of well developed websites are made in responsive websites. Responsive design is the development responding to the environment based on screen size of a device. That being said the content elements must evolve to meet the technology as millions of bloggers are using Google Adsense technology to monetize their content.
Below is the HOW-TO guide to tweak 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 it’s frame work. Here’s an easy way to make it happen.
Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?
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 unit.
Make sure you select “asynchronous” code type from the drop down menu.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-8255226778912403"
data-ad-slot="1054112722"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
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 adsbygoogle 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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<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; } }
</style>
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!
