Un bloguero Practicando

Ventana Flotante y Deslizante con Mensaje o Aviso en Blogger

Ventana Flotante y Deslizante con Mensaje o Aviso en Blogger

Comparteme :


Con este código pondremos una ventana emergente conteniendo un mensaje personalizado en nuestro blog.

En algunas ocasiones, se hace necesario comunicarles a los usuarios un mensaje y la manera más apropiada es a través de una ventana emergente. Planeta Blogger, nos trae la solución.

Se trata de una ventana flotante con la opción de cerrar a través de un botón y con  efecto fade.

Para instalarla, nos vamos a Diseño / Añadir un Gadget / HTML/JavaScript:

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>

<center>
<span style="color: red;">- IMPORTANTE AVISO -</span><br/><br/>
Estimado usuario debido a las leyes de copyright, blogger está borrando nuestras cuentas y es posible que en cualquier momento nos eliminen éste blog, sin embargo nos podrás encontrar con el mismo contenido, siempre con ésta dirección:<br/><br/>
<span style="color: cyan; font-weight: bold;"><a href="http://www.moviecoleccion.com/" target="_blank">www.moviecoleccion.com</a></span>
</center>

       </div>

   </div>

</div>
<style>
#ventana-flotante {
width: 380px;  /* Ancho de la ventana */
height: px;  /* Alto de la ventana */
background: #74D4FC;  /* Color de fondo */
position: fixed;
top: 150px;
left: 50%;
margin-left: -180px;
border: -1px solid #282928;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset px 1px white;
background: #292929;  /* Fondo del mensaje */
border: 1px solid #fbbc15;  /* Borde del mensaje */
font-size: 13px;  /* Tamaño del texto del mensaje */
color: #FFFFFF;  /* Color del texto del mensaje */
text-shadow: px px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>
<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->

Para terminar, ponemos nuestro propio texto donde está en celeste

Demostración



Comparteme :
Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Ventana Flotante y Deslizante con Mensaje o Aviso en Blogger.
Comparte

Artículos Relacionados

4 comentarios

Gracias por tu aporte, es posible hacer que esta ventana aparezca estilo modal? Me refiero, fondo negro (opaco) y que solo se vea la ventana?

SERIA GENIAL QUE LA VENTAN SE PASEE POR LA PANTALLA.

Como se le hace para que solo aparezca una sola vez al entrar ala web?

Hola Victor, lamentablemente esta alternativa no permite añadir en entradas independientes, gracias por visitar nuestro blog

Tu mensaje sera visible tras la aprobación del administrador