- Desde
- 4 Ene 2017
- Mensajes
- 26
¡Saludos!
En esta ocasión les voy a enseñar como poner en su blog un mensaje en una pequeña ventana emergente elegante y colorida, adaptable en colores y estilo de fuente a tus gustos y para que no se salga del contexto de tu blog.
¡Bueno, vamos a hacer esto rápido!
Paso 1
Nos vamos a nuestro panel de control en Blogger, de ahí a Diseño y añadimos un gadget del tipo HTML/Javascript, y en la barra para añadir contenido pegamos este código:
Instrucciones al Paso 1
Ahora nos toca editar; sustituimos el texto de color rojo por el texto que queremos que salga en la ventana emergente, y si quieren pueden editar los colores y tipos de fuente en los lugares donde se señala en el código.
Y... Pues esto es todo, guardamos el gadget y veremos que al entrar en nuestro blog aparecerá la ventana.
Nota: El efecto, anteriormente lo hacía utilizando una cookie que hacía que cuando un visitante presionaba para cerrar, ya no se le volviera a mostrar el anuncio en alguna ocasión que volviera a entrar, pero por algunos disgustos de algunos amigos de internet decidí hacerlo de esta manera, de modo que siempre salga.
¡Saludos! Comenta si te sirvió.
En esta ocasión les voy a enseñar como poner en su blog un mensaje en una pequeña ventana emergente elegante y colorida, adaptable en colores y estilo de fuente a tus gustos y para que no se salga del contexto de tu blog.
¡Bueno, vamos a hacer esto rápido!
Paso 1
Nos vamos a nuestro panel de control en Blogger, de ahí a Diseño y añadimos un gadget del tipo HTML/Javascript, y en la barra para añadir contenido pegamos este código:
<div id='ventana-flotante'>
<a class='cerrar' href='javascript:void(0);' onclick='document.getElementById('ventana-flotante&apos.className = 'oculto''>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]-->
Instrucciones al Paso 1
Ahora nos toca editar; sustituimos el texto de color rojo por el texto que queremos que salga en la ventana emergente, y si quieren pueden editar los colores y tipos de fuente en los lugares donde se señala en el código.
Y... Pues esto es todo, guardamos el gadget y veremos que al entrar en nuestro blog aparecerá la ventana.
Nota: El efecto, anteriormente lo hacía utilizando una cookie que hacía que cuando un visitante presionaba para cerrar, ya no se le volviera a mostrar el anuncio en alguna ocasión que volviera a entrar, pero por algunos disgustos de algunos amigos de internet decidí hacerlo de esta manera, de modo que siempre salga.
¡Saludos! Comenta si te sirvió.
Última edición:
