Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Aviso anti-adblock personalizable

 

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 para reducir el número de bloqueadores de anuncios activos en nuestra página 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 vanilla js que puede detectar rapida y eficazmente la presencia de cualquier extensión anti-anuncios.

Basado en la respuesta de blockadblock.js he construido un aviso elegante que les pedirá a tus usuarios desactivar adblock o cualquier extensión que bloquee los anuncios.

Instalar

Vamos a ir a Blogger  Temas  Personalizar  Opciones avanzadas  Agregar CSS. Aquí pegaremos el siguiente código:

/*!
 * 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)
 */@font-face{font-family:wgd;src:url(data:application/font-woff;charset=utf-8;base64,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) 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}body.ab-is-detected{overflow:hidden!important}#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}

/*
=> Personalizacion
*/

/* Base
-----------------------------------------*/
#WgD {
   font-family: 'Roboto', sans-serif; /*fuente*/
   background: #FF416C; /*fondo por defecto */
   background: linear-gradient(to right, #FF4B2B, #FF416C);/*degradado*/
}
.WgD-particles i {
   color: rgba(0, 0, 0, 0.2); /*color particulas*/
}

/* Animacion (daneden.github.io/animate.css/)
-----------------------------------------*/
.WgD-container {
   -webkit-animation: bounceIn 1s;
           animation: bounceIn 1s; /*nombre y duracion*/
}

/* Cuerpo
-----------------------------------------*/
.WgD-container {
   padding: 3.2em; /*naruto(relleno)*/
   max-width: 450px; /*ancho maximo*/
   background-color: #fff; /*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; /*aliniacion del texto*/
   line-height: 1.5; /*interlineado*/
   border-radius: 10px; /*bordes redondeados*/
   color: #37474F;
}
.WgD-title {
   font-size: 1.6em; /*tamaño fuente*/
}
.WgD-text {
   font-size: 1.2em; /*tamaño fuente*/
}

/* Boton Recargar
-----------------------------------------*/
.WgD-reload {
   box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px; /*sombra*/
   color: #fff;
   padding: 1em 1.5em; /*naruto(relleno)*/
   background: #f46b45; /*fondo*/
   border-radius: 3px; /*bordes redondeados*/
}

/* Imagen
-----------------------------------------*/
.WgD-container img {
   max-height: 200px; /*altura maxima*/
}

Por último, ve a Temas  Editar HTML y busca </body>, arriba de eso pega el siguiente código:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
<div id="WgD">
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>Adblock Detectado</h3>
      <p class='WgD-text'>Nuestro sitio se mantiene gracias a la publicidad, por favor <strong>Desactiva Adblock</strong> para seguir navegando</p>
      <a class='WgD-reload' href="#url">He desactivado Adblock</a>
      <a class='WgD-close' href="#close" 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>//<![CDATA[
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>

Guarda los cambios y listo, si tienes la extensión Adblock activada en tu web, notaras que desde ahora aparecerá un aviso que ocultara todo el contenido.

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, en ese caso busca el siguiente código:

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

Y procede a eliminarlo.

Modificar estilos

En todos mis aportes similares, siempre dejo el código css obligatorio comprimido, y el que corresponde a los estilos se encuentra comentado, simplemente edita el código css comentado según tus gustos.

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:

#WgD {
   font-family: 'Roboto', sans-serif; /*fuente*/
   background: #FF416C; /*fondo por defecto */
   background: linear-gradient(to right, #FF4B2B, #FF416C);/*degradado*/
}

Imagen PNG

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:

<h3 class='WgD-title'>Adblock Detectado</h3>

Arriba de eso agrega una etiqueta imagen de la siguiente manera:

<img src="render.png/">

Evidentemente reemplaza render.png por la imagen con fondo transparente que desees. Guarda los cambios y listo.

Animate.css

He integrado el aviso con Animate.css, por lo que lo único que necesitas hacer es ir a la página en github y copiar el nombre de la animación que quieras utilizar. Posteriormente cambialo en el siguiente código:

.WgD-container {
   -webkit-animation: bounceIn 1s;
           animation: bounceIn 1s; /*nombre y duracion*/
}

Guarda los cambios y listo. Si personalizas el aviso correctamente, podrás darle un estilo más acorde al de tu blog y harás que no se sienta intrusivo. Aqui te dejo un ejemplo de personalización para darte ideas:

 Ejemplo de personalización en Codepen 

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 dejala en los comentarios.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas