Guía: Banners Responsivos Adsterra

¿Tus anuncios de Adsterra se ven mal en dispositivos móviles? Por defecto, los banners de Adsterra no son responsivos. En esta guía aprenderás a alternar automáticamente entre un banner de 728x90 (PC) y uno de 320x50 (Móvil).

Nota: Sigue los pasos en orden para asegurar que el código funcione correctamente en tu plantilla.

Paso 1 Configurar el Estilo (CSS)

Primero, debemos añadir las instrucciones a la plantilla de tu blog para que sepa cuándo ocultar o mostrar cada anuncio.

  1. Ve a Tema > Flecha junto a Personalizar > Editar HTML.
  2. Busca la etiqueta </head>.
  3. Pega el siguiente código justo ARRIBA de esa etiqueta:
<style type="text/css">
.mobileShow {display: none;}

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ 
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>

Paso 2 Usar el Generador de Código

Utiliza nuestra herramienta para fusionar tus dos scripts de Adsterra en un solo bloque compatible con el paso anterior.

🚀 Generador de Código Dual

Paso 3 Instalar en el Diseño

Finalmente, coloca el código generado en la posición deseada de tu blog.

  1. Ve a la sección Diseño de Blogger.
  2. Haz clic en Añadir un Gadget > HTML/JavaScript.
  3. Pega el código que obtuviste de la herramienta.
  4. Guarda los cambios y verifica tu blog desde una PC y un Celular.