Caja de Aviso Con el Botón Cerrar (HTML)
Hola amigos hoy les traigo algo que siempre he visto que buscan en otros blogs sobre como poner un mensaje en nuestra web como un aviso, para que nuestros visitante se den cuenta del aviso que tienes es recomendable usar esta caja de avisos ya que esta aparece al entrar al blog en la pagina de Inicio.
Para eso Hacemos lo Siguiente: Diseño | Elementos de la página | Añadir un Gadget | HTML/Javascript, y ahí pegar El Siguiente Código:
<style type="text/css">
#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>
<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 valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLpUGUDTrA4D9X3rnmEMBQ4Qjeyo5kKaHNMQ1dW6jtCv8nnwo-h82CG7T-bpwbtVnhshf5UChkVck4wt5g4lxsgDsTFp2xKLDyjgHdobKTbAbLjaq3G0LowUAFBdVLfq-0CTxlwsn-CaK/" style="vertical-align:middle;"/></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgken_ZmgkaSfhJ61RkRtswAi0sH-W6-2NbcPFl0LAEdKKJhTYqPsEEZpFpFq9PsjWvrYjeAuDylz8iD4RAkaBP3ljBRbG6pFqrDuBg1gHM-frRO5StkRYmDTPXK42OKBE6a_3K7H5m5P/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcStsat8JflxPcXghARI-RMoIRPIeKUk6cxd1OwtY4I3eK5B9QE-DH0sGuXY4YMDj5Mx_O5IOpDUhJba8KMBmH0Hw0Ubl_L6PHyE1wHcCn0HCuGfYJ8TrK05eJrf91N7dkvq-F2LMc63Tg/" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>
Nota:
Sólo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook.** Si lo tienen
EL código que esta señalado con color verde son 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.
Gracias por la Visista
Publicar un comentario