Aviso anti adblock personalizable

aviso desactivar adblock personalizable desactivar AdBlock con un mensaje de advertencia

Demostración

Casi la totalidad de páginas o blogs generan ingresos mediante publicidad, pero existen un sin número de bloqueadores de anuncios, con el fin de hacer la experiencia de quien navega por la red más agradable, pero causando perdidas a las webs que se mantienen de esto.


Podemos reducir el número de bloqueadores de anuncios activos en nuestra página si pedimos a los usuarios desactivar AdBlock con un mensaje de advertencia, así que en eso nos vamos a centrar en este aporte.


Blockadblock.js

Se trata de un pequeño proyecto en github escrito en vanilla js que puede detectar rapida y eficazmente la presencia de cualquier extensión anti-anuncios, no tiene ninguna dependencia y es compatible incluso con IE8 aunque ya está muerto.


Ya que tenemos nuestro confiable y veloz detector, lo único que nos queda por hacer es mostrar un aviso para desactivar adblock basado en la respuesta de blockadblock.js.


Instalar

Este tutorial sirve para cualquier plataforma, simplemente voy a usar como ejemplo Blogger, asi que vamos a ir a Temas, presionamos el botón "Editar HTML", buscamos ]]></b:skin> y arriba de eso pegamos lo siguiente:


/*!
* Style: Anti-Adblock
* by zkreations
*/@-webkit-keyframes bounce{0%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}@keyframes bounce{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}.adblockInfo{width:100%;height:100%;position:fixed;top:0;left:0;z-index:900;display:none}.adblockInfo.is-active{display:block}.adblockInfo__container{top:calc(50% - 130px);left:calc(50% - 250px);max-width:500px;max-height:90%;font-size:16px;text-align:center;box-shadow:0 6px 5px -5px rgba(0,0,0,.5);-webkit-animation:bounce 1s;animation:bounce 1s}.adblockInfo__container,.adblockInfo__title{position:relative;z-index:10}.adblockInfo__title{padding:1em 2em;font-size:1.2em;margin:0}.adblockInfo__text{padding:2em;font-weight:500;font-size:1em;margin:0}.adblockInfo__cover{background-repeat:repeat;background-size:cover;background-position:center;height:5em;position:relative}@-webkit-keyframes rubberBand{100%,24%,from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}4%{-webkit-transform:scale3d(1.25,.8,1);transform:scale3d(1.25,.8,1)}8%{-webkit-transform:scale3d(.75,1.2,1);transform:scale3d(.75,1.2,1)}12%{-webkit-transform:scale3d(1.15,.9,1);transform:scale3d(1.15,.9,1)}16%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}20%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{100%,24%,from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}4%{-webkit-transform:scale3d(1.25,.8,1);transform:scale3d(1.25,.8,1)}8%{-webkit-transform:scale3d(.75,1.2,1);transform:scale3d(.75,1.2,1)}12%{-webkit-transform:scale3d(1.15,.9,1);transform:scale3d(1.15,.9,1)}16%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}20%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.adblockInfo__cover__img{position:absolute;left:2em;bottom:-15px;-webkit-animation:rubberBand 3s infinite;animation:rubberBand 3s infinite;-webkit-transform-origin:bottom;transform-origin:bottom}.adblockInfo__close{background:rgba(0,0,0,.2);border:0;outline:0;font-family:monospace;font-size:1.3em;color:#fff;position:absolute;top:0;right:0;cursor:pointer;padding:0 1em;bottom:0;-webkit-transition:background .3s;transition:background .3s}.adblockInfo__close:hover{background:rgba(0,0,0,.4)}@media (max-width:500px){.adblockInfo__container{left:0;right:0;width:100%}}
/*Personalizar*/
.adblockInfo {
    background: rgba(0, 0, 0, 0.95); /*Fondo del modal*/
}
.adblockInfo__title,
.adblockInfo__container {
    background: #fff; /*Fondo de la tarjeta*/
}
.adblockInfo__cover {
    background-image: url(https://i.imgur.com/Xlbl65e.png); /*imagen para el cover*/
    background-color: #582d2a; /*Color de fondo del cover*/
}
.adblockInfo__title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);/*borde del titulo*/
    color: rgba(0, 0, 0, 0.75); /*color del titulo*/
}
.adblockInfo__text {
    color: rgba(0, 0, 0, 0.5); /*color del texto*/
}


Ahora busca </body> y arriba de eso pega el siguiente código:


<script>//<![CDATA[
//!Add/Remove Classes with Raw Javascript: jaketrent.com/post/addremove-classes-raw-javascript/ | modal anti-adblock by zkreations
function adBlockDetected(){function e(e,c){return e.classList?e.classList.contains(c):!!e.className.match(new RegExp("(\\s|^)"+c+"(\\s|$)"))}function c(c,t){c.classList?c.classList.add(t):e(c,t)||(c.className+=" "+t)}function t(c,t){if(c.classList)c.classList.remove(t);else if(e(c,t)){var o=new RegExp("(\\s|^)"+t+"(\\s|$)");c.className=c.className.replace(o," ")}}var o=document.querySelector(".adblockInfo"),s=document.querySelector(".adblockInfo__close");c(o,"is-active"),s.onclick=function(){t(o,"is-active")}}if("undefined"!=typeof fuckAdBlock||"undefined"!=typeof FuckAdBlock)adBlockDetected();else{var importFAB=document.createElement("script");importFAB.onload=function(){fuckAdBlock.onDetected(adBlockDetected)},importFAB.onerror=function(){adBlockDetected()},importFAB.integrity="sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=",importFAB.crossOrigin="anonymous",importFAB.src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js",document.head.appendChild(importFAB)}
//]]></script>

Por último busca <body> y debajo de eso pega el siguiente código html:


<div class='adblockInfo'>
   <div class='adblockInfo__container'>
      <div class='adblockInfo__cover'>
         <img class='adblockInfo__cover__img' src='https://i.imgur.com/TNzSb5g.png'/><!-- ABP-kun -->
         <button class='adblockInfo__close'>x</button><!-- Si no quieres la opcion "cerrar", elimina este botón -->
      </div>
      <h3 class='adblockInfo__title'>Adblock Detectado</h3>
      <p class='adblockInfo__text'>Este sitio se mantiene gracias a la publicidad, desactiva Adblock para ayudarnos :(</p>
   </div>
</div>

Guarda los cambios y listo, si tienes la extencion Adblock activada en tu web, notaras que desde ahora aparecerá un aviso en forma de ventana modal.


Personalizar

Modificar ABP-kun - Reemplaza o elimina la imagen del código html, Si decides reemplazar la imagen, recomiendo que sea de un tamaño no superior a 120px de alto y 400px de ancho:


<img class='adblockInfo__cover__img' src='https://i.imgur.com/TNzSb5g.png'/><!-- ABP-kun -->

Modificar CSS - El código css contiene comentarios para entender que modifica cada cosa, por ejemplo si quisiera reemplazar la imagen de fondo del cover, este sería el código a modificar:


.adblockInfo__cover {
    background-image: url(https://i.imgur.com/Xlbl65e.png); /*imagen para el cover*/
    background-color: #582d2a; /*Color de fondo del cover*/
}

La imagen puede tener cualquier tamaño y formato, incluso puedes usar gif si asi lo deseas:




Botón cerrar - Si no deseas darle las posibilidad al usuario de cerrar la ventana modal, elimina el siguiente boton del código html:


<button class='adblockInfo__close'>x</button><!-- Si no quieres la opcion "cerrar", elimina este botón -->

Aunque yo no recomendaría hacer esto porque aumenta la probabilidad de perder usuarios activos, así que esa decision correra bajo tu propio riesgo.


Si te ha servido este aporte no olvides compartir, ayudaras a mas personas y me ayudaria mucho tambien, por supuesto también lo agradecere mucho. Cualquier duda dejala en los comentarios.