Sử dụng Google Adsense trên responsive theme

Google Adsense là dịch vụ quảng cáo của Google được rất đông đảo người dùng, webmaster, blogger sử dụng. Cùng với trào lưu sử dụng website/blog với giao diện thiết kế tương ứng (responsive), Google Adsense cũng cần được tùy chỉnh để phù hợp khi duyệt web trên mỗi thiết bị khác nhau. Bài viết này mình sẽ chia sẻ tới các bạn cách để thực hiện được điều đó.

Cách đơn giản nhất là các bạn hãy chèn đoạn code sau vào mã nguồn của website/blog (đối với Blogger, các bạn vào Mẫu > Chỉnh sửa HTML):

<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 XXX with your AdSense Publisher ID */
google_ad_client = "ca-pub-XXX";

/* Replace XXXXXXXXXX with the AdSense Ad Slot ID */
google_ad_slot = "XXXXXXXXXX";
/* 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) */
google_ad_width = google_ad_size[0];
google_ad_height=google_ad_size[1];

</script>

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Dựa vào chú thích trong code để chỉnh sửa thành Adsense của bạn.

Chúc các bạn thành công !

Xem thêm: kjmagic.blogspot.com