martes, 17 de mayo de 2011

Bloquear Adblock Plus en Blogger u otros sitios con JQuery

Inicialmente no pensaba publicar este artículo, en parte porque no me parece muy adecuado que los administradores de una Web se centren en la restricción de un contenido, en vez de trabajar la calidad y la relación pro-activa con sus usuarios, pero cada vez es más común que se usen bloqueadores de publicidad, algo que se reciente cuando se depende de la publicidad para el hosting.

Este método necesita JavaScript debido a que no es un método que requiere modificaciones del lado del servidor, con todos sus inconvenientes y debilidades.

Esta es una versión publicada originalmente en modification-blog.blogspot.com derivada del modo de energía de OnlineLeaf.com con JQuery.

Instalar JQuery
Entre las tag <head> y </head> pegamos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
Instalar segundo Script
Aclaración: En este script únicamente edite las partes en color, he puesto una imagen que puede reeemplazar o eliminar por una propia, si quiere que la imagen se muestre abajo del texto, solamente envuélvala entre las etiquetas <p></p>.
No use comillas ("), ni tildes ('), o acentos dentro del texto, pues por alguna extraña razón no funcionará.

Advertencia: Si quieren usarlo en un sitio que no esté en blogger, reemplace //<![CDATA[ por <!--//]]> por -->

Instalación: busque la etiqueta </body> y pegue justo antes el siguiente Script:
<script type='text/javascript'>//<![CDATA[
/*
 * jQuery Anti Adblock
 * @copyright Hendriono http://modification-blog.blogspot.com
 * @version 1.00 (9 Maret 2011)
 */
var standby = false;
var adminblog = "[ Nombre del Administrador del Sitio ]";
function CekBlok() {
if ($(".adsantilok").height() == "0") {
        TutupHalaman();
    }
}
function TutupHalaman() {
    if (!standby) {
        var h = 0;
        h = jQuery(window).height();
        jQuery("#energysaving").show().css({
            height: "0",
            width: "0",
            left: "50%",
            top: "50%"
        }).animate({
            width: "100%",
            height: h,
            left: "0",
            top: "0",
            opacity: "1"
        }, 1000);
        standby = true;
    }
}
function jAntiBlock() {
jQuery(function () {
jQuery(document).ready(function () {
setTimeout("CekBlok();", 1000);
jQuery("body").append('<div id="energysaving"><p>AD Block detectado<br /><span>Acciones necesarias. <br/>Este sitio no funciona con Adblock. Para ver este sitio es necesario no bloquear la publicidad, presiona en Adblock <b>Dont Run in sitio.blogspot.com</b><br/> la publicidad de este sitio no es intrusiva y es por ella que obtienes todo el contenido de este sitio gratuitamente. <br/>'+adminblog+'</span></p><img src="https://lh4.googleusercontent.com/_NNS6r_z4aeg/Tchw5RZKuKI/AAAAAAAAUfs/jgFoe0eEmdc/adblock.jpg"/><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #FFD900;">Marca</font> - Derechos reservador - Tu estas en <font style="color: #FFD900;">tusitio.blogspot.com</font></div></div>');
});
});
}
jAntiBlock(); //]]>
</script>
Insertar en la sección CSS de la página:
 div#energysaving, div#energysaving *
{  -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border: 0;
 background-color: #000000;
 }
 div#energysaving
{
margin: 0;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
text-align: center;
z-index: 100;
}
@media screen { body>div#energysaving { position: fixed; } }
div#energysaving p
{
margin: 0;
padding: 0;
width: 100%;
font-size: 18px;
font-family: arial;
color: #FFD900;
position: relative;
top: 40%;
line-height: 20px;
font-weight: bold;
text-align: center;
text-shadow: none;
}
div#energysaving p span
{
color: #fff;
font-size: 12px;
font-weight: normal;
}
div#energysaving div#copyrightOnlineLeaf
{
padding: 0;
margin: 0;
color: #fff;
font-size: 12px;
font-weight: normal;
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
height: 20px;
left: 0%;
}
Envolver el Script de la publicidad
Debemos envolver el Script de la publicidad, por ejemplo de Adsense dentro de <div class="adsantilok">
y </div> para que actué como gatillo y lance el bloqueador, por ejemplo:
<div class="adsantilok">
<script type="text/javascript"><!--
google_ad_client = "";
google_ad_host = "-";
/* 120x600, tira vertical */
google_ad_slot = "2993497637";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
El resultado debe lanzar una ventana en ventana del navegador que diga:

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

13 comentarios:

  1. Uso adblock plus en Chrome en Linux, y no veo ninguna ventana que me impida ver el contenido de la web. No obstante, nunca visito tu web directamente, sólo a través de los rss.

    ResponderEliminar
  2. Yo no he implementado este script en mi sitio web, lo probé, pero como dije antes; tiene sus inconvenientes.
    Por ejemplo, no tiene sentido si se desactiva Javascript o la gente tiene acceso al sitio por el RSS y desde luego guardando la página y editándola.

    ResponderEliminar
  3. Gracias creo que lo debemos instalar todos, por mi parte lo voy a probar. No tiene entido que un visitante se meta en tu pagina y bloquee parte de su conbtenido.

    ResponderEliminar
  4. amigo el tuto esta bueno pero no entiendo 2 cosas:

    1) como Insertar en la sección CSS de la página, la verdad es que no tengo idea en donde se inserta ese codigo.

    2)Envolver el Script de la publicidad, en si no se en que parte debo pegar ese codigo.

    Me gustaria que me respondieras para poner en practica este tuto en mis blogs

    ResponderEliminar
    Respuestas
    1. Te sugiero no lo hagas, si no sabes lo básico de CSS o HTML creo que deberías empezar po aprender donde va cada cosa, pues este Script puede dar dolores de cabeza si no sabes lo básico.

      Eliminar
  5. Muchas gracias amigo, funciona a la perfeccion, gran tutorial... saludos

    ResponderEliminar
  6. amigos despues de usar este scrip, tengo un probelma luedo de desabilidar el adblock, sigue estando el div, lo cual me perjudica porque no puedo clickear nada de bajo de eso, no se me queda en el centro, se me queda a un costado en medio de la pantalla lo cual hace que todo lo que quede abajo del div no pueda hacerse click, por favor espero ayuda

    ResponderEliminar
    Respuestas
    1. Mira yo he usado este script por mucho tiempo, así que puedo desaconsejar su uso, funciona perfectamente en un navegador, pero te da problemas con otros, este tipo de técnicas son hechas para sitios webs donde no tengas acceso a un espacio web propio, pero tiene muchísimo inconvenientes y no veo que sea determinante para aumentar tus ingresos.

      Sería mejor un aviso pidiendo a tus usuarios no bloquear tus anuncios.

      Eliminar
    2. el error se encuentra en el codigo html que va antes de la etiqueta /body si alguien encuentra una forma de solucionarlo espero la pueda compartir

      Eliminar
  7. y no hay de ninguna forma poder editarlo, porque el div energysaving se queda en pantalla una vez desactivado el adblok, por favor necesitaria que alguien me ayude con eso desde ya gracias

    ResponderEliminar
    Respuestas
    1. Yo no lo usaría, hace tiempo estoy desconectado de bloqueadores de publicidad, pero estos scripts tienen muchos defectos al no tener acceso a un espacio web propio.

      Eliminar
  8. hola tengo un proble con el scripts esque siempre salta aunque no haya adblock no la pagina este en sitio de confiansa que podria hacer

    ResponderEliminar
  9. Hola he implementado el artilugio y parece que va bien, pero me ha surgido un problema al instalar el jquery en la head, el menu desplegable que tengo puesto no funciona como debería.

    Los uls no se marcan con flechita y si tengo varios enecadenados, en cuanto pongo el cursor encima del menu se despliegan todos los submenus.

    He ido quitando el código poco a poco y la cosa se soluciona cuando he quitado lo que he introducido en la head justo antes de /head como pone en el post.

    Si teneis alguna idea. Un saludo

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com