很多网站都会添加百度联盟、谷歌广告联盟、阿里妈妈联盟之类的广告,但是现在广告屏蔽实在是太腻害了。一旦广告被屏蔽直接就没了,有的在侧栏添加的广告屏蔽后还显示个空白框框在那,很不好看。其实我们可以设置广告屏蔽后显示图片提示的效果,这样也就避免了广告屏蔽后的尴尬。甚至我们可以设置成联盟广告被屏蔽后显示其他可点击的图片广告,这样也能挽回一部分联盟广告被屏蔽的损失。方法很简单,添加一点代码就解决了。
效果对比
代码部署
1、默认的普通广告代码
我们一般常用的联盟广告代码都是这样的(以百度联盟为例):
- <script type=“text/javascript”>
- var cpro_id = “xxxxxxx”;
- </script>
- <script src=“http://cpro.baidustatic.com/cpro/ui/c.js” type=“text/javascript”></script>
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”>
- var cpro_id = “xxxxxxx”;
- </script>
- <script src=“http://cpro.baidustatic.com/cpro/ui/c.js” type=“text/javascript”></script>
- </div>
从两者的不同可以看出就是给广告代码加一个 DIV 和背景图,再注意下调整一下 css 样式就可以实现联盟广告被屏蔽后显示其他图片提示的效果了。
3、广告被屏蔽后显示其他可点击的图片提示广告代码
通过上面的方法我们已经可以达到广告被屏蔽后显示其他图片提示的效果,但是提示的图片是不可以点击的,只是个摆设效果而已。如果也能支持点击图片实现跳转就好了,这样我们就可以设置为其他的图片广告,挽回部分损失。其实实现起来也很简单,只需要在 DIV 外部添加一个 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 标签中的链接改为显示的图片所对应的推广链接就可以达到联盟广告被屏蔽后显示可点击的图片提示效果。
小结
以上举例说明代码中的 DIV 层的样式只是举例说明,如果大家想要实现这种广告被屏蔽后显示其他可点击的图片效果,建议根据自己的博客网站进行调整背景图和样式。代码中的 CSS 代码也是可以添加到当前主题的 style.css 文件中的,具体就看个人喜好了。