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

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

普通广告代码

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

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

添加图片提示的广告代码

<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">
var cpro_id = "xxxxxxx";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>

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

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

通过上面的方法我们是可以达到屏蔽后图片提示效果,但是提示的图片是不可以点击的,只是个摆设效果而已,如果也能支持广告跳转就好了,其实也很简单,加一个a标签就好了。

<a href="http://www.macrr.com/?" target="_blank">
<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">
var cpro_id = "xxxxxx";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
</a>

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

本文链接:https://niujc.com/com/1440889.html

栏目:建站教程
来源:
标签:js 代码
时间:2022-07-10

晚上好!当前时间为
目前距离2023年春节还有
TOP