Un bloguero Practicando

Banner 468x60

Banner 468x60

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

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

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.

Demostración


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/AVvXsEgTJNW1F9GMEex-XS_MqO74HitSq1EhpVpDvAgIj_NygCA9g9gel068BHlTuB2pETLFStYtrqd5CKGW0Ceb6_zgHI2ziHA7OMf_RqeQjmZoVBX4JoaSiPpjpzNcsd1KJc8hyphenhyphenVRgIOpSGiBv/" 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/AVvXsEir4rShpUqfGCcIaB9Gy9WmDWiOd50fNZxNcWrMkO8h_q440Bq41i0IF2vU9fvX2Sr9WmH-ZekTP3ELZtK3CEprYZ18BpUHcukQmn01Pz9p6a1f4JPccyJ7JyIhv7xpD9QPXhNOqTQNQ5b6/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHXsID4eGou8yimGaOb8RRnqGAboWGXHSWFGuN4uAmfT-crMKfsTJYXzyHddeaB8mfd3NVghvMtQBXt0izM1j_hWn2y8RmGKlkbZwdl01b7ZVBD1TWFuB-7b4FUlHp61lqFF0iBEhj3yZ/" 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 amarillo 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.

Tu mensaje sera visible tras la aprobación del administrador