Poner ventana de aviso o alerta para blog en Blogger

Para el siguiente post, les comparto la siguiente caja de aviso para nuestro blog; con un poco de HTML y CSS3 se aprecian sombras y todo ello en los efectos veamos como les saldría:

Muy sencilla y fácil de notar además de su opción para cerrar, ahora para agregarla a nuestro blog haremos lo siguiente:

1. Vamos a Diseño|Añadir Gadget|HTML/JavaScript y pegaremos 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/AVvXsEgcnyprEqSyg69A04G1UY4C4DhqvbQRg7_abU35scduzRQzjSLhaWwkj5diuUQ1iN5dJVtFZcuVUiG4OJH_TfgU32SlcwMEid6dtsaa_Xydfb66GN22HbOCLOgJNIVzH9lmLpxTt_Tu54VZ/" 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/AVvXsEgSoiU9kLXC647TjyeEn7Zp1RnxhMRWgO_RnQAhgB1OvJkjKlo5_0_sxbR5v9pwt0bhRgTVBioJXt1vWYNAbGjurmMqchwE9yKAu67pIn6rBZ8dBtBhxKrAxF5L70z7e1kbr4A6xRfVa2pa/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwA67BZ9zzrdNwb-eGF2R_MQ98x8uOTCb33zKgF-uEOkOMZn2Xq2jzCTUCdo53f8GtIViKHH_sCe54_0qlGmp7mQvKIhdKslnb7evj6iwy1kJkmJNtLGEivDPgAupqR8Ze2DdlTkZLp62z/" width="25"/></a></div>
</fieldset>

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

</div><div class="clear"/></div>

Sólo cambien el mensaje que quieran poner donde se indica en color ROJO, y el nombre de usuario (links) en Twitter y Facebook que está en color azul, los números en verde representan la posición de la ventana de aviso en el blog así que lo pueden modificar, con esto su blog ya tendría la ventana implementada.

Hasta la próxima Bloggers, :)