Responsive ads for magazine pro

[Ritesh Verma]

Hey guys,

I am looking for something that can turn my ads into responsive ads. Just like google adsense provide. Example if width >=728Px then show leaderboard if >=468px then show banner if >=300Px then show a large rectangle.

i know it should be like

check view port width and then

width >=728px
paste ad iframe code here
width >=468Px
paste ad iframe code here
width >=200Px
show no ad

i am looking forward, if someone could help me with this, since using unmatched ad size creates no sense in a responsive theme

http://studypep.com/

[nutsandbolts]

This tutorial should answer many of your questions: http://www.labnol.org/internet/google-adsense-responsive-design/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Ritesh Verma]

Dear, i have already mentioned "like google provide" Amit sir, have written that tutorial strictly for adsense. I uses it with adsense but about making other ad tags responsive too.

All blogs doesnot use adsense or just adsense. We should make other tags responsive as well.

Thanks

[nutsandbolts]

No need to be condescending, especially when you're essentially asking others to Google the answer for you.

If you're using an image banner, assign it a div class and give it a max-width of 100% or background-size: contain. Otherwise, without specific examples of the ad type, it's difficult to tell you how to make your ads responsive. Adsense was the lone example you gave, which is why I directed you to a tutorial for Adsense.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Ritesh Verma]

This reply has been marked as private.

[tonymayo]

Hi,
I would like to add Responsive Adsense to my blog ( Magazine Pro theme) in the following slots:

Header Right

Primary Sidebar

After Post Content

Do I add code below (from http://www.labnol.org/internet/google-adsense-responsive-design ) to my Theme CSS file and if so where should I add code.

<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>

Thanks in advance.

[Author]

Posts