Implementar anuncios AdSense en plantilla responsive de forma adecuada

Tengo una plantilla responsive y lo que no me gusta mucho del tema responsive es adsense, que aun no se adecua del todo bien xd, he visto muchas formas de volverlo responsive, pero no encuentro el código de anuncio que supuestamente debo crear desde la cuenta de adsense el formato responsive beta. Tambien he visto que hay que tener mucho cuidado ya que si lo hago mal podría ir en contra de las reglas de adsense.

Entonces ya me hice bolas y no se como debería implementar los anuncios, en si solo necesito hacer responsive 2 bloque de anuncios, los cuales serian el bloque de 300 x 250 y el de 728 x 90, solamente esos, apreciaría mucho su ayuda o de alguna forma que me guíen para poder crear estos anuncios.

O me recomiendan abandonar el diseño responsive? xd

Adsense tiene una nueva opcion en beta para anuncios responsive. Al momento de crear un bloque y elegir su tamaño escoge el de bloque responsive y Te explican como se usa.

gracias 🙂, ahora me imagino que debo adaptar el codigo css?

<style type="text/css">
.adslot_1 {
width: 320px; height: 50px;
} @media (min-width:500px) { .adslot_1 {
width: 468px; height: 60px;
}} @media (min-width:800px) { .adslot_1 {
width: 728px; height: 90px;
}}
</style>

Hacer clic para expandir...

me imagino que debería cambiar este código de ejemplo para mis necesidades, digamos para un bloque de 300 x 250 seria algo así?, (haciendo algo rápido sin pensar en los tamaños de la pagina claro)

<style type="text/css">
.adslot_1 {
width: 200px; height: 200px;
} @media (min-width:350px) { .adslot_1 {
width: 250px; height: 250px;
}} @media (min-width:500px) { .adslot_1 {
width: 300px; height: 250px;
}} @media (min-width:800px) { .adslot_1 {
width: 300px; height:250px;
}}
</style>

Hacer clic para expandir...

estaría correcto?

podría agregar mas posibles tamaños al código?, claro siempre y cuando existan esos tamaños en los anuncios de adsense.

Adsense ya tiene la opción de anuncios responsivos, obten el codigo, y en la parte de estilos haz algunos ajustes.

asi viene por defecto:

<style>
.NOMBRE-CRITERIO { width: 320px; height: 50px; }
@media(min-width: 470px) { .NOMBRE-CRITERIO { width: 468px; height: 60px; } }
@media(min-width: 800px) { .NOMBRE-CRITERIO { width: 728px; height: 90px; } }
</style>

Hacer clic para expandir...

prueba cambiandolo asi:

<style>
.NOMBRE-CRITERIO { width: 300px; height: 250px; }
@media(min-width: 800px) { .NOMBRE-CRITERIO { width: 728px; height: 90px; } }
</style>

Hacer clic para expandir...