首页 > 建站/维护 > Google AdSense(谷歌广告)自适应设计实现
2014
01-06

Google AdSense(谷歌广告)自适应设计实现


      前段时间刚从月光博客转载了一篇自适应网页的设计方法,今天看到又更新了,有了个谷歌广告的自适应,收藏到博客先,以便以后的网站修改升级。


  所谓自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,基本上对于双栏网站来说修改最简便,只要在HTML头部增加viewport标签,在CSS文件尾部增加针对不同屏幕分辨率的规则,布局宽度使用相对宽度,隐藏侧栏,半小时就能提升网站的手机移动浏览体验。


  但是网站修改完成后,我们会发现原先的Google AdSense广告单元并没有实现自适应,浏览体验并不好,实际上,只要简单的几步操作,就能让Google AdSense广告实现自适应设计。


  最简单的方法是新建一个广告单元,在“广告尺寸”里选择“自适应广告单元”即可,如下图所示,这个我们就不多讨论。

3718_1.jpg




  现在主要讨论一下原有的旧广告单元如何实现自适应设计。


  首先,如果原有的Google AdSense广告代码类型为“同步”,则必须先将代码修改为“异步”代码,登录Google AdSense后台,在相应的广告单元里,点击“获取代码”,目前默认的代码就是异步代码。


  之后,我们需要对代码进行一些修改,修改的方法有两种:


  原有的示例代码:


<ins class="adsbygoogle"

    style="display:inline-block;width:300px;height:250px"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000"></ins>


  方法1、智能调整尺寸


  将中间一行ins代码里的style="display:inline-block;width:300px;height:250px"替换为style="display:block",并在后面增加data-ad-format="auto"这个属性。


  修改后的代码变为:


<ins class="adsbygoogle"

    style="display:block"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000"

    data-ad-format="auto"></ins>


  方法2、高级调整尺寸


  在整段代码前增加<style>样式内容,针对不同分辨率的屏幕展示不同尺寸的广告。


  修改后的代码变为:


<style>

.my_adslot { width: 320px; height: 50px; }

@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }

@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }

</style>


<ins class="adsbygoogle my_adslot"

    style="display:inline-block"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000"></ins>


  上面两种方法都可以,建议用方法1,简单易用。


  经过这样的修改,原有的Google AdSense广告单元即可实现自适应网页设计。


  有些用户可能会疑虑,这种方法修改了Google Adsense的广告代码是否符合Google的政策,根据Google AdSense的官方网页介绍,如上的自适应设计的代码修改是可以接受的修改,因此与网站相适宜的广告修改并不违反Google AdSense的政策。


  经过这样的修改,最终网站在手机上的展示形式如下图所示,AdSense广告内容也可以正常在手机上展示了。

3686_1.jpg


关于 设计自适应网页方法

自适应网页基础视频:  优酷链接


文章来源月光博客,本站略有改动,本站链接http://www.wusiwei.com






网友评论(2)

哎,现在还没通过Google Adsense审核呢。。。真苦逼。。。
2014-01-08 20:25   回复
@香菇肥牛:都放弃申请了,100刀才能提现,不知道是猴年马月
2014-01-08 21:49   回复