Anti-bloqueador de "Adblock" para tu blog o pagina web

min Leyre



Hace un tiempo un cliente me pregunto si era posible colocar un anti bloqueador o simplemente un mensaje que bloqueara el contenido del blog al momento de detectar que estaban usando algún tipo de bloqueador de anuncios, estuve indagando un rato y conseguí la posibilidad de colocarlo, este es un articulo de otro blog que ahora mismo no me acuerdo el nombre para los créditos, simplemente que yo re-diseñe el estilo del bloqueador a algo mas atractivo y elegante.


Funcionalidad

Este anti-bloqueador de "Adblock" realmente es un mensaje superpuesto que se activa cuando alguien tenga el bloqueador de anuncios activado, de tal forma que hará que el lector no pueda visualizar el contenido del blog hasta que desactive el bloqueador de anuncios. Obviamente debes tener el "AdBlock" activo para poder ver la demostración, de tal forma si no lo tienes activado no se va a mostrar!.


Instalación

Para ponerlo a funciona simplemente debemos crear un widget en nuestro blog y pegar el siguiente código HTML / JS:


<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<div class="inforblock"><p>Oops!<br/><br/>Hemos detectado que está utilizando Adblock.<br/>Para continuar, deshabilite su bloqueador de anuncios</div>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

<style type="text/css">
/* Estilos CSS del desactivador Ad Block */
#g207{
position:fixed !important;
position:absolute; /* Tipo de posición */
top:0;
top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");
left:0;
width:100%; /* Ancho */
height:100%; /* Alto */
background:rgba(0,0,0,0.89) right center !important; /* Imagen del fondo */
filter:alpha(opacity=90); /* Filtro de la opacidad */
display:block;z-index:9999999;
}
#g207 p{
opacity:1; /* Opacidad */
filter:none;
text-align:center; /* Alineamiento del texto */
text-transform:normal; /* Transformación en mayúsculas */
}
#g207 p a,#g207 p i{
font-size:18px; /* Tamaño de la fuente */
}
#g207 ~ *{
display:none
}
.inforblock{
opacity:1; /* Opacidad */
text-align:center; /* Alineamiento del texto */
margin:5% auto; /* Margen del texto */
padding:1.4rem;
width:30%;
background: rgb(228, 32, 32);
color:#fff;border-radius: 10px;
font-size:1.4rem;
}
/* Fin de los estilos */
</style>

Estilos

De momento solo tenemos ese estilo de ese color, lo mas seguro es que con el tiempo haga nuevo estilos y colores este anti-bloqueador, realmente espero que le saquen provecho aunque personalmente yo no lo usaría pero como fue un pedido decidi compartirlo con ustedes, suerte.


Cualquier dudo o sugerencia comentalo aqui abajo, siempre estoy al tanto de lo que me preguntan.


Comentarios