💡 Aunque nuestros banners no sean receptivos, puede mostrar y ocultar fácilmente los tamaños diferentes según el dispositivo. Este truco sencillo de CSS le mostrará cómo hacerlo.
Primero, debe agregar CSS en el <head> de la página:
<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>
En este código declaramos que si la class de un elemento es .mobileShow, solo debe mostrarse en dispositivos móviles, y .mobileHide solo debe estar disponible para computadoras.
A continuación, simplemente, agregue los elementos <div> y su código publicitario de Adsterra al cuerpo de la página:
<div class="mobileShow"> Your code snippet for mobile </div>
<div class="mobileHide"> Code snippet for desktop only </div>
Por ejemplo, puede cambiar entre banners de 728 x 90 y 320 x 50.
Así es como se ve en una página HTML habitual:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>Hello World!</title>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<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>
</head>
<body>
<!-- the wrapper and content divs set margins and positioning -->
<div class="wrapper">
<div class="content" role="main">
<!-- this is the start of content for our page -->
<h1 class="title">Hello World!</h1>
</div>
<div class="mobileShow">
<script type="text/javascript">
atOptions = {
'key' : '0303d891ce479628509ef2972f7239d6',
'format' : 'iframe',
'height' : 300,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/0303d891ce479628509ef2972f7239d6/invoke.js"></scr' + 'ipt>');
</script> </div>
<div class="mobileHide"> <script type="text/javascript">
atOptions = {
'key' : 'd6744e6de34f83085d99817829bdfc87',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/d6744e6de34f83085d99817829bdfc87/invoke.js"></scr' + 'ipt>');
</script></div>
</div>
</body>
</html>
WordPress
Esto también funcionará en su sitio de WordPress. Primero, deberá agregar las classes CSS al archivo CSS:
Diríjase a Apariencia y seleccione Editor de temas
Busque 'Hoja de estilo' a la derecha
Desplácese hasta el final del archivo e inserte:
.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 { d
4. Haga clic en Actualizar archivo.
A continuación, simplemente agregue los elementos <div> y sus códigos de Adsterra al cuerpo de cualquier página:
<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
</div>
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>
Aquí tiene un ejemplo del archivo header.php:
Blogger
Su sitio web basado en Blogger también es compatible. Al igual que con WordPress, primero agregue su CSS:
Diríjase a Tema desde el menú de la izquierda
Haga clic en el botón desplegable junto a Personalizar y seleccione Editar HTML
Pegue el CSS en el <head>:
<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>
4. Haga clic en Guardar en la esquina superior derecha.
Ahora puede usar ambas classes en cualquier lugar. Por ejemplo, para mostrar diferentes banners en su cabecera:
Vaya a Diseño en el menú de la izquierda
Haga clic en Añadir un gadget y seleccione "HTML / JavaScript" de la lista
Inserte el siguiente código junto con sus códigos publicitarios:
<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
</div>
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>
4. Haga clic en Guardar en la esquina inferior izquierda
Para comprobar si funciona
Chrome Dev Tools le permite comprobar cómo se ve su sitio web en dispositivos diferentes.
Abra su sitio web, haga clic con el botón derecho en cualquier lugar de la página y seleccione "Inspeccionar"; se abrirá el panel Chrome Dev Tools.
Haga clic en Toggle Device Toolbar en la esquina superior derecha del panel
Seleccione el dispositivo móvil del menú desplegable