¿Quieres agregar banners laterales de publicidad en tu sitio? ¿No sabes como hacerlo? No te preocupes, sin importar si tu sitio web es desarrollado desde cero o mediante algun CMS como Joomla o WordPress tengo la solución para ti, lo único que necesitaremos es acceso a editar nuestro codigo HTML, CSS y JQuery.
vamos a ver algo un poco más sencillo pero bastante útil para ganar algo de pasta en nuestra web.
Recientemente tuve la oportunidad de trabajar en un proyecto de un periodico digital donde un requerimiento del cliente era agregar publicidad lateral.
Esta publicidad lateral tenia que estar fija a los costados y el tamaño o área de la pagina no podía ser cambiada por lo que se deberían de posicionar únicamente en la zona que quedaba libre.
Otro requerimiento era que la publicidad lateral no podia moverse, es decir, debería quedarse fija a lo largo del scroll del usuario y debería ser compatible con el footer pues no debería de posicionarse sobre él.
Un problema con estos requerimientos era obviamente el tema del ancho de pantalla y su estado en moviles pues no deberia de verse en dispositivos donde el ancho de pantalla no fuera lo suficiente para mostrar el sitio y además el ancho de ambas publicidades laterales.
Mi objetivo al desarrollar una solución a este problema fue siempre desde el principio tener una solución que se adapte a cualquier proyecto sin importar si fue hecho “a mano” desde cero o con algún CMS como WordPress.
¡Manos a la obra!
Lo primero es obviamente crear la estructura de nuestros 2 contenedores con HTML.
|
1
2
3
4
|
<div id=«adlateral1»></div>
<div id=«adlateral2»></div>
</body>
|
Como vez los llamaremos adlateral1 y adlateral2.
El siguiente es paso fue darle el estilo correcto a cada uno para que se posicione a la izquierda y a la derecha respectivamente, definir un ancho y alto del espacio de publicidad, el espacio de separación entre el top y el inicio de la misma asi como que siempre este fijo en pantalla.
Definimos un ligero borde para visualizar mejor.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#adlateral1{
display: block;
position: fixed;
width: 160px;
height: 600px;
top: 180px;
left: 0px;
border:1px solid #eee;
z-index: 99;
}
#adlateral2{
display: block;
position: fixed;
width: 160px;
height: 600px;
top: 180px;
right: 0px;
border:1px solid #eee;
z-index: 99;
}
|
Ahora vamos a encargarnos del tema de la visualización en moviles o en pantallas donde no exista el suficiente espacio para visualizar la publicidad correctamente, en estos casos la publicida lateral debería ocultarse.
Hacemos uso de reglas CSS donde si la pantalla es menor que 1490 entonces ocultamos.
Nota: Los 1490 px los sacamos de que mi contenido del sitio web es de 1170px + 160px de adlateral1 + 160px de adlateral2.
|
1
2
3
4
5
6
7
8
|
@media only screen and (max-width: 1490px) {
#adlateral1 {
display:none!important;
}
#adlateral2 {
display:none!important;
}
}
|
Por último vamonos a Jquery para definir 3 cosas:
- Obtener el ancho de pantalla para calcular el espacio sobrante y en base a esto centrar los laterales de publicidad.
- ¿Que hacer al redimensionar el tamaño de la pantalla?
- Los laterales deben de recalcular su posición y centrarse nuevamente.
- Revisar si los laterales estan por “chocar con el footer” ( el footer en mi sitio es un div con id footer #footer ), si es asi los ocultamos, si el footer estan fuera de foco volvemos a mostrarlos.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
$(document).ready(function(){
resizeAds();
});
$( window ).resize(function() {
resizeAds();
});
$(document).scroll(function() {
checkOffsetAds();
});
function checkOffsetAds() {
if($(‘#adlateral1’).offset().top + $(‘#adlateral1’).height() >= $(‘#footer’).offset().top – 10){
$(‘#adlateral1’).css(‘position’, ‘absolute’);
}
if($(‘#adlateral2’).offset().top + $(‘#adlateral2’).height() >= $(‘#footer’).offset().top – 10){
$(‘#adlateral2’).css(‘position’, ‘absolute’);
}
if($(document).scrollTop() + window.innerHeight < $(‘#footer’).offset().top){
$(‘#adlateral1’).css(‘position’, ‘fixed’);
$(‘#adlateral2’).css(‘position’, ‘fixed’);
}
}
function resizeAds(){
var anchoPantalla = $( document ).width();
var disponibleAds = anchoPantalla – 1170;
var disponibleAd = disponibleAds / 2;
var margenAds = (disponibleAd – 160 ) / 2;
$(«#adlateral1»).css(«margin-left»,margenAds+«px»);
$(«#adlateral2»).css(«margin-right»,margenAds+«px»);
}
|
Por último, ya que hemos visto como agregar banners laterales de publicidad no hace falta nada más que agregar nuestra publicidad dentro de los divs adlateral1 y adlateral2, puede ser un codigo de publicida propio o el codigo de publicidad de google adsense por ejemplo.
Como puedes ver agregar banners laterales de publicidad no es dificil, simplemente vamos resolviendo paso por paso los problemas que esto representan y listo!
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
