Anuncio

Colapsar
No hay anuncio todavía.
X
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

  • Ventana Flotante y Deslizante con Mensaje o Aviso en Blogger












    Con este código pondremos una ventana emergente conteniendo un mensaje personalizado en nuestro blog.

    En algunas ocasiones, se hace necesario comunicarles a los usuarios un mensaje y la manera más apropiada es a través de una ventana emergente. fpslatino.net, nos trae la solución.

    Se trata de una ventana flotante con la opción de cerrar a través de un botón y con efecto fade.

    Para instalarla, nos vamos a Diseño / Añadir un Gadget / HTML/JavaScript:










    <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'>

    <center>
    <span style="color: red;">- IMPORTANTE AVISO -</span><br/><br/>
    Estimado usuario debido a las leyes de copyright, blogger está borrando nuestras cuentas y es posible que en cualquier momento nos eliminen éste blog, sin embargo nos podrás encontrar con el mismo contenido, siempre con ésta dirección:<br/><br/>
    <span style="color: cyan; font-weight: bold;"><a href="http://www.removido.com/" target="_blank">fpslatino.net</a></span>

    </center>

    </div>

    </div>

    </div>
    <style>
    #ventana-flotante {
    width: 380px; /* Ancho de la ventana */
    height: px; /* 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: px 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 px 1px white;
    background: #292929; /* Fondo del mensaje */
    border: 1px solid #fbbc15; /* Borde del mensaje */
    font-size: 13px; /* Tamaño del texto del mensaje */
    color: #FFFFFF; /* Color del texto del mensaje */
    text-shadow: px px 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]-->

    Para terminar, ponemos nuestro propio texto donde está en verde

    DEMOSTRACIÓN

    DONDE SALE LA CARITA GUIÑANDO CAMBIARLO POR ESTE TEXTO (BORRA EL EMOTICON)

    ; )

    SIN ESPACIOS
    Editado por última vez por gmendieta; https://fpslatino.net/member/15683-gmendieta en 23-10-17, 12:34. Razón: Tutoriales html, blogger, tutorial blog, blog, html, trucos blog

  • #2
    buen aporte
    ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀█ ▒█░░░ ░█▀▀█ ▀▀█▀▀ ▀█▀ ▒█▄░▒█ ▒█▀▀▀█  
    ▒█▀▀▀ ▒█▄▄█ ░▀▀▀▄▄ ▒█░░░ ▒█▄▄█ ░▒█░░ ▒█░ ▒█▒█▒█ ▒█░░▒█
    ▒█░░░ ▒█░░░ ▒█▄▄▄█ ▒█▄▄█ ▒█░▒█ ░▒█░░ ▄█▄ ▒█░░▀█ ▒█▄▄▄█

    Comentario


    • #3
      Buen Aporte
      ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀█ ▒█░░░ ░█▀▀█ ▀▀█▀▀ ▀█▀ ▒█▄░▒█ ▒█▀▀▀█   ▄ ▒█░░▒█
      ▒█▀▀▀ ▒█▄▄█ ░▀▀▀▄▄ ▒█░░░ ▒█▄▄█ ░▒█░░ ▒█░ ▒█▒█▒█ ▒█░░▒█   ░ ░▒█▒█░
      ▒█░░░ ▒█░░░ ▒█▄▄▄█ ▒█▄▄█ ▒█░▒█ ░▒█░░ ▄█▄ ▒█░░▀█ ▒█▄▄▄█   ▀ ░░▀▄▀░

      Comentario

      Trabajando...
      X