Blogger: Mostrar mensaje con opción de cierre

Para mostrar un mensaje como el de la imagen nos vamos a Escritorio > Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript donde pegamos 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/AVvXsEi-cL8cuhcdkwnoX_vgZt9aVUSlZPh9pfMk3hFg8DsLap13Aux-IjinThQpLAEVzzDigupbZXPdfVqlM6g6aSP8vcdQZOEYEf-UISAF9OpNcLXpiKtHB9AtryMZZN0VT89ckt_Qb_GLNEQh/" 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/AVvXsEhGBX9nB6aDAvokpoToP63nAX1rqJ4sQCH8MnUltBfRHm1KtIfqB2maWIxo0LEG2k9O3UpJCjCwCZ-J5-yiEqSo7ok2d1OOhEPQwSG9NF_7gXUiHWKhWyZohQMC3MafAplNg6NmHQQItMyS/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGrbzaEAbufZLRKQK4XAklD-7hEPe9nFPS3AUIiRPn5kOPxv_3Uuofx-gf1TzMRR4HtRMu8r1hckefevfGgoYzKX67u72Sumc5dCiuthx7RnZgpzMtr17D0LfTuuO21GuVBV-OMJ5_afn/" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>

Luego gradamos los cambios y ya veremos el aviso.

Post a Comment

Todo comentario se agradece, además es no permite seguir trabajando.

Artículo Anterior Artículo Siguiente