aviso desactivar adblock personalizable desactivar AdBlock con un mensaje de advertencia

Demo en Codepen Ejemplo personalizado

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 pérdidas a los portales que se mantienen gracias a la publicidad.


Una solución al problema es pedirle a los usuarios desactivar AdBlock con un aviso y en ello nos vamos a centrar en este articulo.


Blockadblock.js

Se trata de un proyecto en github escrito en javascript puro que puede detectar eficazmente cualquier extensión anti-anuncios, por tanto, basado en la respuesta de blockadblock.js podemos construir un aviso para los usuarios con tengan una extensión que bloquee anuncios.


Instalar

Para empezar, este complemento usa las animaciones de animate.css, si ya lo tienes instalado en tu blog, puedes saltar este paso, caso contrario incluye el siguiente código en tu proyecto:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>

Ahora solo queda agregar el código css del aviso, en Blogger puedes hacerlo en la sección "Agregar CSS" del personalizador. En wordpress agrega el código al final del archivo style.css:


/*!
 * 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) {{*/
@import 'https://cdn.jsdelivr.net/gh/da2l/host@1/dist/css/wgd-core.min.css';
/*}} Fin del core {{*/

/*! Personalización */
/* Base
-----------------------------------------*/
[id=WgD] {
   font-family: 'Roboto', sans-serif; /* fuente */
   background: #FF416C; /* color de fondo */
   background: linear-gradient(to right, #FF4B2B, #FF416C); /* degradado */
}
.WgD-particles i {
   color: rgba(0, 0, 0, 0.2); /* color de partículas */
}
/* Animación
-----------------------------------------*/
.WgD-container {
   -webkit-animation: bounceIn 1s; /* animación */
           animation: bounceIn 1s; /* animación */
}
/* 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: 1.6em; /* tamaño del título */
}
.WgD-text {
   font-size: 1.2em; /* tamaño del texto */
}
/* Boton Recargar
-----------------------------------------*/
.WgD-reload {
   box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px; /* sombra */
   color: #fff;
   padding: 1em 1.5em; /* relleno */
   background: #f46b45; /* fondo */
   border-radius: 3px; /* bordes redondeados */
}
.WgD-reload:hover {
    color: #fff;
}
.WgD-close:hover {
    color: #464646;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
   max-height: 200px; /* altura máxima */
}

Por último agrega el aviso que se mostrará si tienes la extensión Adblock activa, para ello, en la edición html de tu proyecto, busca </body> y arriba pega el siguiente código:


<div id="WgD">
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>Titulo del aviso</h3>
      <p class='WgD-text'>Escribe tu mensaje</p>
      <a class='WgD-reload' onclick="adBlockReload()" href="#">Recargar página</a>
      <a class='WgD-close' href="#" onclick="adBlockClose()"><i class="wgd-times"></i></a>
    </div>
  </div>
  <div class='WgD-particles'>
    <i class="wgd-usd"></i><i class="wgd-eur"></i><i class="wgd-usd"></i>
    <i class="wgd-eur"></i><i class="wgd-btc"></i><i class="wgd-usd"></i>
    <i class="wgd-usd"></i><i class="wgd-eur"></i><i class="wgd-btc"></i>
    <i class="wgd-usd"></i><i class="wgd-eur"></i>
  </div>
</div>
<script src='https://cdn.jsdelivr.net/gh/da2l/host@1/dist/js/wgd-core.min.js'></script>

Personalizar

Botón cerrar

Por defecto el aviso contiene un botón "cerrar" en la esquina superior derecha, si no quieres que el usuario pueda cerrar el aviso, busca el siguiente código y eliminalo:


<a class='WgD-close' href="#" onclick="adBlockClose()"><i class="wgd-times"></i></a>

Fondo degradado

El degradado de fondo lo he generado gracias a UI Gradients. Si deseas reemplazar el degradado de fondo por otro simplemente selecciona uno nuevo en UI Gradients y reemplazalo en el siguiente código:


[id=WgD] {
   background: linear-gradient(to right, #FF4B2B, #FF416C); /* degradado */
}

Imagen

He agregado estilos si existe la posibilidad de que desees agregar una imagen para destacar el aviso, de esta forma podrás darle tu toque personal. Para ello busca este código:


<div class='WgD-container'>

Debajo del código anterior agrega una etiqueta imagen de esta forma:


<img src="render.png"/>

Reemplaza render.png por la imagen que desees. Guarda los cambios y listo.


Animate.css

Si deseas cambiar la animación ve a la animate.css y copia el nombre de la animación que quieras utilizar, posteriormente cambialo en el siguiente código y guarda los cambios:


/* Animación
-----------------------------------------*/
.WgD-container {
   -webkit-animation: bounceIn 1s; /* animación */
           animation: bounceIn 1s; /* animación */
}

Conclusión

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 déjala en los comentarios.