Ventana con publicidad que invita al registro (se puede cerrar)

Aquí vengo con otro tutorial, esto es muy útil para colocar tu publicidad de adsense a usuarios que no se han registrado. Inspirado en el tutorial de Gmaster: Publicidad fija flotante para invitados y este tema: Banner flotante para invitados . Espero les agrade y sea útil.

Importante! No se recomienda usar Adsense; esto por 2 motivos, primero por alguna razón el script para cerrar no funciona con google adsense (voy a averiguar sobre el tema, ya que no conozco sobre javascript) y segundo, aún más importante, Adsense no permite su codigo en popup's. Les pueden cerrar la cuenta o penalizar sus ingresos.

¿Como se vé?
aa.jpg

* Para comenzar dejo el código bruto que deberán agregar a su plantilla HEADER, al comienzo de ella.

Código PHP:

<vb:if condition="$show['guest']">
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 90 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar"><p align="right"><a href="" onClick="closebar(); return false"><img src="http://static.sunnypages.jp/img/map/close_icon.gif" border="0" /></a>
  </p>
<img src="http://www.vbhispano.com/foros/images/icons/icon4.png" /> <b>Hola invitado! Para tener acceso completo y sin publicidades <a href="registro/"><u>registrese gratuitamente!</u></a></b><br>
Imagen publicidad
</div></vb:if> 


El script no lo vamos a tocar (a menos que se quiera cambiar el nombre del div). Ahora explicando, luego de la etiqueta </script>, comienza lo que nos interesa y deseamos modificar a nuestro gusto.

1.- <div id="topbar"></div> : Esta etiqueta HTML en la que tenemos envuelto nuestro cuadro es la que nos define mediante CSS las propiedades de este, el cuadro. No es necesario cambiar nada.

2.- A continuación se encuentra el codigo de la imagen que cierra el cuadro:

Código PHP:

<p align="right"><a href="" onClick="closebar(); return false"><img src="http://static.sunnypages.jp/img/map/close_icon.gif" border="0" /></a>
  </p> 


Solo debemos modificar la ruta de la imagen y si se desea el align="right" por align="left"

3.- El contenido del mensaje:

Código PHP:

<img src="http://www.vbhispano.com/foros/images/icons/icon4.png" /> <b>Hola invitado! Para tener acceso completo y sin publicidades <a href="registro/"><u>registrese gratuitamente!</u></a></b> 


La primera imagen es un icono de warning que tenemos en nuestros foros, igual se pueden colocar otros, esto es a gusto. Seguido esta el texto que invita al registro y IMPORTANTE verifica que la URL del link te funcione, en el caso de no modificala.

4.- Por Kuervo: Cabe decir que para mover la posicion de la ventana ahy que modificar la siguiente parte del javascript:

Código HTML:

var startX = 30 //set x offset of bar in pixels
var startY = 90 //set y offset of bar in pixels

Donde var startX = 30 a mayor valor se movera hacia la derecha.
Donde var startY = 90 a mayor valor se movera hacia abajo.

5.- Y por ultimo el codigo de la publicidad y/o imagen:

Código PHP:

TU SCRIPT DE GOOGLE ADSENSE 


En esa area deben pegar el cuadro adsense que se les proporciona al crearlo, debe ser TODO el codigo que google les entrega. Importante fijarse que no puede ser un banner muy ancho porque no entrará en el cuadro... si se desea esto deberán modificar el CSS.

* Ahora el codigo CSS del div topbar, agregarlo en la plantilla additional.css:

Código PHP:

#topbar {
-webkit-border-radius:4px;
-moz-border-radius:4px 4px 4px 4px;
-moz-box-shadow:1px 1px 1px #666666;
background-color:#ef8d31;
border:1px solid #4A4848;
color:white;
max-width:338px;
min-height:310px;
padding:0 5px 3px;
position:fixed;
right:5%;
top:8%;
z-index:1;
} 


Ese es el codigo en bruto, si saben algo de CSS pueden modificarlo, en cuanto a color, tamaño, bordes más marcados, etc!

Si deseas aprender este simple lenguaje: CSS-1: Introducción al CSS