给难以关闭的悬浮广告位增加关闭按钮

2016-11-30 16:40 来自本站原创 27,251 14 13
[摘要]

很多广告联盟提供的悬浮广告都很难关闭,且经常有看似关闭按钮实则为诱惑点击的情况,为了减少用户体验降低,本文教大家给悬浮广告位增加关闭按钮。

做站的都知道,广告和用户体验是一个难以调和的矛盾,特别是小站点在没有固定的合作伙伴支撑网站发展的情况下,挂广告联盟成了大多数站长的选择。但百度、360这些广告的收益却不敢恭维,咱们不得不选择收益较高的小联盟,然而小联盟的广告经常却远没有百度、360这些联盟的广告友好。

其中最讨人厌的就是小联盟的广告经常出现无法“一键关闭”的情况,比如右下角悬浮广告:广告边缘处出现的关闭字样实际上毫无用处,倒是误导你点了广告或者直接没有关闭按钮。虽然雅兮网也挂了这种广告,但实际上笔者对这种诱导点击深恶痛绝!

给难以关闭的悬浮广告位增加关闭按钮

悬浮广告看似关闭按钮实则诱导点击

所以咱今天就来给这类广告增加一个可用的关闭按钮,在不损害广告商利益的前提下保障用户体验,实际上这种无法关闭的广告有违法嫌疑。

分析

笔者观察了一些较友好的悬浮广告,其关闭功能原理是在广告<div>盒子里有一个点击按钮,点击触发js,将广告<div>盒子增加一个CSS样式style="display:none;"从而广告消失,原理非常简单。

一般情况下,小联盟的悬浮广告都是通过在网站上投放一段广告js,然后执行出一个css样式为position: fixed;的<div>盒子,里面通过嵌套调取广告内容,此时广告<div>盒子内没有关闭按钮。

通过分析,我们得出来只需要新增一个关闭<div>,也对其设置position:fixed;样式,点击它,让他找到广告<div>盒子,然后给广告<div>盒子增加一个CSS样式style="display:none;",由于按钮不在广告盒子中,我们还要让它自己在点击后消失,不然广告隐藏了,关闭按钮还在悬浮着。

得出代码

实际代码如下:

<!-- 给悬浮广告位增加关闭按钮by www.yaxi.net -->
<div class="close-ad" style=" position: fixed; right: 0; bottom: 260px;cursor:pointer;">
 <a title="关闭" onclick="this.style.display='none';document.getElementById('广告盒子id').style.display='none'" href="javascript:void(0)">
 <img src="https://www.yaxi.net/images/close-ad.gif">
 </a>
 </div>

上述代码建议直接跟悬浮广告代码放在一起,其中关闭按钮<div>的样式right,bottom根据实际情况进行修改,让其能够完美的和广告结合在一起;getElementById后面的id需要仔细查看你广告的盒子id;图片建议本地化,雅兮网启用了防盗链,直接调用可能无法显示。达到如下效果,大家可测试雅兮网悬浮广告效果!

给难以关闭的悬浮广告位增加关闭按钮

为悬浮广告增加关闭按钮效果

本代码部署简单,效果显著,样式也能与绝大多数广告适配,欢迎大家使用。

最后还要说几句:大家都知道悬浮广告不如固定广告,固定广告不如不挂广告,但是网站运营维护是需要时间精力还有金钱的,特别是有一些访客的网站,不挂广告怎么坚持的下去?特别是没有固定合作伙伴或者还没有找到赢利点的站点,挂悬浮广告也是无奈之举。

所以希望大家不要动不动就说“你为什么要挂个这种广告啊?”“我就不喜欢广告,我的网站就不挂广告!!”“你网站广告太多了,看着烦”情况不一样就不要用自己的标准去要求别人,你知道别人投了多少钱么?仅此...

本文最后更新于2016年11月30日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:14   其中:访客  0   博主  0
    加载中...
    1. 7年前 (2016-12-05) 20楼

      这样增加了访的户体验

    2. 7年前 (2016-12-04) 19楼

      用了屏蔽插件以后,你会发现,广告被屏蔽了,但关闭按钮还在,哈哈

    3. 7年前 (2016-12-02) 18楼

      这个可以有

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 14 13 27,251
    Top