Responsive Google Ads for Blogger

Good day every one! I'll show you how to make responsive google ads for blogger. I was tried in my blog and work well. So if you still have problem when make ads with responsive theme, follow this step.

1. Play with Media Query

Thats mean we should know all media query in our blog. For example, template this blog using media queri :
@media all and (max-width: 951px) {}
@media all and (max-width: 599px) {}
@media all and (max-width: 450px) {}

2.  Make Certain About Ads

If we want to put ads on container, we should know container width. We can make custom adsense for example 970x90. That mean have width 970px and height 90px.

3. Adding Google Ads

In order to have a responsive ad unit will be a little hard and limited. You can add maximum of 3 ads, and you will start with the biggest (970x90) or you can use only the normal wide ad (728x90) and the rectangle ad (300x250). In this tutorial we will use all 3, to understand the concept of using the responsive method.
Take code in 'my ads'  on your google adsense account and get code. Choose synchronous and that code like this one :

<script type="text/javascript">

    google_ad_client = "ca-pub-0000000000000001";

    google_ad_slot = "999999999";

    google_ad_width = 728;

    google_ad_height = 90;

</script>

<!-- Your ads name -->

<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

add only once script code for fast loading and repeat all ads.

<div class="responsiveAd970">
    <!-- place adsense 970x90 script here -->
</div>

<div class="responsiveAd768">
    <!-- place adsense 728x90 script here -->
</div>

<div class="responsiveAd300">
    <!-- place adsense 300x250 script here -->
</div>

4. CSS and Media Query

.responsiveAd300,
.responsiveAd768,
.responsiveAd970 { text-align: center; margin: 25px 0 25px 0; }
.responsiveAd300 { display: none; }
.responsiveAd768 { display: none; }
@media screen and (max-width: 951px) {
    .responsiveAd768 { display: block; }
    .responsiveAd970 { display: none; }
}
@media screen and (max-width: 599px) {
    .responsiveAd768 { display: none; }
    .responsiveAd300 { display: block; }
}
@media screen and (max-width: 450px) {
    .responsiveAd300 { overflow: hidden; padding-right: 20px; }
}

 Now you can try with your custom template and custom adsense for blogger. Happy blogging

Ranking: 5