Hace unos dias puse un anuncio con un curioso efecto de retraso que a muchos lectores les gusto y por eso hoy decido compartilo.
Este truco es genial para cuando tenemos que comunicar un anuncio importante a nuestros lectores y queremos que se muestre en todas las partes del blog.


Para agregar este truco ve a la Edición HTML de tu blog y antes de </head> pega lo siguiente:

 <style type='text/css'>
    #anuncio {
    position: absolute;
    border: 0px;
    width: 250px; /* Ancho del anuncio */
    height: 100px; /* 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='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/Anuncio-flotante.js' type='text/javascript'/>

Lo que esta en verde son las condicionales que se pueden editar.

Ahora antes de </body> pega lo siguiente:

<div id='anuncio'>
<div style='background:#A9E2F3;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='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a>Aqui va Tu Anuncio</div>
</div>

A continuacion explico algunas condicionales editables del anuncio

background:#A9E2F3: Es el color del fondo del anuncio
color:#000: Es el color de las letras
font-size:14px: Es el tamaño de la letra del anuncio
Aqui va Tu Anuncio: Por el anuncio que quieras poner.

Por ultimo guardan los cambios.Pueden ver el resultado en el siguiente blog de pruebas.

Categorías: Trucos Blogger

8 comentarios

lotobus · febrero 24, 2012 a las 7:54 pm

Muy buena ayuda para dejar un anuncio de interés. Me ha quedado genial.
Gracias Juvinao, me gusta guardar tus recursos para Blogger.
He colocado algunos en mi blog y he dado mis primeros pasos con tu ayuda.
Gracias de nuevo por compartir tus conocimientos.

    Juvinao · febrero 24, 2012 a las 8:45 pm

    lotobus gracias por comentar de verdad que me da gusto que mis tutoriales sean de utilidad para las personas que apenas inician en el mundo del bloggin. 😎

Wilmer Antonio Lopez Urrea · febrero 29, 2012 a las 3:09 am

Muchas gracias Juvinao. ¿Hay alguna forma de utilizar este elemento para publicidad de adsense? En otros posts de ayudas para bloggers he encontrado lo que parece ser el mismo código pero la publicidad de adsense no aparece. Yo ya tengo una publicidad flotante. Pero necesito el botón de cerrar para que el visitante no se sienta agobiado.

Gracias por tu atención.

    Juvinao · febrero 29, 2012 a las 6:30 pm

    Wilmer Antonio Lopez Urrea la verdad no lo se pero creo que si,talvez editando una parte del codigo,hare unas pruebas y si resulta algo bueno te aviso.

Anonymous · marzo 21, 2012 a las 5:49 pm

me ha servido de maravilla pero tengo una duda para quitarlo y que el anuncio salga cada 30 minutos que tendria que modificar ?

imagino que es algo de aqui

http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/Anuncio-flotante.js

    Juvinao · marzo 21, 2012 a las 7:52 pm

    Claro amigo,se tiene que modificar una parte del script y en cuanto tenga tiempo te ayudo,ok.

    Saludos.

NxoVoix · abril 2, 2012 a las 7:28 pm

Yo he tenido un Problema.. quiero agregar un anuncio de Google Adsensep ero .. cuando pongo el codigo el cuadra flotante.. sale vacio.. .:S cual puede ser el error?

    Juvinao · abril 7, 2012 a las 4:40 pm

    Amigo creo que primero debes convertir el codigo que te da Adsence en codigo de texto plano

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *