Añade un mensaje emergente en Blogger

Algunas veces necesitamos dejar algún mensaje importante para nuestros lectores y conviene que sea visto de forma permanente por nuestros visitantes, para ello hoy veremos como añadir un mensaje emergente en un blog de Blogger, además este mensaje aparece cada vez que se refresca la página y tiene un botón de cerrar para que el lector lo cierre cuando desee.

Añade un mensaje emergente en Blogger
Añade un mensaje emergente en Blogger


Para añadir este gadget en tu blog debes ir 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]-->

Los valores personalizables han sido resaltados en negrita y en color naranja, desde allí podrás añadir tu propio mensaje y editar el CSS para darle el aspecto que desees. Déjanos las impresiones sobre el truco en los comentarios de la entrada. 

Entradas que pueden interesarte

disqus