联盟广告被屏蔽后显示可点击的图片提示效果

投稿   闲鱼博客  2018-06-28 07:12:40  236 人阅读  31 条评论

很多网站都会添加百度联盟谷歌广告联盟、阿里妈妈联盟之类的广告,但是现在广告屏蔽实在是太腻害了。一旦广告被屏蔽直接就没了,有的在侧栏添加的广告屏蔽后还显示个空白框框在那,很不好看。其实我们可以设置广告屏蔽后显示图片提示的效果,这样也就避免了广告屏蔽后的尴尬。甚至我们可以设置成联盟广告被屏蔽后显示其他可点击的图片广告,这样也能挽回一部分联盟广告被屏蔽的损失。方法很简单,添加一点代码就解决了。

效果对比

联盟广告被屏蔽后显示可点击的图片提示效果 建站经验 第1张

代码部署

1、默认的普通广告代码

我们一般常用的联盟广告代码都是这样的(以百度联盟为例):

  1. <script type="text/javascript">
  2.     var cpro_id = "xxxxxxx";
  3. </script>
  4. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

2、广告被屏蔽后显示其他图片提示的广告代码

  1. <div style="background: url('http://qn.macrr.com/wp-content/uploads/2016/07/noad1.jpg');background-repeat: no-repeat;height: 250px;background-size: 330px 250px;margin:8px;">
  2. <script type="text/javascript">
  3.     var cpro_id = "xxxxxxx";
  4. </script>
  5. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
  6. </div>

从两者的不同可以看出就是给广告代码加一个 DIV 和背景图,再注意下调整一下 css 样式就可以实现联盟广告被屏蔽后显示其他图片提示的效果了。

3、广告被屏蔽后显示其他可点击的图片提示广告代码

通过上面的方法我们已经可以达到广告被屏蔽后显示其他图片提示的效果,但是提示的图片是不可以点击的,只是个摆设效果而已。如果也能支持点击图片实现跳转就好了,这样我们就可以设置为其他的图片广告,挽回部分损失。其实实现起来也很简单,只需要在 DIV 外部添加一个 a 标签就好了。

  1. <a href="http://www.macrr.com/" target="_blank">
  2. <div style="background: url('http://qn.macrr.com/wp-content/uploads/2016/07/noad1.jpg');background-repeat: no-repeat;height: 250px;background-size: 330px 250px;margin:8px;">
  3. <script type="text/javascript">
  4.     var cpro_id = "xxxxxx";
  5. </script>
  6. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
  7. </div>
  8. </a>

其中将 a 标签中的链接改为显示的图片所对应的推广链接就可以达到联盟广告被屏蔽后显示可点击的图片提示效果。

小结

以上举例说明代码中的 DIV 层的样式只是举例说明,如果大家想要实现这种广告被屏蔽后显示其他可点击的图片效果,建议根据自己的博客网站进行调整背景图和样式。代码中的 CSS 代码也是可以添加到当前主题的 style.css 文件中的,具体就看个人喜好了。

历史上的今天:

文章标签: ,   ,   ,  
原文地址:https://www.macrr.com/ad-shield-picture.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 闲鱼博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
闲鱼博客

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 菊
     @回复

    这个思路可以多放几个广告 比如说 adsense 不显示可以放阿里妈妈。。

    • 懿古今
      懿古今2018-07-10 14:42  回复

      @菊放阿里妈妈的倒是没试过,不过放图片加链接的广告还是不错的

  2. 99八十一
    99八十一 @回复

    咸鱼技术大佬 [赞] 现在没广告,先收藏了。

  3. Ν Ι С Ξ
    Ν Ι С Ξ @回复

    首先得有广告。。。

  4. 无忧岛网
    无忧岛网 @回复

    谷歌广告根本过不了

  5. 支付宝vps
    支付宝vps @回复

    这个方法不错,不然空白一片确实很不好看。

  6. 王光卫博客
    王光卫博客 @回复

    代码先收下了 [呵呵]

  7. 轻羽
    轻羽 @回复

    表示联盟已知没通过过

  8. 米扑博客
    米扑博客 @回复

    赞一个 有钱赚了

  9. 西枫里博客
    西枫里博客 @回复

    天天看你们发和广告有关的内容,我就桑心~

  10. 灵异视界网
    灵异视界网 @回复

    这好悲催!

  11. 明月清风
    明月清风 @回复

    这个可以,这可以留住我们自己的零花钱

  12. 云顶天的世界
    云顶天的世界 @回复

    赚点广告费不容易啊,还要应对各路围剿~~

  13. 券都有
    券都有 @回复

    谢谢大神

  14. 涂红伟
    涂红伟 @回复

    还可以这样防广告屏蔽插件,很强大,学习了。

  15. 大缺缺
    大缺缺 @回复

    有时候显示CSS还是有冲突

  16. 明月登楼
    明月登楼 @回复

    问题是现在的拦截插件扩展连提示图片都给拦截了!

  17. 区块链
    区块链 @回复

    [嘻嘻] 佛系挂广告。你点不点她就在哪里。

  18. 鬼手六
    鬼手六 @回复

    大佬们赚钱真有方法,get..

  19. 薅羊毛
    薅羊毛 @回复

    去你网站试了一下,效果不算好,因为你那个屏蔽图片上面还有百度的字

    反馈意见:
    视觉干扰内容不宜不感兴趣其他原因返回
    感谢您的反馈!
    您的反馈已记录,我们将努力改善您的浏览体验。

    百度已经为您关闭广告!

    • 闲鱼
      闲鱼 作者回复2018-06-28 11:15  回复

      @薅羊毛一般屏蔽都是直接屏蔽了,显示就不会出现你说的这种情况,谁没事会这样去测试

      • 薅羊毛
        薅羊毛2018-06-28 15:40  回复

        @闲鱼不是啊,我没测试啊,是我用屏蔽插件,你那网站自己现实这样情况的。。。。。。。。。。。。。

    • 懿古今
      懿古今2018-06-29 16:48  回复

      @薅羊毛这种情况屏蔽不干净的确实无法点击,这个可点击是针对屏蔽干净的情况

  20. 眼泪的错觉
    眼泪的错觉 @回复

    顿时广告就很多了

  21. 于闻观纸
    于闻观纸 @回复

    借此宝地,出售个百度广告联盟审核通过的域名

  22. 沈唁志
    沈唁志 @回复

    闲鱼大佬666

  23. 里维斯社
    里维斯社 @回复

    赚点小钱被各种障碍阻挠

  24. 闲鱼
    闲鱼 @回复

    赚点小钱不容易,且行且珍惜

  25. 银色月航
    银色月航 @回复

    看来闲鱼生财有道:)