PlanetStation.org
[Tutorial] Cómo hacer banners adaptables para webs con diseños responsive
- Detalles
- Categoría: Gestión web
- Publicado: Martes, 28 Abril 2015 09:31
- Escrito por Kravenbcn
- Visto: 9816
Como muchos sabréis, desde hace algun tiempo, Adsense, la plataforma de publicidad online de Google, ha inlcuido entre su catálogo de banners, los banners adaptables, los cuales, modifican su tamaño en función del tamaño de la pantalla desde donde se visualizan, algo muy práctico para plantillas responsive adaptables a móviles y tablets.
¿Pero qué pasa si usas un sistema de publicidad alternativo a Adsense? ¿No puedes hacer que tus banners sean adaptables?
Claro que sí. En este tutorial te mostraré cómo hacerlo.
Lo primero que necesitaremos será generar dos banners, uno de un tamaño reducido que usaremos para móviles (por ejemplo uno de 320x100px) y otro del tamaño que queramos que se vea en PC.
Una vez que tengamos los banners debemos crear un código CSS para definir el banner que se mostrará en cada tamaño de pantalla. A continuación os dejo el código:
<style type="text/css">@media only screen and (min-width: 500px) {div.banner_mobile {display: none;}div.banner_pc {display: block;}}
@media only screen and (max-width: 499px) {div.banner_pc {display: none;}div.banner_mobile {display: block;}}
</style>
En este código estamos estableciendo que a partir de un tamaño mínimo de 500 píxeles el "banner_mobile" no se muestre y sea el "banner_pc" el que se visualizará en pantalla. Y hasta un máximo de 499 píxeles será al revés, es decir, se ocultará el "banner_pc" y se mostrará el "banner_mobile".
A continuación asignaremos cada uno de los banners a su posición:
<div class="banner_mobile">Pon aquí el código del banner mobile</div><div class="banner_pc">Pon aquí el código del banner PC</div>
El código completo del banner adaptable quedaría del siguiente modo:
<style type="text/css">@media only screen and (min-width: 500px) {div.banner_mobile {display: none;}div.banner_pc {display: block;}}
@media only screen and (max-width: 499px) {div.banner_pc {display: none;}div.banner_mobile {display: block;}}
</style>
<div class="banner_mobile">Pon aquí el código del banner mobile</div>
<div class="banner_pc">Pon aquí el código del banner PC</div>
Ahora bastaría con introducir los códigos de los banners en el código adaptable y copiarlo todo a dónde quieres que se muestre y se verá uno u otro en función del tamaño de la pantalla del usuario.
Esto es todo, espero que os haya sido de ayuda.