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
