(Tutorial Mejorado) Colocar Anti Adblock en Blogger (Pop - up) para tus visitas, simple y elegante

nuevo anti adblock blogger

Hola a todos, hace un par de días había publicado un código javascript para bloquear al adblock que viene en los navegadores como  chrome o mozilla.

Básicamente obliga a aquellos usuarios que tienen activado el adblock y entran a tu sitio web, a que lo desactiven, mediante un pop up, es decir una ventana dentro de tu mismo sitio. Puedes ver el post del antiguo código aquí

Nuevo y Mejorado Código anti Adblock para tu Blog de Blogger

Este código es mucho mejor que el anterior, aunque en si el código es básicamente lo mismo, este es mucho mas elegante (por lo menos a mi me gusta mas )

Así que vayamos a lo que venimos

#1 Hacemos un Respaldo por si las mocas

Antes de empezar a hacer modificaciones hacemos un respaldo completo de nuestro tema de blogger, por aquello de que no hagas algún proceso bien y tu tema termine dañado...

Si lo jodes, por lo menos tienes una copia de tu tema actual y vuelva todo a la normalidad.

Para ello es fácil, solo basta con irte a Blogger --> Tema --> Copia de Seguridad.

paso 1

Luego de haber hecho esto, les va a salir ahí mismo una ventana, preguntando que si quieren guardar la copia ustedes pulsan en, Guardar o Descargar.

paso 2

Y ya tienen una copia de su tema.

#2 Implementando código

Vamos a insertas dos códigos, uno sera el que dará el estilo a nuestro pop up, el otro sera el que haga la función de dar el pop up.

Insertando Css

Vamos a Blogger --> Tema --> Editar Html

paso 4

* Justo después de la etiqueta ]]></b:skin> vamos a pegar el siguiente código:

/* Adblock Moderno */
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}

Ahora ahí mismo en el editor, buscamos la etiqueta: </body> y justo antes de esta etiqueta vamos a pegar el siguiente código:

<script type='text/javascript'>
      //<![CDATA[
      //Anti Boomclick
      function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawcdn.githack.com/Arlina-Design/phantom/a24de19dd97cd07fa7f61e9fa29ae057e8a23dc8/antiboomclick.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
      // Adblock Moderno
      function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/quasar/23207858/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
      //]]>
    </script>

#3 Guardamos y Vemos Cambios

Una vez hecho estos pequeños cambios ya debería estar funcionando el código, pueden ir a la dirección del blog donde hicieron los cambios y ver el efecto.

Quizás te guste...  (TUTORIAL) Como volver al diseño clasico de Blogger y quitar el nuevo diseño

Se vera algo como esto:

efecto
Para ello obviamente ocupan tener instalado el Adblock en su navegador para verlo funcionando.

También si gustan pueden ver un Demo, en unos de mis blogs de prueba haciendo clic en el botón de abajo.

demo

Ventajas de este Código.

La gran ventaja de este código, es que los visitantes primero podrán navegar en la primera pagina sin que les salga el aviso, pero ya cuando vayan a otra segunda pagina de tu sitio, les saldrá el aviso de que desactiven el adblock.

Por lo que si ven que su sitio es de mucha utilidad, terminaran desactivando al adblock, por que ya vieron que tu sitio si les proporcionan lo que buscan

Espero este código les halla gustado, cualquier cosa, los leo en los comentarios por si tienen dudas, no olviden compartir este post en sus redes sociales, para que mas gente conozco este código anti adblock, para blogger.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Go up

Este sitio utiliza Cookies para mejorar tu experiencia! Más info...