Caja de aviso para tus visitantes

En esta oportunidad aqui encontraras la informacion necesaria, para colocar un mensaje o un aviso para que sea visible al entrar tu pagina y de esta manera notificar o simplemente saludar a todos tus visitantes.

La siguiente imagen es una muestra de lo que se puede hacer y en esta publicacion puedes modificar aspectos para que tu seas el encargado de expresar tu toque personal y tus intenciones.

Para lograrlo solo tienes que crear o añadir un gadget/HTML/javascript y pegamos el sigiente codigo:

<style type="text/css">

#aviso{

width:400px; /* Ancho de la caja */

position:fixed; z-index:5000;}

.caja-aviso{

-webkit-border-radius: 0px; background: url(https://lh4.googleusercontent.com/-vMwoph61n94/UAwyM5YwBHI/AAAAAAAAIDU/LQr8jlFYg2A/s800/caja%2520de%2520aviso.jpg; /* Imagen de fondo */

}

.letrero-aviso { /* Estilos de la palabra AVISO */

font-size:18pt;

font-weight:bold;

color:#ffffff;

text-shadow: 0px 0px 10px #000000;} 

</style>

<div id="aviso"  style="left:200px; top:25px;">

<div style="margin-bottom:-30px;"></div>

<br/>

<fieldset class="caja-aviso">

<legend class="letrero-aviso" align="center">AVISO</legend>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<div align="center" ><input type="button" value="Continuar" onclick="javascript:closeit()" /></div>

</fieldset>

<script>

function closeit(){

document.getElementById("aviso").style.visibility = "hidden";

}

</script>

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

Personlizacion del codigo:

1- Selecciona tu imagen. Agrega el texto y modifica el tamaño con cualquier editor de imagenes. Luego subela a un servidor, en Internet hay millones de sitios.

2- Copia la URL (direccion web de tu imagen). Localiza y rermplaza con tu URL el codigo en la seccion de color amarillo.

3- Para ajustar las medidas de la caja, solo tenemos que modificar:

• Para modificar el ancho, solo tenemos que aumentar o disminuir el valor en color naranja.
• Para aumentar o disminuir la altura solo tenemos que elinimar o aumentar los <br/>, en la seccion de color magenta.

4- Para ajustar la posicion de la caja, solo tenemos que modificar los valores:

• Para el margen izquierdo, tenemos que aumentar o disminuir el valor en color verde.
• Para el margen superior, tenemos que aumentar o disminuir el valor en color azul.