Anuncio flotante con retraso en Blogger

Un usuario anónimo me preguntó cómo añadír un anuncio flotante en el blog, ahora dejo el tutorial abierto para que puedan añadir uno fácilmente a su blog.

La particularidad de este anuncio, es que realiza un seguimiento con retraso de la página.


Puedes verlo trabajando en mi blog de pruebas.

¿Cómo agregarlo a Blogger?

Paso 1: Añadiendo el script y las propiedades:

Primero, vamos a ''Diseño | Edición HTML'' en donde buscamos la siguiente línea:

</head>

 Arriba de esta, añadiremos el siguiente código:

<style type='text/css'>
    #anuncio {
    position: absolute;
    border: 0px;
    width: 200px; /* Ancho del anuncio */
    height: 80px; /* Alto del anuncio */
    visibility: hidden;
    z-index: 200;
    top: 20px;
    margin-top:50px; /* Márgen del borde superior de la pantalla*/
    margin-left: 813px; /* Margen a la izquierda de la pantalla */
    }
    </style>
    <script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/Anuncio-flotante.js' type='text/javascript'/>

Paso 2: Agregando el anuncio flotante:

Ahora que ya tenemos el script agregado, debemos añadir el anuncio buscando la siguiente línea:

</body>

Arriba de esta, pegaremos el siguiente código:

<div id='anuncio'>
<div style='background:#fff;color:#000;border:1px solid #dadada;padding:5px;font-size:14px;'><a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4Bb60Sv_a6PV6CvYva1GixM9fd8medypXmZ3Ng6gJvX1iRGWe_MY_JWGJbYRf4t7yaw5wiHGoegtQ1uk08sDZeMBXJCxr1HVIASAITQb0m7AOoOC70tIHdUX8riMWXApTW7gDflgerc/s200/icono-cerrar.png'/></a>Texto del anuncio</div>
</div>

Cambia los siguientes valores:

• background:#fff Por el color de fondo del anuncio
• color:#000 Por el color del texto.
• border:1px solid #dadada Por el color del borde.
• font-size:14px Por el tamaño del texto correspondiente.
• Texto del anuncio Por el texto a anunciar.