Mil Trucos Bloggers

Tutoriales y recursos para Blogger

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Trucos Blogger » Anuncio flotante con efecto de retraso en Blogger

jueves, 23 de febrero de 2012

Anuncio flotante con efecto de retraso en Blogger

Add Comment
Trucos Blogger
jueves, 23 de febrero de 2012
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3T4lnAZKNkYdUI7rcZOsIgDPoWQia5Rh926mi_4Ig1U19GQxdOIYo06tZT-swkWIlzc4vQaSEnv8Sd880Vbn432SSQY1VGmz2WvBfP_Yy3zmjdNPBU-Lstka_4-7jevwW2gNzwMXG3B0/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.

Share

Like

G+

Tweet

Tweet
0 Komentar untuk "Anuncio flotante con efecto de retraso en Blogger"

Add Comments

Entrada más reciente Entrada antigua Página Principal
Suscribirse a: Comentarios de la entrada (Atom)

Popular Week

  • Enviar sitemap a Google
    Enviar sitemap a Google
    Uno de los aspectos fundamentales a la hora de tener un mejor posicionamiento y numero de visitas es  aparecer en los primeros lugares de bu...
  • El uso del correo electrónico en los blogs parte 1
    El uso del correo electrónico en los blogs parte 1
    El correo electrónico es algo de lo cual nosotros los blogueros no podemos prescindir, ya que son muchos los usos que diariamente le damos a...
  • ¿Vulnera WhatsApp tu privacidad?
    ¿Vulnera WhatsApp tu privacidad?
    Leíamos últimamente en prensa que las autoridades de protección de datos de ciertos países -entre los que se encontraban Canadá y Países Baj...
  • Añade un foro a tu blog con Nabble
    Añade un foro a tu blog con Nabble
    Ya he publicado varias entradas con foros para Blogger pero esta vez les recomiendo Nabble,el cual es el sistema que uso actualmente en el f...
  • Gadget de últimos temas del foro
    Gadget de últimos temas del foro
    Si usas el foro de Nabble en tu blog es muy probable que este gadget te vaya a interesar, ya que como lo dice el titulo el gadget muestra l...
  • Facebook: Un gran aliado de Blogger
    Facebook: Un gran aliado de Blogger
    Seguramente si estas leyendo esta entrada eres un bloguero y casi doy por hecho que si eres bloguero sabes que es facebook y la gran utilida...
  • Aprender ingles para aprender a bloggear
    Aprender ingles para aprender a bloggear
    El ingles es algo fundamental en todas partes hoy en día  hasta en el mundo del internet y de los blogs es muy importante saber ingles, ya q...
  • Gadget de Entradas más Comentadas
    Gadget de Entradas más Comentadas
    Si eres de los que tienes un blog con gran cantidad de comentarios y quieres mostrarle a tus usuarios cuales son esas entradas mas comentada...
  • Últimas Entradas con desplazamiento horizontal
    Últimas Entradas con desplazamiento horizontal
    Ya he compartido varias formas de mostrar las ultimas entradas del blog, pero en esta oportunidad les compartiré una forma muy singular e im...
  • Menú de redes sociales con CSS Sprites
    Menú de redes sociales con CSS Sprites
    Hoy les quiero compartir un excelente truco en el cual se muestra un menu de redes sociales con efecto hecho a base de la tecnica llamada Sp...

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Blog Archive

  • ►  2014 (20)
    • ►  enero (20)
  • ►  2013 (322)
    • ►  diciembre (34)
    • ►  noviembre (31)
    • ►  octubre (35)
    • ►  septiembre (33)
    • ►  agosto (42)
    • ►  julio (13)
    • ►  junio (17)
    • ►  mayo (26)
    • ►  abril (30)
    • ►  marzo (22)
    • ►  febrero (15)
    • ►  enero (24)
  • ▼  2012 (171)
    • ►  diciembre (19)
    • ►  noviembre (20)
    • ►  octubre (13)
    • ►  septiembre (15)
    • ►  agosto (10)
    • ►  julio (10)
    • ►  junio (8)
    • ►  mayo (15)
    • ►  abril (12)
    • ►  marzo (15)
    • ▼  febrero (19)
      • Elegance Gallery-Plantilla Premium para Blogger
      • Minus-10 GB par almacenar archivos (ampliables a 5...
      • Emoticones para los Comentarios Anidados en Blogger
      • Boton Subir con efecto de Opacidad y Desvanecimiento
      • Anuncio flotante con efecto de retraso en Blogger
      • IntenseDebate:Sistema de Comentarios Estilo Wordpress
      • Uso del Facebook según la edad-Comic
      • Conoce el ranking de tu web
      • Globos que caen y se desvanecen en el blog
      • Si estamos Estrenando nuevo Diseño-No te equivocastes
      • Marcadores Sociales con efecto de Opacidad y TipTip
      • Rosas que caen y se desvanecen en el blog
      • Más Espacios Publicitarios en Mil Trucos Blogger
      • Diary/Notebook-Plantilla Premium para Blogger
      • Emoticones "Smilies Elegant" para Blogger
      • Menú de redes sociales con CSS Sprites
      • Añadele estilo a los comentarios anidados
      • Super Clean-Plantilla Premium para Blogger
      • Blogger comenzará a redirigir los dominios blogspot
    • ►  enero (15)
  • ►  2011 (186)
    • ►  diciembre (20)
    • ►  noviembre (16)
    • ►  octubre (16)
    • ►  septiembre (16)
    • ►  agosto (18)
    • ►  julio (19)
    • ►  junio (22)
    • ►  mayo (25)
    • ►  abril (28)
    • ►  marzo (6)

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

© Mil Trucos Bloggers Published By Kaizen Templates powered by Blogger.com.
All Right Reserved By .