Poner una colorida ventana emergente en el blog Poner una colorida ventana emergente en el blog
Poner una colorida ventana emergente en el blog
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 11
  1. #1
    Registro
    04-enero-2017
    Ubicación
    República Dominicana
    Mensajes
    27
    Poner una colorida ventana emergente en el blog
    ¡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:
    <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]-->
    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 por Michael Rosario; 12-feb-2017 a las 16:06

  2. #2
    Registro
    16-enero-2016
    Ubicación
    United States
    Edad
    19
    Mensajes
    2.255
    Gracias por la info, lo probare.
    Citar Citar  

  3. #3
    Registro
    29-enero-2016
    Ubicación
    México
    Edad
    25
    Mensajes
    245
    Buen aporta Michael Gracias!!!
    Citar Citar  

  4. #4
    Registro
    12-noviembre-2013
    Ubicación
    Lima, Peru
    Edad
    25
    Mensajes
    584
    Amigo tienes que pegarlo como HTML, porque te salio un emoticon en el codigo:
    "<a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos.className = &apos;oculto&apos;'>x</a>"
    Citar Citar  

  5. #5
    Registro
    04-enero-2017
    Ubicación
    República Dominicana
    Mensajes
    27
    Cita Iniciado por Souhiro Ver Mensaje
    te salio un emoticon en el codigo, pero veo que ya lo arreglaste.
    Sí, ya lo arreglé. Gracias, amigo.
    Citar Citar  

  6. #6
    Cuando la activo, no me deja cerrarla ... o sea aparece pero no me deja cerrarla.
    Citar Citar  

  7. #7
    Gracias lo paso a favoritos para luego probar,
    Citar Citar  

  8. #8
    se ve buena la probare
    Citar Citar  

  9. #9
    Registro
    01-enero-2016
    Ubicación
    Monterrey
    Mensajes
    15
    Gracias por el Tuto
    Citar Citar  

  10. #10
    Poner una colorida ventana emergente en el blog
    Gracias por el Tuto
    Citar Citar  

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. Tutorial: Abrir Video de Youtube en una ventana Emergente(Nueva ventana)
    El código lo vamos a colocar en una entrada o bien en un gadget o donde nosotros queramos que se visualice el ícono o imágen para que los visitantes...
    Respuestas: 3
    Último mensaje: 12-ene-2017
  2. Como poner ventana emergente en wordpress pagina principal?
    Hola, quisiera saber como hago para cuando entren a mi web se les abra una ventana en el inicio donde este un cuadro para que le den me gusta en...
    Respuestas: 5
    Último mensaje: 21-ene-2015
  3. ¿Como poner una ventana emergente o popup?
    Hola, Me gustaría poner en una de mis webs una de esas ventanitas emergentes (popup) que dicen que si no eres mayor de edad o aceptas xxxx...
    Respuestas: 14
    Último mensaje: 14-ene-2014
  4. abrir un ventana emergente y una nueva ventana al tiempo con un solo clip
    hola amigos del foro estoy creado una web de películas donde hay que clikear sobre una imagen para ver la película y lo que quiero es que al...
    Respuestas: 5
    Último mensaje: 18-nov-2012
  5. Ventana emergente Blog
    Hola gente aver si me expreso correctamente con lo que quiero Quiero añadir a uno de mis blog una ventana emergente ( que no las bloquee los...
    Respuestas: 5
    Último mensaje: 21-ago-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •