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

投稿   雅兮网  2016-12-01 07:29:59  282 人阅读  14 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

摘要:

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

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

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

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

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

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

分析

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

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

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

得出代码

实际代码如下:

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

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

如何给难以关闭的悬浮广告位增加关闭按钮 效果图

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

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

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

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

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,  
原文地址:http://www.iyaxi.com/2016-11-30/1167.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. BanYuner
    BanYuner 【进士】 @回复

    个人感觉只要对个人有用的就算不上广告

  2. Koolight
    Koolight 【尚书】 @回复

    做个假关闭更好,诱惑点击!

  3. 明月登楼的博客
    明月登楼的博客 【王爷】 @回复

    呵呵,小联盟的有时候实在是不靠谱呀!

  4. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    [微笑] 广告是要有滴,万一能够赚钱呢?!但是,绝对不可贪多了,如果访客感觉深恶痛绝的话那就很有可能要玩完了。

    • boke112导航
      boke112导航【村长】2016-12-01 12:53  回复

      @我爱动感单车网投放广告最高境界就是跟博客网站相结合,让人看了都不知道是广告,而且有了这个广告还能起到装饰的作用,如果能够做到这样投放广告应该没人会讨厌了

      • 雅兮网
        雅兮网 作者回复2016-12-01 13:58  回复

        @boke112导航有些广告主要求他们的广告不能跟网站内容做的一模一样,要突出 [偷笑]

  5. 分钱榜
    分钱榜 【进士】 @回复

    很实用的功能哦

  6. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    不错哦,相当有用。

  7. DIY大全
    DIY大全 【进士】 @回复

    严重影响用户体验啊

  8. 爱时尚
    爱时尚 【尚书】 @回复

    很多广告就是这样的,强制性的不让你关掉

    • 我爱动感单车网
      我爱动感单车网 【尚书】2016-12-01 12:49  回复

      @爱时尚[抓狂] 不让关闭倒还算了,最令人厌烦的是只要点击了就会自动跳转到广告页面,有些甚至会一连跳出几个网页,让人抓狂、让人有种被人强jian的老大不爽的感觉!

  9. 金榜台博客
    金榜台博客 【状元】 @回复

    来学习了

  10. 小萝博客
    小萝博客 【状元】 @回复

    这不就是昨天的

  11. 网际电脑
    网际电脑 【状元】 @回复

    悬浮广告位多少钱一个月?