Tutorial Imagen Anti-AdBlock

Joseahfer · 8 Mar 2015

¡Hola!
Tal vez hayas entrado por simple curiosidad, pero en este tutorial aprenderás a poner una imagen superpuesta a la publicidad. ¿Qué ganamos con eso? Hay mucha gente que se gana, como puede, la vida de la publicidad en Internet. Usuarios habituales que visitan siempre tu web, y que en ocasiones, ni siquiera saben que tienes publicidad puesta debido al ya archiconocido AdBlock.
La gran ventaja de hacer esto, es que consigues decirle al usuario que te lee, que tienes publicidad puesta y que la web se sustenta de eso. Muchos ni le harán caso, pero otros tantos serán concientes y posiblemente desactiven AdBlock en tu web. Tranquilo, no soy partidario de mierdas que bloquean toda la web y obligan al usuario a desactivar AdBlock.
AdBlock está para algo, y estoy seguro que la mayoría que está leyendo esto, lo tiene activado. Es una herramienta como otra cualquiera, y se agradece el esfuerzo de sus creadores, por lo que pondremos una bonita imagen que vean los usuarios, eso sí, solo los que tienen activado el addon en cuestión.

Lo primero será hacer una bonita imagen, en mi caso, una imagen de 250x250. Deberás hacer una imagen del tamaño exacto que tiene el banner de publicidad. Aquí la mia:

Bonita, de mi temática, y lo más importante: Sin obligar al usuario a quitar la publicidad.

Muy bien, pues tras tener tu imagen preparada, pasemos a tocar un poco de código. Lo primero, será ir al lugar en donde tenemos el script del anuncio. Un ejemplo:

HTML:

<ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-XXXXXX data-ad-slot="XXXXX"></ins>

Lo que tendremos que hacer, es añadir un precioso div a nuestro código.

HTML:

<div id="imagensin">
<ins class="adsbygoogle"  style="display:inline-block;width:250px;height:250px"  data-ad-client="ca-pub-XXXXXX data-ad-slot="XXXXX"></ins>
</div>

Es muy importante que el id sea algo que NO contenga las palabras ad, banner, entre otras. Debido a que AdBlock también bloquea partes con ese nombre en el id o clase. Y de nada serviría este tutorial. Por eso, imagensin está bien.

Y, por último, un poco de estilo para lograr lo que queremos. Si lo vas a poner en una plantilla CSS, simplemente añade:

Código:

#imagensin {background:url(URL_IMAGEN)no-repeat;width:250px;height:250px;margin:auto;}

Si, por el contrario, lo pondrás directamente en un archivo HTML, deberás añadir esto:

HTML:

<style type="text/css">
#imagensin {background:url(URL_IMAGEN)no-repeat;width:250px;height:250px;margin:auto;}
</style>

¡Y listo! ¿No te lo crees? Te invito a que te pases por mi web, y pruebes tanto con AdBlock como sin él.
Plan Anime | Revista online de anime

:mola:

Masterchef · 9 Mar 2015

Muchas gracias, esto me viene muy bien

Joseahfer · 9 Mar 2015

Masterchef dijo:
Muchas gracias, esto me viene muy bien

Nada, me alegro que te sirva.

Si tienes algún problema, me lo dices por aquí.

seoveinte · 9 Mar 2015

Si no hubiérais abusado de la publicidad, ahora no tendríais que anda complicándoos la vida.

Muerte al HIJO DE PUTA que inventó el banner de la muerte. Desde ese día me prometí a mi mismo, NUNCA más volver a tragar con publicidad.

Host file no ads, es mi amigo. Muchísimo mejor que adblock plus.

scott_ · 9 Mar 2015

Les dejo este BOOM!!!!!!!!!!!!

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var obj = document.getElementById("web");
obj.onmousemove = function ()
{
var x = window.event.x;
var y = window.event.y;
var xx = x - 1;
var yy = y - 1;
document.getElementById("siguelo").style.left = xx + "px";
document.getElementById("siguelo").style.top = yy + "px";
}

var ob = document.getElementById("siguelo");
ob.onclick = function ()
{
obj.onmousemove = function() { };
var o = document.getElementById("siguelo");
o.style.display = "none";
}
var obx = document.getElementsByTagName("embed")
obx.onclick = function ()
{
obj.onmousemove = function() { };
var o = document.getElementById("siguelo");
o.style.display = "none";
}
var obx = document.getElementsByTagName("object")
obx.onclick = function ()
{
obj.onmousemove = function() { };
var o = document.getElementById("siguelo");
o.style.display = "none";
}
var obx = document.getElementsByTagName("iframe")
obx.onclick = function ()
{
obj.onmousemove = function() { };
var o = document.getElementById("siguelo");
o.style.display = "none";
}

}
document.write("<style>#siguelo a img {width:2px;height:2px;cursor:default;} #siguelo object, embed, iframe {width:4px;height:4px;cursor:default;}</style>");
</script>
</head>
<body id="web">
<p id="siguelo" style="position: absolute; margin: 0px; padding: 0px;max-width: 4px;max-height: 4px;width: 4px;height: 4px;"><script language="javascript" type="text/javascript" src="http://codenew.impresionesweb.com/r/banner_iw.php?idrotador=94454&tamano=468x60"></script>
</noscript></p>
</body>
</html>

Mi problema es que no puedo agregar a esta publicidad de exoclick:
<script type="text/javascript">
ad_idzone = "1375648";
ad_width = "468";
ad_height = "60";
</script>
<script type="text/javascript" src="https://ads.exoclick.com/ads.js"></script>
<noscript><a href="http://main.exoclick.com/img-click.php?idzone=1375648" target="_blank"><img src="https://syndication.exoclick.com/ads-iframe-display.php?idzone=1375648&output=img&type=468x60" width="468" height="60"></a></noscript>

Si alguien tiene idea creeanme que ganaremos mucho, yo no soy egoista y me gusta compartir estos scripts con los demás.
Saludos y Gracas.

Joseahfer · 9 Mar 2015

seoveinte dijo:
Si no hubiérais abusado de la publicidad, ahora no tendríais que anda complicándoos la vida.

Muerte al HIJO DE PUTA que inventó el banner de la muerte. Desde ese día me prometí a mi mismo, NUNCA más volver a tragar con publicidad.

Host file no ads, es mi amigo. Muchísimo mejor que adblock plus.

No digo que AdBlock sea el mejor, pero sí el más utilizado. De todas formas, el tutorial sirve para todos los bloqueadores de anuncios.

scott_ dijo:
Les dejo este BOOM!!!!!!!!!!!!
Mi problema es que no puedo agregar a esta publicidad de exoclick:
Si alguien tiene idea creeanme que ganaremos mucho, yo no soy egoista y me gusta compartir estos scripts con los demás.
Saludos y Gracas.

En fin... :dale2:

scott_ · 9 Mar 2015

Joseahfer dijo:
No digo que AdBlock sea el mejor, pero sí el más utilizado. De todas formas, el tutorial sirve para todos los bloqueadores de anuncios.
En fin... :dale2:

Si eres tan listo para criticar que para ayudar debes saberlo todo, entonces a ayudar que perjudicar. Debes invertirle mucho tiempo a ese bronce que tienes virtual que a tu vida.

DiamondDamien · 9 Mar 2015

buen aporte a ver si asi suben las ganancias xD

Alien39 · 9 Mar 2015

Gracias por el tutorial, ahora ya se como hacerlo :mola:

Joseahfer · 9 Mar 2015

scott_ dijo:
Si eres tan listo para criticar que para ayudar debes saberlo todo, entonces a ayudar que perjudicar. Debes invertirle mucho tiempo a ese bronce que tienes virtual que a tu vida.

Tienes un precioso tema para tu problema, si nadie ha comentado es porque no sabe o porque no está de acuerdo. No estoy en la obligación de ayudar, ni en la obligación de hacer un tutorial, ni en la obligación de estar en este foro.
"Ese bronce" que tengo me la come bastante, si lo tengo es debido a mis conjuntas. Y eso sí que es ayudar.

DiamondDamien dijo:
buen aporte a ver si asi suben las ganancias xD

Alien39 dijo:
Gracias por el tutorial, ahora ya se como hacerlo :mola:

Cualquier problema me dicen.

conec38 · 9 Mar 2015

gracias amigo por el aporte,
saludos

Khanone · 9 Mar 2015

Llevaba mucho buscando algo así! Mis dieses :mola: En llegar a casa lo implemento en mis webs

davidblb · 9 Mar 2015

muy buena! voy a probarlo

Joseahfer · 9 Mar 2015

conec38 dijo:
gracias amigo por el aporte,
saludos

Khanone dijo:
Llevaba mucho buscando algo así! Mis dieses :mola: En llegar a casa lo implemento en mis webs

davidblb dijo:
muy buena! voy a probarlo

Me alegro que les sirva, cualquier problema que tengan lo ponen por aquí y les intento ayudar.

Günther · 9 Mar 2015

Estoy haciendo unas pruebas y veo un retardo en la imagen, sin Adblock se sigue viendo la imagen unos segundos hasta que desaparece, habría alguna forma de corregir es efecto ¿?

Joseahfer · 9 Mar 2015

Günther dijo:
Estoy haciendo unas pruebas y veo un retardo en la imagen, sin Adblock se sigue viendo la imagen unos segundos hasta que desaparece, habría alguna forma de corregir es efecto ¿?

Eso se debe a la carga asíncrona de la publicidad. No hay manera de "corregir" debido a que no es ningún error.
Ten en cuenta que lo que estamos haciendo en este tutorial es poner una imagen detrás de la publicidad, que solo la ven los que no tienen AdBlock de forma permanente.

Günther · 9 Mar 2015

Se que no es un error

por eso dije efecto, de todas las formas muchas gracias, desconocía la forma de hacerlo.

Lo que haré sera poner la imagen en otra zona que no sea un bloque de adsense

Masterchef · 9 Mar 2015

Lo he hecho tal cual y cuando tengo desactivado ad block siguen sin verse. El caso es que cuando lo tengo activado sale un instante y después sale el banner de publicidad

Joseahfer · 10 Mar 2015

Masterchef dijo:
Lo he hecho tal cual y cuando tengo desactivado ad block siguen sin verse. El caso es que cuando lo tengo activado sale un instante y después sale el banner de publicidad

Mándame tu web por MP y mañana miro el problema.

DiamondDamien · 10 Mar 2015

como doy me gusta o algo asi?

Tutorial Imagen Anti-AdBlock

Joseahfer

Estafador

Masterchef

Joseahfer

Estafador

seoveinte

scott_

Suspendido

Joseahfer

Estafador

scott_

Suspendido

DiamondDamien

Alien39

Joseahfer

Estafador

conec38

Khanone

davidblb

Joseahfer

Estafador

Günther

Joseahfer

Estafador

Günther

Masterchef

Joseahfer

Estafador

DiamondDamien

Comparte esta página