网站广告被屏蔽后,显示图片提示效果

很多网站都会添加百度,阿里妈妈这类广告,但是现在广告屏蔽太腻害了。一旦广告被屏蔽直接就没了,有的在侧栏添加的广告屏蔽后还显示个空白框框在那,很不好看。看到有的网站就给广告屏蔽后添加了图片提示的效果,这样也就避免了广告屏蔽后的尴尬。方法很简单,一点代码就解决了。 :idea:

效果对比

网站广告被屏蔽后,显示图片提示效果

代码部署

普通广告代码

我们一般常用的广告代码都是这样的:

  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>  

添加图片提示的广告代码

  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;"><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>  
  5. </div>  

从两者的不同可以看出就是给广告代码加一个DIV,加一个背景图,再注意下css样式就可以有屏蔽后图片提示效果了。

添加图片提示可点击的广告代码

通过上面的方法我们是可以达到屏蔽后图片提示效果,但是提示的图片是不可以点击的,只是个摆设效果而已,如果也能支持广告跳转就好了,其实也很简单,加一个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;"><script type="text/javascript">  
  3.     var cpro_id = "xxxxxx";  
  4. </script>  
  5. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>  
  6. </div>  
  7. </a>  

可以将a标签中的链接改为推广链接就可以达到屏蔽后的图片提示点击有广告效果。 :grin:

本文最后更新于2017年11月22日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  4   博主  0

    • avatar 姜辰

      可以的大佬!

      • avatar 今非昔比

        同鸟哥主题 没有添加代码屏蔽广告时显示一条白线 添加代码后屏蔽广告显示一个白框 没效果呀 我是纯图片加链接 不是广告都给我屏蔽了

        • avatar 从良未遂

          方法不错,收藏留念

          • avatar 一曲长歌辞烟雨

            虽然我没有广告,但还是有所受用,O(∩_∩)O谢谢~