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('ventana-flotante').className = 'oculto''>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:
Sencillo y practico solo debéis de hacer los cambios pertinentes:
x
Aquí va el mensaje.
