Ayuda con implementación de Adsense responsive

VaMpE dijo:

oye y porque no usas el anuncio adaptable y te evitas broncas yo lo uso y me va bien

Hacer clic para expandir...

luisiyoggt dijo:

He visto algunos tutoriales pero no me aclaro..
¿He de crear 3 bloques distintos?
Este es el código preterminado:

PHP:

<style>
.my_adslot { width: 320px; height: 50px; }
       [MENTION=16931]medi[/MENTION]a(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
       [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Res -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Tengo estos 3 bloques de anuncios :
336 x 280
729 x 90
729 x 90


Estas son las medidas de la plantilla pero no se si hará falta.

PHP:

       [MENTION=16931]medi[/MENTION]a screen and (max-width: 1100px) {
.main-wrapper{  margin: 0 !important;  width:100%;  min-height: 0px;  }
.sidebar-wrapper{   position:relative; top:auto;  right:auto;  clear:both;  left:auto;  padding: 0;  width:auto;  background: none;  }
.sidebar-wrapper .widget {  border: none;  margin: 0px auto 10px auto;  padding: 10px 20px;  }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 960px) {
#header {  float:none;  max-width:none;  text-align:center;  }
#header-inner {  margin-bottom:0px;  }
#header h1 {  margin-right:0px;  }
#header p.description {  margin:0;  }
.main-nav-main ul {  text-align: center;  }
.main-nav-main li {  float: none;  }
.footer-bottom .attribution{  text-align: center;  }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 850px){
#header h1, #header h1 a {  font-size: 50px;  line-height: 350%;  }
.page-header .inner .ct-wrapper {  padding: 0 48px; }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px){
.header-wrapper {  margin-right: 0;  width: 100%;  }
#header {  text-align: center;  width: 100%;  max-width: none;  }
#header-inner {   margin:30px 0 0;  }
.main-nav-main {  border-bottom: 0;  }
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 {  padding: 20px 0;  width: 50%;  }
.outer-wrapper {  padding: 0;  }
#content {  padding: 5px;  clear: both;  }
#comment-editor {  margin:10px;  }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 500px){
#header img {  width:100%;  }
#header h1, #header h1 a {  font-size: 28px;  }
.page-header .inner .ct-wrapper {  padding: 0 10px; }
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 {  padding: 20px 0;  width: 100%;  }
.post-outer {  width: 100% !important;  }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 420px){
.comments .comments-content .datetime{  display:block;  float:none;  }
.comments .comments-content .comment-header {  height:70px;  }
}
       [MENTION=16931]medi[/MENTION]a screen and (max-width: 320px){
.comments .comments-content .comment-replies {  margin-left: 0;  }
}

Muchas pero que muchas gracias.!!!

Hacer clic para expandir...

<style>
.my_adslot { width: 320px; height: 50px; }
       [MENTION=16931]medi[/MENTION]a(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
       [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

 <style></style>

piano dijo:

Hola luisiyoggt,

No es necesario crear tres bloques, basta con crear un bloque del tipo "Bloque de anuncios adaptable ( beta)" y problema resuelto. AdSense generará automáticamente los bloques de los tres tamaños que has predefinido aquí:

HTML:

<style>
.my_adslot { width: 320px; height: 50px; }
        [MENTION=16931]medi[/MENTION]a(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
        [MENTION=16931]medi[/MENTION]a(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

Segun el tamaño de pantalla mostrará un bloque u otro.
Esta es una forma de hacerlo, pero hay otra:

Si tu página es totalmente responsive entonces puedes meter el código del anuncio "a pelo" sin el style que he puesto arriba. Si lo haces así entonces Google mostrará el anuncio más indicado según el tipo de pantalla. Si cabe el bloque de 970 entonces te pone ese, si no cabe coloca el de 728 y así sucesivamente.
Yo he hecho algunas pruebas con esto y no me acaba de convencer porque en pantallas grandes los anuncios de texto se desplazan demasiado hacia la izquierda ( realmente Adsense está metiendo un bloque de 970 con anuncio de texto alineado a la izquierda) así que si muestras indistintamente anuncios de texto y de display suele ser mejor opción definir tres tamaños como has hecho y que el mayor de ellos sea el de 728.

Hacer clic para expandir...