Mete AdSense aunque no quepa. Parte I.

Muchas veces llega la hora de incorporar un poco de adsense a nuestra página para mejorar un poco su productividad. Llegado ese momento muchas páginas no pueden ponerlo sin reestructurar todo el diseño y la plantilla css. Para aquellos que han encargado el diseño a terceros o basan su web en una solución ya creada (por ejemplo wordPress) esto puede suponer un problema.

En esta primera parte trataremos como incorporar una columna de AdSense de 120x600px a webs de 800px de ancho. En una posterior entrada comentaremos como hacer algo parecido en webs de 100% de ancho.

Incorporando AdSense a webs con 800px de ancho.

Muchas veces, si la web es muy vistosa o si el diseñador no se maneja bien con medidas relativas recurrimos a realizar una web de 800px de ancho que quede centrada en la pantalla. Así nos aseguramos que la página se vea bien en cualquier resolución.

¿Como lo incorporamos?

Pues tenemos una página web a 800px de ancho cuando hoy por hoy la mayor parte de nuestros usuarios van a verla con una resolución mucho mayor.

Eso quiere decir que tenemos muchos pixeles de sobra en los lados de la página para la mayor parte de los casos. ¿porque no usamos ese espacio para nuestro AdSense?

Lo que vamos a hacer es crear una capa oculta al final del documento que contenga una columna de AdSense. Si la resolución es suficiente entonces con JavaScript modificaremos esa capa y la pondremos al lado de nuestro documento. El resultado será ver nuestra pagina con una columna de AdSense añadida a la derecha de la misma.

Para saber si debe o no mostrar el AdSense el codigo que sigue lo que hará es sumarle 240px (120px a cada lado de la pagina) al ancho que le indiquemos y sigue cabiendo todo en pantalla entonces colocará la columna en su sitio. Sólo en ese caso se mostrará el AdSense al usuario. Los usuarios con resoluciones más bajas no serán "molestados".

El código. (a insertar justo antes del cierre del body)

<div id="adSenseLateral" style="display:none">
METER AQUÍ CODIGO PARA COLUMNA ADSENSE
DE 120PX DE ANCHO (google_ad_format = "120x600_as";)
</div>
<script type="text/javascript">

var ancho_original_de_pagina=768;
//puedes poner aquí el tuyo.(en pixeles)

var altura_de_la_cabecera=50;
//margen desde el tope de la pagina hasta el adSense. (en pixeles)

//El código que sigue no lo cambies.
if (window.innerWidth) ancho=window.innerWidth; else ancho=screen.availWidth;
if (ancho>=(240+ancho_original_de_pagina))
document.getElementById("adSenseLateral").style.cssText="display:block; position:absolute; top:"+altura_de_la_cabecera+"px; left:"+((ancho-ancho_original_de_pagina)/2+ancho_original_de_pagina)+"; width:120px; margin:0px; padding:0px; border:0px; z-index:50"
</script>