Caja de aviso para el blog con opci?n de cerrar

Esta caja de avisos es la que vieron ahora que me ausent� y que muchos me han estado pidiendo. No es nada del otro mundo, de hecho, 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.

No, no intentes cerrarla, esta es una imagen.

Y bueno, la colocaci?n es pr?cticamente s?lo un paso, ?nicamente hay que entrar en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pegar lo siguiente:

<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/AVvXsEjsQl6_WZycfHNEb292u_GPsAqzE98OJu71sShMcESJPKMKpavn3PzUBAMq3ZPmdOtkJuw5cecSlUReS3z4aSR912GVydF8Aevqq9CzuNppPtI7mabw4EQC47Qk8tCFCFID7UOKW99F11q2/" 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/AVvXsEhFqBlL6Bqs9eu3ic1Q5LNvwZY7zN-WpuGcdzkdTh8GZF5pHzuVi_trARX7gGQPaGoy4jt-qWtfBc0x1WyD-5VnRHeAev0AXMCsOoPSJrMhR5hg3BJ-6fW5Ye-9OdcvBTZANe97jlcjap3K/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxbP0zYY78va_C3FnZzMCmqonTd0PiEIiBZtimzfWcVa685ev4eMt0S6zxW8axWFyB_wEuSXcyonhwC2Cz-ziyF3IzmxBAwz0N6UBEhj3kZFBhK52DEItrOQrLxuDLnilepShXOvc0eA3/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></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.

Y, eso es todo. Disculpen la entrada tan escueta pero mis energ?as se quedaron en la playa...