Now days many websites are responsive, so what if they want to place adsense ad units. but till now we don't know whether we can place responsive adsense ads on our website. So relax, today i will tell you hoe to make responsive Adsense Ad units.
Earlier also people have already experimented on this thing and obviously they have created responsive ad designs but now we are talking about official update from Google which is much more stable and legal to be applied, yes now you do not worry about manipulating the code unless its under terms.
Responsive Adsense Ad Units:
Well now if you visit your AdSense account you will see that under New Ads creation wizard you will find another head called "Other - Responsive" so now under this one you have once simple ads unit that’s responsive and will work on the CSS base, which you need to create.
Well this is in BETA testing, still its working like a charm. Now this code is already Asynchronous Loading enabled so you will not see that two code choosing option. Now as you choose the code you will get your code somewhat like below including some default @media tags for responsive CSS structure, but will need to manipulate these codes according to your website's requirement.
So now you able to add this code to wherever you want responsive ad design but make sure you you customize the @media tags according to your website, else it won’t work.
Earlier also people have already experimented on this thing and obviously they have created responsive ad designs but now we are talking about official update from Google which is much more stable and legal to be applied, yes now you do not worry about manipulating the code unless its under terms.
Responsive Adsense Ad Units:
Well now if you visit your AdSense account you will see that under New Ads creation wizard you will find another head called "Other - Responsive" so now under this one you have once simple ads unit that’s responsive and will work on the CSS base, which you need to create.
Well this is in BETA testing, still its working like a charm. Now this code is already Asynchronous Loading enabled so you will not see that two code choosing option. Now as you choose the code you will get your code somewhat like below including some default @media tags for responsive CSS structure, but will need to manipulate these codes according to your website's requirement.
<style>Note: This is only for demonstration purpose and it will not work for your website, you need to create your personal ad code right from your account.
.tutsol-responsive-ad { width: 320px; height: 50px; }
@media(min-width: 500px) { .tutsol-responsive-ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .tutsol-responsive-ad { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tutsol Responsive Ad -->
<ins class="adsbygoogle tutsol-responsive-ad"
style="display:inline-block"
data-ad-client="ca-pub-123456789012345"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
So now you able to add this code to wherever you want responsive ad design but make sure you you customize the @media tags according to your website, else it won’t work.
