U
Usuario eliminado 44926
¡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>Y, por último, un poco de estilo para lograr lo que queremos. Si lo vas a poner en una plantilla CSS, simplemente añade:
Insertar CODE, HTML o PHP:
#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