Mensaje Emergente en Blogger

Hola amigos de Mil Trucos Blogger, en el día de hoy veremos como añadir una espectacular caja con un mensaje emergente en Blogger, dicha caja aparece cuando se abre el blog y le da la posibilidad al usuario de cerrarla cuando lo requiera; además que es muy fácil de añadir y personalizar.

Mensaje Emergente en Blogger 

Mensaje Emergente en Blogger

Vista Previa del Truco

Para agregar este tutorial a tu blog solo ve a Diseño, Añadir Gadget HTML/JavaScript y pega lo 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'>

Este es el mensaje que saldrá en la ventana emergente, aquí mismo debajo están los estilos y elementos que puedes editar. Experimenta y verás que consigues un excelente efecto.
</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]-->

Lo resaltado en color verde corresponde al mensaje que se ve en el anuncio y puede ser cambiado por el mensaje que quieras.

Como ves, es muy fácil de añadir este trucos a tu blog y solo basta con añadirlo como un gadget desde el panel de diseño.