Mil Trucos Blogger

Anuncio flotante con efecto de retraso en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

8 Comentarios

  1. Febrero 24, 2012    

    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.

    • Febrero 24, 2012    

      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. 😎

  2. Febrero 29, 2012    

    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.

    • Febrero 29, 2012    

      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.

  3. Anonymous Anonymous
    Marzo 21, 2012    

    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

    • Marzo 21, 2012    

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

      Saludos.

  4. Abril 2, 2012    

    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?

    • Abril 7, 2012    

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

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo