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

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

发表评论

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

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

    • 姜辰 姜辰 4 来自天朝的朋友 火狐浏览器 Windows 10 新疆伊犁州 电信

      可以的大佬!

      • 今非昔比 今非昔比 1 来自天朝的朋友 QQ浏览器 Windows 10 广东省东莞市 电信

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

        • 从良未遂 从良未遂 1 来自天朝的朋友 Safari浏览器 Mac OS X 10_12_6 江苏省无锡市 电信

          方法不错,收藏留念

          • 一曲长歌辞烟雨 一曲长歌辞烟雨 0 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省绍兴市 电信

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