SummArg | Cursos y recursos para webmasters

06/12/2012

Colocar espacios de publicidad a los lados como los grandes periódicos

Hoy en día está de moda que los grandes diarios coloquen publicidad a los costados del cuerpo de su web y que sólo sea visible en determinadas resoluciones. De este modo aprovechan el espacio que queda a los lados de todos aquellos usuarios que tienen una resolución de 1280 o superior sin afectar a los usuarios que tienen resoluciones menores (típicos monitores antiguos de 1024px o dispositivos móviles).

Uno de los diarios que lo hace con cierta frecuencia es clarin.com, del cual les dejamos una captura de pantalla a modo de ejemplo.

Para detectar el tamaño de la pantalla y, acorde con el mismo, colocar publicidades laterales podemos usar jQuery, el cual viene incorporado a WordPress, plataforma de nuestra predilección a la hora de elegir un gestor de contenidos.

Primero generamos dos contenedores que colocaremos a los costados de nuestro layout, los mismos estarán vacíos.

<div class="sidebar1"></div>
 <div id="pageWrapper">
<!-- contenido del diario -->
</div> <!-- end of pageWrapper -->
<div class="sidebar2"></div>

El CSS para nuestros dos contenedores tendrá la posición de cada uno y haremos que mediante la propiedad position:fixed el anuncio quede siempre fijo, sin importar el scroll que realicemos.

.sidebar1 {
position:fixed;
top: 40px;
left: 5px;
}
.sidebar2 {
position:fixed;
top: 40px;
right: 5px;
}

Y ahora si, mediante jQuery indicaremos qué debe mostrarse y cuando. En nuestro código planteamos sólo dos escenarios: cuando el viewport es mayor a 1180 pero menor a 1300, y cuando es mayor a 1301 pero menor a 1400. Para el primer caso si el condicional arroja positivo, muestra imágenes de 115px x 520px dentro de nuestros contenedores laterales. Para el segundo caso muestra imágenes un poco mas anchas.

<script type="text/javascript">
if (($(window).width() > 1180) && ($(window).width() < 1300)) {
 $('.sidebar1').html('<img src="http://placehold.it/115x520" />');
 $('.sidebar2').html('<img src="http://placehold.it/115x520" />');
 }
else if (($(window).width() > 1301) && ($(window).width() < 1400)) {
 $('.sidebar1').html('<img src="http://placehold.it/160x520" />');
 $('.sidebar2').html('<img src="http://placehold.it/160x520" />');
 }
</script>

Esperamos que la idea les sirva de base para sus proyectos.
 

 

Dejar un comentario

  1. Karinita

    Hola, muy bueno tu aporte, te agradeceria si me pudieras decir donde tengo que colocar esos codigos en wordpress? tanto los div como el css? Ayudame por favor y gracias de antemano

  2. Karinita

    Hola ya coloque los divs e hize que funcionen colocando imagenes dentro de los div. Pero al querer utilizar el script y dejando los divs en vacio no me funciona, donde tengo que colocar el script?, lo puse dentro de la etiqueta head. y mi resolucion es de 1366×768..

  3. Jordi

    Hola! Muy buena tu aportación, pero me viene una duda:

    ¿En dónde hay que pegar cada uno de esos códigos?

    Gracias 😉

  4. […] […]

  5. Tengo la misma duda que todos, donde tengo que poner los códigos? Podrías ser un poco mas especifico?

  6. Hola muy util!!! Gracias.

    Deben ingresar los Div en header.php antes de
    Los css, en el style.css o como lo llame la template principal.
    El Script va bajo los Div y siempre antes de del header.php

    Saludos!

    VBB

  7. Lo completo ya que lo corto….

    Deben ingresar los Div en header.php antes de /head
    Los css, en el style.css o como lo llame la template principal.
    El Script va bajo los Div y siempre antes del /head en header.php

  8. y como todos … la duda es donde tenemos que colocar esos codigos en wordpress

Dejar un comentario