惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
F
Fortinet All Blogs
J
Java Code Geeks
Y
Y Combinator Blog
Stack Overflow Blog
Stack Overflow Blog
V
Visual Studio Blog
M
MIT News - Artificial intelligence
腾讯CDC
Last Week in AI
Last Week in AI
The Cloudflare Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Jina AI
Jina AI
Microsoft Security Blog
Microsoft Security Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
P
Proofpoint News Feed
博客园 - 叶小钗
Recent Announcements
Recent Announcements
T
Tailwind CSS Blog
Engineering at Meta
Engineering at Meta
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
人人都是产品经理
人人都是产品经理
L
LangChain Blog
博客园 - 司徒正美
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

mephisto.cc

修复rime-ice无法弹出候选框的问题 开机滚动字体显示优化 个人网站安全防护 树莓派上部署Vaultwarden 使用goaccess实时分析Caddy日志 个人网站监控 Hugo全站AVIF记 Linux下尝试使用Godot开发小游戏 Arch linux dae 透明代理 Airflow接管galler-dl下载任务 如何使用gallery-dl批量下载图像 Arch核显下如何愉快玩Dota2和CS2 Arch/labwc 环境网络相关设置 Rime添加dota2词库 Arch 重装记录 Supertuxkart iOS版终于发布了 打造自己的流媒体音乐服务 剪切板管理工具clipcat推荐 MangoHud性能监控 微信小程序开发记 Rofi试用 解决Arch下VSCode无法输入中文的问题 独立窗口管理器下无法录屏问题处理 上海市二手房成交数据监控 OpenLDAP监控 Arch linux如何顺畅连接蓝牙设备 使用Git和Ansible管理配置文件 Arch Linux SSL VPN 客户端配置 简单获取celery任务实时结果 Arch linux下iNode客户端的安装和使用方法
网站导航栏防止插入Adsense自动广告
2023-10-09 · via mephisto.cc

Google Adsense 自动广告虽省心,但有时候它会把广告放在不合适的位置上,严重影响用户访问。比如我的这个站点,会莫名其妙地把广告插入导航栏的上边或下边(蓝框里面),这智能算法也是醉人。

以前我采取的解决方法是:后台设置直接排除对应区块。这样有可能会减少广告投放,影响搞钱,凡是和赚钱作对的事情都要弄得少少的。

后来我在“广告设置预览”中打开浏览器调试工具,发现 Google 是在<header></header> 中插入了和 nav 并列的广告代码。

先看 header.html 部分的代码

header-nav

google 的算法貌似是优先往 header 里面插入广告块,nav 上下各一个广告位,毕竟黄金位置。

自动广告算法不是万能的,我用的这个皮肤,header 和 nav 是强关联的,nav 的部分样式从 header 继承。如果不做改动,结果是导航栏的蓝条框内都会被插入广告,奇丑无比,忍无可忍。

胳膊拧不过大腿,我的解决办法如下:

这样 header 样式为空,随便 Google 怎么玩,nav 是独立的,只要不蠢到往 <nav></nav> 里面放广告,导航条还在、功能显示、样式正常,就不影响用户使用。

css header to nav

顺带也把页面改了下,方便宽屏展示"侧边栏广告",从别人那里学到的(毕竟维护网站也有费用,域名、主机、付出时间等都还远远没有回本)。

2. 再让 nav 能始终显示出来

 1.nav
 2  color: $haze
 3  display: flex
 4  justify-content: space-between
 5  background-color: $bg
 6  padding: 0 1.5rem
 7  position: relative
 8  width: 100%
 9  z-index: 999999
10  left: 0

核心属性为:position: relativez-index: 999999,结果是让 nav 始终在占有一席之地,导航被挡或者弄错乱,会严重影响用户访问网站,信息入口要牢牢把控。

3. 查看结果

最终在广告预览里面显示广告模块,确认不会挤入 nav 中了,要不在上面,要不在下面,不影响导航。

如下图所示:

nav anti ads

每个人的网站皮肤不一样,碰到类似情况,读者可以看看源码,再看看 Google Adsense 是自动往哪些区块插入,根据情况因对处理。