Aviso flotante diseñado para blogger

Aviso Flotante

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 | Elementos de la página | 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/AVvXsEj8q8ph0JxaHunYeBY1F1xE7LI4oatmv8mc0i7Cdd9X83cCtdxqmrGkamnp9qImWxirsNMe5MtryP3ovBLSjIFqJ1BvPnP3W6FMhLC8LYwZ7rnFmwAF1jgmRJ2fMw9Sjdmh8Uz47d59mi0z/" 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/AVvXsEh8zkM2DGfdPmLuW97PxWo3i2NJ_7lO4ydD5hM5Q5rmtvNGZusqWp7INZ4p-ffQ9GNd0zFnMH5eeVPIcRC0sbrt1fqHNehHH7qf94bEmo9mSsV5QQ6jZxUBjy5eUtNIAiUxirNADuHTlNDn/" width="26"/></a>


<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA80VwitbdqeON_AnVeCsWBKdjV0-IIv1lPqc4wWadajHg4118_D9xNZXPnypysbQ2h4-yZ_Wns6Fkb3nbbQjpEwG4oMlxVdOGA2-jldgCCUP_RbCvXtSHTOh5PM7QY8h7JgnhoZnEIcbo/" 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.

Compartir en Facebook Compartir en Twitter Compartir en Google Plus

About Monkey D. Luffy

Gracias por seguirnos.