Mil Trucos Blogger

Mensaje Emergente en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
11

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
11

! Comentario

  1. junio 17, 2017    

    Muchísimas gracias,lo he implementado y está estupendo.
    Cuanto nos enseñas,gracias,gracias y gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo