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 :

Author : 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

Facebook

Twitter

Google+

Artículos Relacionados