Estamos en facebook!

Ventanas Publicitarias para tu web

Aquí tenemos varias maneras de poner anuncios en tu web:


1º El mas sencillo he aprovechado el código de inserción de una imagen cambiado los parámetros de ubicación y tenemos una sencilla ventana con la publicidad. No tiene opción de quitar mediante la cruz pero se desplaza junto a la web.

<div style="text-align: left;"> <a href="aqui direcion url a donde ir" style= "left: 20px; position: fixed; top: 100px;"><img src="Aqui direcion url de la imagen a isrtar" alt="" /></a></div> 

2º En este otro ejemplo vamos a complicarnos un poco pues tenemos primero el archivo html y a continuación los estilos css que podemos configurar a nuestro gusto. En este caso si le hemos añadido la x para poder quitar el anuncio lo hemos colocado en el centro y se desplaza con nuestra web.

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>

Aquí va el mensaje.

       </div>

   </div>

</div>

<style>
#ventana-flotante {
width: 360px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background: #ceffad;  /* Color de fondo */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4;  /* Fondo del mensaje */
border: 1px solid #9eff9e;  /* Borde del mensaje */
font-size: 20px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

3º Y por ultimo y no mas difícil, tenemos primero los estilos que podemos adaptarlos a nuestro gusto, le sigue el html y un pequeño código en scripts para ayudar a correr el efecto.   




<style type="text/css">
#aviso{
width:250px; /* 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:450px; top:400px; 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/AVvXsEhYU2OGo7OAaQ9wAamMqNTlWdPOUrarb6XbQpKI-FAdmRiZur-GTT5FGQkDq9NIvX4HtoHbRAExRyiLoV1DrknT8dlmMefGGOge8lH0WQPf1QcvXwfmjXwG0NTGKYU9tLKgOMuAJwzZVMlv/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
<img src="url de la imagen " width="80" height="100" align="left" alt="vteroig" />

...aqui el texto que deseais... <br/>


</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

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

Sencillo y practico solo debéis de hacer los cambios pertinentes:



x
Aquí va el mensaje.

AVISO vteroig ...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ornare neque, vel volutpat elit euismod nec. Sed scelerisque lectus id metus mattis, vitae varius nulla pretium....