Desactivar el Adblock para tener más ingresos con el Blog

Muestra un mensaje para desactivar el Adblock en tu blog de Blogger y WordPress. Las ventajas y desventajas al implementarlo y cómo personalizarlo.

¡Hola! soy Gabriela de peengler.com. Quiero explicarte como añadir un aviso para los lectores o visitantes que usen un bloqueador de publicidad. Aunque suene lindo aplicar este método tiene su desventaja.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Qué es Adblock?

AdBlock es una extensión de bloqueo de publicidad disponible para múltiples plataformas ya sea, Mozilla Firefox, Google Chrome u Opera y funciona para todos los dispositivos.

Características:

• Bloquea anuncios molestos: banner, ventanas emergentes, videos publicitarios precargados.
• Bloquea las cookies publicitarias de terceros.
• Le advierte en caso de malware y adware.

¿Debería mostrar un aviso para desactivar el Adblock en mi blog?

Antes de ver los dos lados de la moneda, primero hay que pensar el ¿Por qué los usuarios usan esta extensión? Lo que sucede es que muchas personas que tienen un blog no solo muestran 2 o 3 anuncios sino muchos anuncios, en pocas palabras saturan al visitante dando como consecuencia que usen la extensión AdBlock.

Si tus lectores usan un bloqueador de anuncios lo más seguro es que no ganes dinero con sus visitas, lo cual es un punto negativo para los creadores de contenido como tú y yo que queremos obtener ganancias con nuestro blog, por supuesto nos desmotiva cuando vemos muchas visitas y pocos ingresos.

Es por eso que quiero compartir contigo esta solución, y es mostrar un mensaje para desactivar el Adblock. Ten en cuenta que si muestras este mensaje puedes tener los siguientes resultados:

• Aunque obligues a desactivarlo, no harán clic en los anuncios.
• Si tus visitantes no desactivan el Adblock lo más seguro es que se retirarán de tu blog.
• Aumento del rebote en tu blog.
• Quizás tengas menos visitas.

Si ya sé que hay más cosas negativas que positivas. Pero si aun así quieres intentarlo y ver cómo te va en tu blog ¡Actívalo! Y si obtienes resultados negativos, no venga a quejarse porque te lo advertí.

¿Cómo Activar el Anti-Adblock en el blog?

Necesitaras copiar el siguiente código en tu blog para que se muestre el anuncio antes de </body>

<div id="WgD">
 <div class='WgD-position'>
 <div class='WgD-container'>
 <img src="https://4.bp.blogspot.com/-xogoB0VRm10/VaqbgGEBQ7I/AAAAAAAAAmY/qa2eimRsIbs/s640/52338.png" width="45%" />
 <h3 class='WgD-title'>Adblock Detectado</h3>
 <p class='WgD-text'>Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!</p>
 <a class='WgD-reload' onclick="adBlockReload()" href="#">¡Ya Desactive el Adblock!</a>
 </div>
 </div>
</div>

Antes de </body> copia lo siguiente, si quieres lo pegas arriba del anterior código:

<script>//<![CDATA[
function adBlockReload(){return window.location.reload(),!1}
function adBlockClose(){document.getElementById("WgD").classList.remove("is-detected"),document.body.classList.remove("ab-is-detected")}
function adBlockDetected(){document.getElementById("WgD").classList.add("is-detected"),document.body.classList.add("ab-is-detected")}
if("undefined"!=typeof fuckAdBlock||"undefined"!=typeof FuckAdBlock)adBlockDetected();else{var importFAB=document.createElement("script");importFAB.onload=function(){fuckAdBlock.onDetected(adBlockDetected),fuckAdBlock.onNotDetected(adBlockNotDetected)},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 ultimo, copia el siguiente CSS/Estilos antes de esta línea ]]></b:skin> (Si usas Blogger)

/*!
 * Anti-adblock v2.1.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
body.ab-is-detected{overflow:hidden!important}@font-face{font-family:wgd;src:url(https://cdn.jsdelivr.net/gh/da2l/host@1/dist/fonts/wgd.woff) format("woff");font-weight:400;font-style:normal}[class*=" wgd-"]:before,[class^=wgd-]:before{font-family:wgd!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wgd-usd:before{content:"\61"}.wgd-eur:before{content:"\62"}.wgd-btc:before{content:"\63"}.wgd-times:before{content:"\64"}@-webkit-keyframes square{0%{-webkit-transform:translateY(0) scale(1.5) rotate(0);transform:translateY(0) scale(1.5) rotate(0);opacity:1}100%{-webkit-transform:translateY(-600px) scale(1) rotate(-200deg);transform:translateY(-600px) scale(1) rotate(-200deg);opacity:0}}@keyframes square{0%{-webkit-transform:translateY(0) scale(1.5) rotate(0);transform:translateY(0) scale(1.5) rotate(0);opacity:1}100%{-webkit-transform:translateY(-600px) scale(1) rotate(-200deg);transform:translateY(-600px) scale(1) rotate(-200deg);opacity:0}}.WgD-particles i{font-size:4em;font-weight:400;position:absolute;bottom:-100px;-webkit-animation:square 10s infinite;animation:square 10s infinite;-webkit-animation-duration:16s;animation-duration:16s}.WgD-particles i:nth-child(11),.WgD-particles i:nth-child(4),.WgD-particles i:nth-child(6),.WgD-particles i:nth-child(8){font-size:3em}.WgD-particles i:nth-child(10),.WgD-particles i:nth-child(2),.WgD-particles i:nth-child(3){font-size:2em}.WgD-particles i:nth-child(1){left:15%}.WgD-particles i:nth-child(2){left:24%;-webkit-animation-duration:8s;animation-duration:8s}.WgD-particles i:nth-child(3){left:50%;-webkit-animation-delay:5s;animation-delay:5s}.WgD-particles i:nth-child(4){left:40%;-webkit-animation-delay:7s;animation-delay:7s;-webkit-animation-duration:15s;animation-duration:15s}.WgD-particles i:nth-child(5){left:36%;-webkit-animation-delay:6s;animation-delay:6s}.WgD-particles i:nth-child(6){left:44%;-webkit-animation-delay:10s;animation-delay:10s;-webkit-animation-duration:20s;animation-duration:20s}.WgD-particles i:nth-child(7){left:58%;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:18s;animation-duration:18s}.WgD-particles i:nth-child(8){left:45%;-webkit-animation-duration:14s;animation-duration:14s}.WgD-particles i:nth-child(9){left:66%;-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-duration:12s;animation-duration:12s}.WgD-particles i:nth-child(10){left:74%;-webkit-animation-duration:25s;animation-duration:25s}.WgD-particles i:nth-child(11){left:80%;-webkit-animation-delay:4s;animation-delay:4s}#WgD{display:none;position:fixed;top:0;left:0;right:0;bottom:0;font-size:14px;-webkit-animation:wgdfade .3s;animation:wgdfade .3s;z-index:99999}#WgD.is-detected{display:block}@-webkit-keyframes wgdfade{from{opacity:0}to{opacity:1}}@keyframes wgdfade{from{opacity:0}to{opacity:1}}.WgD-position{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:900}.WgD-title{margin:0 0 .5em}.WgD-text{margin:0;font-weight:400}.WgD-reload{text-decoration:none;display:inline-block;margin-top:2em;font-weight:500;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.WgD-reload:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.WgD-close{position:absolute;top:0;right:0;text-decoration:none;font-size:20px;color:#999;padding:1rem;line-height:1;display:block}.WgD-container img{max-width:100%;margin-bottom:1em;-o-object-fit:cover;object-fit:cover}
/*}} Fin del core {{*/

/*! Personalización */
/* Base
-----------------------------------------*/
[id=WgD] {
   font-family: 'Roboto', sans-serif; /* fuente */
   background: #000; /* color de fondo */
   background-image: linear-gradient(0deg, #000000 0%, #5f5f5f 100%); /* degradado */
}
/* Cuerpo
-----------------------------------------*/
.WgD-container {
   padding: 3.2em; /* relleno */
   max-width: 450px; /* ancho */
   background-color: #fff; /* color de fondo */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); /* sombra */
   text-align: center; /* alineación del texto */
   line-height: 1.5; /* interlineado */
   border-radius: 10px; /* bordes redondeados */
   color: #37474F; /* color del texto */
}
.WgD-title {
   font-size: 25px; /* tamaño del título */
}
.WgD-text {
   font-size: 20px; /* tamaño del texto */
}
/* Boton Recargar
-----------------------------------------*/
.WgD-reload {
    color: #fff; /* color del texto */
    padding: 15px; /* relleno */
    background: #000000; /* color del fondo */
    font-weight: 700; /* grosor del texto */
    font-size: 18px; /* tamaño del texto */
    border-radius: 6px; /* bordes redondeados */
    letter-spacing: 1px; /* espacio entre letra */
}
.WgD-reload:active, .WgD-reload:link, .WgD-reload:visited {
    color: #fff;
}
.WgD-reload:hover{
   color: #ddd;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
   max-height: 200px; /* altura máxima */
}

@media (max-width: 980px){
.WgD-position {
    width: 80%;
}
}

Guardas los cambios y listo. 😊

Personalizar el aviso para desactivar el Adblock

Lo bueno de este Anti-Adblock es que lo puedes modificar a tu gusto, el color de fondo y del botón, cambiar el tamaño del texto y mucho más.

Cambiar el color de fondo

Busca en los estilos [id=WgD] como puedes ver hay 2 fondos:

1. background: #000;
2. background-image: linear-gradient(0deg, #000000 0%, #5f5f5f 100%);

El primero es 1 solo color y el segundo es un degradado.

• Elegir 1 color de fondo: html-color-codes
• Añadir un degradado de fondo: webgradients o uigradients

Cambiar el tamaño del título y del párrafo

Para el título busca esta línea: .WgD-title y cambia los pixeles del font-size: 25px;

En el párrafo busca .WgD-text y cambias la medida del font-size: 20px;

Modificar Botón Recargar

En la siguiente línea .WgD-reload encontraras todo sobre el botón:

• Cambiar el color de texto: color: #fff;
• Color de fondo: background: #000000;
• Tamaño del texto: font-size: 18px;

En conclusión

Obligar a desactivar el Adblock en Blogger u otros sitios puede ser una solución, aunque como dije antes puedes tener resultados negativos si lo usas. Personalmente no lo uso, no es que les preste mucha atención a los rebotes de mi página, pero tampoco quiero dar una mala experiencia a mis visitantes.

La idea es que vuelvan, no que me tengan en su lista negra.

PD: Agradecida con Daniel por este código maravilloso que nos comparte 😀

Si tienes alguna duda o pregunta, déjamelo en los comentarios.