Como poner una ventana emergente con mensaje o aviso en Blogger

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:

Ahora pegamos el código siguiente:

<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'>

Cursos cortos y personalizados en:

www.aprende21.com

       </div>

   </div>

</div>

<style>

#ventana-flotante {

width: 380px;  /* Ancho de la ventana */

height: 120px;  /* 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: 25px 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 1px 1px white;

background: #D3D5D2;  /* Fondo del mensaje */

border: 2px solid #000000;  /* Borde del mensaje */

font-size: 20px;  /* Tamaño del texto del mensaje */

color: #000000;  /* Color del texto del mensaje */

text-shadow: 1px 1px 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 color Rojo.

Para ver cómo queda pulse aquí.

Eso es todo.