Anuncio

¡Más tráfico! ✅: Como colocar un Anti-Bloqueador de anuncios en Blogger ⛔

¡Más tráfico! ✅: Como colocar un Anti-Bloqueador de anuncios en Blogger ⛔

0

Anti-Adblock para Blogger gratis



Tal vez en tu página tengas 1000 visitas al día, pero finalmente, Google Adsense te indica que solo ha mostrado anuncios a 400 personas. ¿Que pasa? ¿Es algún tipo de efecto sobrenatural? ¿Los aliens me están atacando? Nada de eso, si no que sea probablemente porque tus visitantes tengan habilitado la opción de bloquear anuncios en sitios webs.

¡Pero no te preocupes! Para estamos aquí. El día de hoy te ayudaremos a colocar un antibloqueador de anuncios en Blogger totalmente gratis, para que todo el tráfico que generes en tu blog sea vistosa de todo tu contenido y tu nicho sea mucho mas rentable




Videotutorial




¿Como funciona el Anti-Adblock?

El Anti-Adblock crea un evento javascript en el cuál simula que es una publicidad. El bloqueador, al bloquear el evento, el script se da cuenta de que estás oprimiendo la demás publicidad del sitio. El evento javascript (o en su caso, el aviso) se desactiva cuando no hay nada que impida la carga de todos los eventos del anuncio.

Puede que el script sea mucho más complejo, aún así trato de explicarlo con palabras entendibles y para que tengas la seguridad de que tu sitio web no está siendo infestado de algún malware, al contrario, lo estás mejorando.


Instalar el Script

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 debajo de la sección <head> de tu blog: 

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


Ahora solo queda el código CSS para personalizar las notificaciones del Anti-Block. En Blogger, puedes hacerlo en la sección "Agregar CSS" del personalizador. En Blogger, agregue el código antes de </b:skin> 

/*!
 * 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: #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 ultimo, se agregará el código que se ejecutará cuando alguien ingrese a tu sitio web. Asegura de agregarlo en tu codigo HTML antes de la sección </body> para no tener ningún tipo de error 

<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>//<![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>

Personalizar tu Anti-Adblock

Los cambios necesarios

¡Ya tenemos listo el código! Lo unico que nos hace falta es personalizar tu código. Como puedes ver anteriormente, el código resalta las palabras "Titulo del aviso" "Escribe tu mensaje" y "Recargar página" los cuáles tendrás que reemplazar por lo que quieras que diría tu sitio web.

Colocar colocar un anti bloqueador de anuncios en blogger


Agregar una imágen

Si lo que queremos es agregar una imágen, deberemos buscar el código <div class='WgD-container'> y debajo de el colocar el siguiente:

<img src="render.png"/>

En donde indica "render.png" colocarás la URL de alguna imágen que tengas. Te recomiendo subir tu imagen a Imgur.com y colocar la URL aquí

Como puedes darte cuenta en la imágen anterior, yo coloqué ilustración sin fondo, puedes agregar cualquiera, siempre y cuando no infrinjas derecho de autor


Personalizar el código CSS

Si el color de fondo se nos hace un poco incomodo, podemos optar por eliminarlo o simplemente cambiarlo. Buscaremos en nuestro codigo HTML la etiqueta [id=WgD] y procederemos a ver todas las modificaciones que se pueden hacer 

[id=WgD] {
   font-family: 'Roboto', sans-serif; /* fuente */
   background: #FF416C; /* color de fondo */
   background: linear-gradient(to right, #FF4B2B, #FF416C); /* degradado */

¡Hay muchas mas modificaciones que se pueden realizar en el CSS, si eres experto con el código, no me cabrá duda de que harás una personalización única!

Quitar el botón de "cerrar anuncio"

Por defecto incluye un botón en el cuál la gente puede quitar el anuncio y así seguir usando su bloqueador sin problema, pero ya siendo avisados de antemano que tu página necesita el bloqueador desactivado.
Si lo que queremos es eliminar ese botón, buscaremos el siguiente código en tu HTML y eliminarlo 

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


¿El Anti-Bloqueador funciona?

Lo he probado con los tres bloqueadores de anuncio mas famosos del mercado de Google Chrome y el bloqueador predeterminado de Opera GX y en todas las ocasiones me ha notificado el mensaje de desactivar mi bloqueador de anuncio.

Además, el tráfico de adsense ha subido, ya que las personas orgánicas han visto la publicidad, contrario de bloquearla


Conclusión

Mi conclusión es que esto es una herramienta imprescindible en un mundo en el cuál una gran parte de usuarios opta por colocar un bloqueador de anuncios ignorando la condición de sitios que viven de la misma.

Te recomiendo ampliamente personalizar el código para darle tu toque. Usar una paleta de colores, una imágen y un texto que identifique al usuario ayudarán a que la gente se sienta cómoda con tu aviso y no hostigada.

Te recomiendo que le heches un vistazo a este artículo. Como optimizar tu blog y tus imágenes: 2 secretos que nunca olvidarás!




Tal vez te interesen estas entradas

No hay comentarios

Anuncio