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.
Primero, vamos a ''Diseño | Edición HTML'' en donde buscamos la siguiente línea:
Ahora que ya tenemos el script agregado, debemos añadir el anuncio buscando la siguiente línea:
Cambia los siguientes valores:
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/AVvXsEgY7BV164CEbOpn49Q7oVgrbg2aPObjulP_Clh1ubGlqqDeGP-UHwmqe5WxJdE9OwRIeGW7R6mfTPL7bVoLDlGe8cW-jtE503pBaza-Z8fVlonyqb1VJjTQatEJAbFl3qScwcdtqAFzXbM/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.