Loading
0

谷歌联盟如何固定广告的宽高度和去除黄底教程(PC端加移动端)

公众号搜索菜鸟站长之家

我们平时看到的谷歌广告联盟广告尺寸往往大小经常变化影响美观和用户体验,有没有什么办法可以限制或者固定尺寸呢?答案是有的,谷歌广告固定高度的方法其实很简单,不信你往下看。

示例截图:

注意看这个由于这个占屏很大的并不是“谷歌联盟自动广告”代码,是我自己主动添加的。

Google Adsense 官方 解决方法

1、指定大体形状(仅限桌面设备)

您可以通过修改广告代码来指定广告单元应采用的大体形状(横向、竖向和/或矩形)。以下示例显示如何进行修改:

水平形状示例:

默认情况下,我们的自适应广告代码包含一个 data-ad-format 代码(值为“auto”),此代码可让自适应广告单元自动确定尺寸。不过,您可以为自适应广告单元设置大体形状,方法是将 data-ad-format 的值更改为以下任一值:“rectangle”、“vertical”、“horizontal”或这些值的任意组合形式(以英文逗号分隔),例如“rectangle, horizontal”。

以我博客为示例,由于我的广告是横向长方形的,我只需要修改为如下代码:

data-ad-format="rectangle,horizonta"

2、如果您发现我们的自适应广告代码无法满足您的所有需求,则不妨修改广告代码,通过 CSS 指定广告单元的确切尺寸。

注意:除非您对修改广告代码非常有把握,否则我们不建议您使用这些高级功能。

指定可展开宽度和固定高度:

您可以修改自适应广告代码,通过 CSS 指定广告单元的可展开宽度和固定高度。以下示例显示如何进行修改:

高度固定的可展开宽度示例:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 横向广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-317423251829"
     data-ad-slot="8517631"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

谷歌联盟“自适应广告占屏很大”最终解决方法

这个方法也是最简单的最快捷让你的谷歌联盟实现固定宽高度,不用添加任何的CSS,只需要在谷歌聪明广告代码中操作即可!具体如下:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 横向广告 -->
<ins class="adsbygoogle"
     style="display:display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
     data-ad-client="ca-pub-317423251829"
     data-ad-slot="8517631"
     data-ad-format="rectangle,horizonta"
     data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

移动端解决办法:

根据屏幕宽度指定确切宽高尺寸,如果知道在每种设备上最适合您的自适应网站的确切广告单元尺寸,则您可以使用 CSS3 媒体查询来设置自适应广告单元的尺寸。下面的示例显示了如何修改广告代码以使用 CSS3 媒体查询:

<div class="span6">
<!-- 横向广告 -->
<style type="text/css">
.adslot_1 { width: 310px; height: 60px; }
@media (min-width:320px) { .adslot_1 { width: 100%; height: 70px; } }
@media (min-width:400px) { .adslot_1 { width: 100%; height: 70px; } }
@media (min-width:768px) { .adslot_1 { width: 100%; height: 80px; } }
@media (min-width:920px) { .adslot_1 { width: 100%; height: 80px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block; text-align: center;"
data-ad-client="ca-pub-3174232518297739"
data-ad-slot="8517631535"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="span6">
<!-- 横向广告 -->
<style type="text/css">
.adslot_1 { width: 310px; height: 60px; }
@media (min-width:320px) { .adslot_1 { width: 100%; height: 70px; } }
@media (min-width:400px) { .adslot_1 { width: 100%; height: 70px; } }
@media (min-width:768px) { .adslot_1 { width: 100%; height: 80px; } }
@media (min-width:920px) { .adslot_1 { width: 100%; height: 80px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block; text-align: center;"
data-ad-client="ca-pub-3174232518297739"
data-ad-slot="8517631535"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

注意:替换掉自己的发布商ID和参数值; text-align: center;是居中显示广告。

@media 规则是一种 CSS3 语法,当前所有主流浏览器均支持这种规则。如果您想要支持比较旧的浏览器(例如 Internet Explorer 7 或更低版本),建议先指定默认尺寸。这样可以确保即使媒体查询不受支持,广告也可正常展示。请注意,目前尚未正式支持通过 CSS 在外部样式表中设置广告代码的尺寸。

在某些情况下,尤其是在较小的移动设备上,您可能完全不打算展示广告。如果您确实希望隐藏广告单元,可以使用上述提到的 CSS 媒体查询来设置参数,确保不发出广告请求且不展示广告。

里面里自适应尺寸根据自己的需要修改即可。

注意:

1、固定宽度后,你的移动端页面高度展示也只有90px。广告同样还是会展示的。

2、如果这样设置后,你的广告展示会有一定的局限性,有一些广告就不能展示了,甚至会影响你的收入。

3、个人建议高度还是设置大一点。

4、把里面的发布商ID和密钥改为自己的。

5、<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>这个JS只需要在头部引入一次就行了。里面广告代码里的可以删除。

去黄底教程:

F12查看找到你谷歌广告代码:如图

#FFF改程你要的背景颜色即可,一般在你主题的主CSS里。这个方法只合适纯色背景的主题。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
4、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。