Siguenos en facebook Sigueme en twitter Suscribete al Feed RSS

Aviso flotante diseñado para blogger

febrero 07, 2012

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/AVvXsEg289JCkYIvTXn0Y35sRZXscLvaWNFNVEZi78uq6yVWDy_S_KfbV9cHtipOb14JIui0bjO7qju9Lrmzf3lKAu1PAeEMgH64MFNgcasNMrXEIW14aPQNEgger_oZ2D6gO2MxG6rQThzbmlOj/" 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/AVvXsEjaqeshgXeZ6YFlj1mOiFDMIyFCN4XxbPDsjm_uK4JN4rXy97JAh10kUh2pJqzM-ZKkK0RCR7JRESIvPv-Vs_wVsa9by3uOTa3bpJHmh46OKvLiflrYhwUXLUITPrKbh5K8Iy-FunMrHChM/" width="26"/></a>


<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTpGlYcqK011AjG17vGMprXmT-3Qi657GemLR1js8mgDTWxtF2UEG4kJ2HeEwOVqkrVOrsqhL467fpBQlndb0HQ6lHcFUTd8xYRKtiCBkAYP9Jw7lUKkRGQlW0hcYX-0uXmP-4I63iYUfl/" 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.

Si esto te intereso dale a me gusta porfavor ayudanos!