Caja de aviso para jimdo con la opcion cerrar

Esta caja es una mezcla del mensaje tipo Post-it, y de las etiquetas Fieldset y Legend.

 

El resultado es una caja de avisos con opción de cerrar y como tiene CSS3 se aprecian sombras tanto en la caja como en el texto de Aviso.

 

1 este en el head

 

<style type="text/css">
/*<![CDATA[*/
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
/*]]>*/
</style>


<script type="text/javascript">
//<![CDATA[
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
//]]>
</script>

 

PASO #2 ESTE CODIGO EN UN WIDGET HTML 

 

<div id="aviso" style="left:300px; top:100px; padding:0;">
    <div align="right" style="margin-bottom:-30px;">
        <b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img src="https://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png"
        style="vertical-align:middle;" alt="" /></a></b>
    </div>
    <br />

    <fieldset class="caja-aviso">
        <legend class="letrero-aviso" align="center">AVISO</legend> ...Aquí va el mensaje...<br />

        <div align="right">
            <a href="http://www.facebook.com/USUARIO" target="blank"><img src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/id07609b449dfc460/1337013894/std/image.png" width="26" alt=
            "" /></a> <a href="http://twitter.com/usuario" target="blank"><img src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i2b282dbd8ad96578/1337013912/std/image.png" width="25" alt=
            "" /></a>
        </div>
    </fieldset>
</div>

 

Sólo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook (si es que tienes, y quieres) donde se señala.

En la primera parte del código he señalado en color verde los estilos más importantes que se pueden personalizar como el color de fondo, tamaño y posición de la caja, etc.

En donde dice left:300px; top:100px; se puede controlar la posición de la caja de avisos, left es la distancia desde la izquierda, y top la distancia desde arriba.

 

 

Escribir comentario

Comentarios: 35
  • #1

    by-rodriguezz (lunes, 14 mayo 2012 16:47)

    Lo Queria Flotantee:!!

  • #2

    Best Juicer (miércoles, 24 abril 2013 20:26)

    This is an excellent post! Thanks for sharing with us!

  • #3

    CESAR AUGUSTO VALLEJO BELMARES (sábado, 22 marzo 2014 13:20)

    NO SE CIERRA!

  • #4

    mcpioescolartorbes (sábado, 17 mayo 2014 16:42)

    COMO PODEMOS HACER PARA QUE CIERRE AL DAR CLIC EN CUALQUIER LADO

  • #5

    colricardogonzalez (lunes, 17 noviembre 2014 17:56)

    excelentes post

  • #6

    viagra_samples (lunes, 12 octubre 2015 23:48)

    Hello!

  • #7

    cialis (lunes, 12 octubre 2015 23:48)

    Hello!

  • #8

    viagra_samples (lunes, 12 octubre 2015 23:49)

    Hello!

  • #9

    viagra_pills (martes, 13 octubre 2015 07:20)


  • #10

    super (martes, 13 octubre 2015 20:21)


  • #11

    cialis (martes, 13 octubre 2015 21:22)

    Hello!

  • #12

    cialis (martes, 13 octubre 2015 21:23)

    Hello!

  • #13

    purchase_cialis (martes, 20 octubre 2015 01:36)

    Hello!

  • #14

    purchase_viagra (martes, 20 octubre 2015 01:38)

    Hello!

  • #15

    fast (lunes, 26 octubre 2015 20:21)

    Hello!

  • #16

    fast (lunes, 26 octubre 2015 20:23)

    Hello!

  • #17

    cialis (jueves, 05 noviembre 2015 15:50)

    Hello!

  • #18

    cheap_cialis (jueves, 05 noviembre 2015 15:51)

    Hello!

  • #19

    from (jueves, 05 noviembre 2015 20:54)

    Hello!

  • #20

    cialis (jueves, 05 noviembre 2015 20:54)

    Hello!

  • #21

    viagra (lunes, 09 noviembre 2015 20:12)

    Hello!

  • #22

    cialis (lunes, 09 noviembre 2015 20:14)

    Hello!

  • #23

    viagra (lunes, 09 noviembre 2015 20:16)

    Hello!

  • #24

    cialis_canada (jueves, 12 noviembre 2015 07:44)


  • #25

    viagra_canada (jueves, 12 noviembre 2015 07:47)


  • #26

    discount (martes, 17 noviembre 2015 16:15)


  • #27

    from (martes, 17 noviembre 2015 16:17)


  • #28

    for (jueves, 26 noviembre 2015 06:45)


  • #29

    for (jueves, 26 noviembre 2015 06:46)


  • #30

    cialis (jueves, 26 noviembre 2015 13:08)

    Hello!

  • #31

    super (jueves, 26 noviembre 2015 13:08)

    Hello!

  • #32

    fast (jueves, 26 noviembre 2015 13:09)

    Hello!

  • #33

    cialis (jueves, 26 noviembre 2015 21:16)

    Hello!

  • #34

    super (jueves, 26 noviembre 2015 21:17)

    Hello!

  • #35

    fast (jueves, 26 noviembre 2015 21:17)

    Hello!