martes, 1 de octubre de 2013

Caja de aviso pasa tu blog con opción cerrar

Esta caja de aviso es una caja muy sencilla y bonita con opciones de colocar tu facebook y twitter , es una mezcla del mensaje tipo Post-it, y de etiquetas Fieldset esta caja de aviso sencilla para tu blog blogger espero que les guste



Para la colocación es muy fácil prácticamente un solo paso únicamente tienes que seguir estos pasos:

1. Diseño
2. Elementos de la pagina
3. Añadir un gadget HTML/Javacript

<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://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png" 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://lh6.googleusercontent.com/-9TNSAdSEm2o/Tlgi_wnuKZI/AAAAAAAAGJw/6rLfLd-QfkE/facebook.png" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-xk9JDUThPo0/TlgjAUiI4eI/AAAAAAAAGJ0/t5QtAN0xPco/twitter.png" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>
Solo tienes que agregar agregar el mensaje donde te indica , y tu usuario de facebook y twitter si esque tienes no olvides dejar tu comentario gracias..

En donde dice left:300px; top100px; se puede controlar la posición de la caja de aviso , left es la distancia desde la izquierda y top la distancia arriba


Comparte este post con tus amigos!

...o tambien puedes seguir el blog en:

0 comentarios:

Comparte tu opinion con los demas, deja un comentario. ↓

Los comentarios no son moderados, sin embargo si contienen insultos o son ofensivos, pueden ser borrados.

 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑