网站部署js代码提醒用户关闭广告屏蔽插件

  • A+
所属分类:html

其实,我一直在关注着网站屏蔽广告的方式,也一直找不到好的方式,我自己也是总结了一下自己的网站,基本上网站的收益都会少1/4。其实这倒是没什么问题,但是我们能争取的就争取。我也在群里看到一个朋友分享这个教程,我自己也拿来分享一下。

第一步:在网站根目录新建一个 js文件,重命名为 adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js,里面的内容如下:

  1. var adskilltest=true;

第二步:在你的底部文件 footer.php 中 </body> 前,插入如下代码。

  1. <script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
  2. <style type="text/css">
  3. .addkillcont{position: fixed;width: 100%;height: 2000px;z-index: 999999;top: 0px;background: #CCC;
  4. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);background-color: rgba(10399990.59);}
  5. .addesc{position: relative;width: 360px;height: 200px;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
  6. </style>
  7. <script type='text/javascript'>
  8.     $(document).ready(function(){
  9.         setTimeout(function(){new QXAdTest().init();},1);
  10.     });
  11. function QXAdTest(){
  12.     var thisObj = this;
  13.     //初始化,判断变量是否存在
  14.     this.init = function(){
  15.         try{
  16.             if(typeof(adskilltest)=='undefined' ){
  17.                 this.DoShow();
  18.                 $('.idcloseadtips').on("click",function(){
  19.                     $("#idadkillsho").remove();
  20.                 });
  21.             }
  22.         }catch(e){
  23.             $("#idadkillsho").remove();
  24.         }
  25.     };
  26.     this.DoShow =function(){
  27.         try{
  28.             var TPL='<div id="idadkillsho" class="addkillcont">' +
  29.                     '<div class="addesc" id="addesc" style="display:none;">' +
  30.                     '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
  31.                     '<div style="padding-top:10px;color:#000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网站运营需要成本,收看、点击赞助商广告,我们将做的更好!</div>'+
  32.                     '<div style="text-align:center;color:gray;">8秒后自动关闭...</div>'+
  33.                     '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer">点此关闭</span>'+
  34.                     '</div>' +
  35.                   '</div>';
  36.             var TPLObj = $(TPL);
  37.             TPLObj.appendTo($('BODY')).hide().fadeIn(500,function(){
  38.                     $("#addesc").animate({"margin-top":"150px"},600);
  39.                     $("#addesc").slideDown(500,function(){
  40.                         $("#addesc").animate({"height":"120px"},600);
  41.                     }
  42.                 );
  43.                 //3秒移除
  44.                 thisObj.DelayRemove();
  45.             });
  46.         }catch(e){
  47.             $("#idadkillsho").remove();//一定移除
  48.         }
  49.     }
  50.     this.DelayRemove = function(){
  51.         setTimeout(function(){
  52.             $("#addesc").fadeOut(600,function(){
  53.                 $("#idadkillsho").remove();
  54.             });
  55.         },10000);
  56.     }
  57. }
  58. </script>

效果如下,即使没有屏蔽广告的用户看了也会不太舒服。

网站部署js代码提醒用户关闭广告屏蔽插件

当然还有其他的变通方法,能起到提示用户将你的网站添加到屏蔽广告的插件的白名单里。

  1. <script src="/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
  2. <style type="text/css">
  3. .addkillcont{position: fixed;z-index: 999999;bottom: 0px;background: #CCC;width:100%;
  4. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#00000000);}
  5. .addesc{position: relative;margin-left: auto;margin-right: auto;background: #FFF;border: 1px solid #CCC;webkit-box-shadow: 0 0 20px rgba(27,22,22,0.3);-moz-box-shadow: 0 0 20px rgba(27,22,22,0.3);-o-box-shadow: 0 0 20px rgba(27,22,22,0.3);box-shadow: 0 0 20px rgba(27,22,22,0.3);padding: 10px;margin-top: 10px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
  6. </style>
  7. <script type='text/javascript'>
  8.     $(document).ready(function(){
  9.         setTimeout(function(){new QXAdTest().init();},1);
  10.     });
  11. function QXAdTest(){
  12.     var thisObj = this;
  13.     //初始化,判断变量是否存在
  14.     this.init = function(){
  15.         try{
  16.             if(typeof(adskilltest)=='undefined' ){
  17.                 this.DoShow();
  18.                 $('.idcloseadtips').on("click",function(){
  19.                     $("#idadkillsho").remove();
  20.                 });
  21.             }
  22.         }catch(e){
  23.             $("#idadkillsho").remove();
  24.         }
  25.     };
  26.     this.DoShow =function(){
  27.         try{
  28.             var TPL='<div id="idadkillsho" class="addkillcont">' +
  29.                     '<div class="addesc" id="addesc" style="display:none;">' +
  30.                     '<div style="color:red;font-weight:bold; text-align:center;">屏蔽广告虽易,做网站不易,且屏蔽且珍惜...</div>'+
  31.                     '<span class="idcloseadtips" style="position:absolute;right:10px;bottom:10px;font-weight:bold;color:gray;cursor:pointer"><i class="fa fa-times-circle"></i></span>'+
  32.                     '</div>' +
  33.                   '</div>';
  34.             var TPLObj = $(TPL);
  35.             TPLObj.appendTo($('header')).hide().fadeIn(500,function(){
  36.                     $("#addesc").animate({"margin-top":"0"},600);
  37.                     $("#addesc").slideDown(500,function(){
  38.                         $("#addesc").animate({"height":"40px"},600);
  39.                     }
  40.                 );
  41.             });
  42.         }catch(e){
  43.             $("#idadkillsho").remove();//一定移除
  44.         }
  45.     }
  46. }
  47. </script>

效果如下:

网站部署js代码提醒用户关闭广告屏蔽插件

自己测试一下效果吧,后续的文章会有介绍的。

 

发表评论

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