Tutorial: Cómo crear anuncios adaptables de Google AdSense para tu sitio Web

  • Autor Autor iNeedYou
  • Fecha de inicio Fecha de inicio
Un buen tuto al nivelazo que nos tienes acostumbrados, :witless:

Gracias!
 
Ya lo sabia per igualmente es un buen aporte para aquellos que recien se inician.
 
doutop15 dijo:
[MENTION=3486]iNeedYou[/MENTION]

Dejo mi aporte 🙄

Se trata de este otro, es más facil de usar solo ahi que pegar el ca-pub- ### y listo 🙂

HTML: 
<script type="text/javascript"><!--
google_ad_client = "ca-pub-AQUI-REEMPLAZAR";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Es editable Y listo solo lo pegan donde desea que se muestre el banner :encouragement:

Saludos buen tuto :welcoming:
Hacer clic para expandir...

Gracias por publicar esta otra opción. Yo pronto tendré que implementar códigos de este tipo para mostrar en PC 336 y en móvil que se ajuste. Veremos si para entonces me aclaro 🙄
 
no me atrevia a saber como hacerlo ahora ya lo se :encouragement:
 
iNeedYou dijo:
Gracias por publicar esta otra opción. Yo pronto tendré que implementar códigos de este tipo para mostrar en PC 336 y en móvil que se ajuste. Veremos si para entonces me aclaro 🙄
Hacer clic para expandir...

Yo lo uso de la forma que citaste y es fácil de implementar, para mí es la mejor alternativa porque escojo mis bloques y no adsense que me clava bloques feos con pocos clics y con feo cpc en el móvil.
 
[MENTION=3486]iNeedYou[/MENTION] Muchas gracias por este tutorial!

Pero me gustaría preguntarte algo. Para colocar los anuncios en Blogger hay que parchearlos o algo por el estilo. Entonces, si yo hiciese eso, aún me serviría esto del anuncio adaptable??

Gracias nuevamente 🙂
 
likepop dijo:
[MENTION=3486]iNeedYou[/MENTION] Muchas gracias por este tutorial!

Pero me gustaría preguntarte algo. Para colocar los anuncios en Blogger hay que parchearlos o algo por el estilo. Entonces, si yo hiciese eso, aún me serviría esto del anuncio adaptable??

Gracias nuevamente 🙂
Hacer clic para expandir...

Cito a [MENTION=47896]RaikND[/MENTION] que los implementó en Blogger si no me equivoco. ¿Puedes responder por mi? 🙄 Yo en Blogger no los uso todavía.
 
iNeedYou dijo:
Cito a [MENTION=47896]RaikND[/MENTION] que los implementó en Blogger si no me equivoco. ¿Puedes responder por mi? 🙄 Yo en Blogger no los uso todavía.
Hacer clic para expandir...

Perdona... tengo el sueño descontrolado y me acabo de levantar ahora... en un rato te lo paso por privado o por aquí mismo y lo pones :encouragement:
 
RaikND dijo:
Perdona... tengo el sueño descontrolado y me acabo de levantar ahora... en un rato te lo paso por privado o por aquí mismo y lo pones :encouragement:
Hacer clic para expandir...
Aquí mismo por favor, y resuelves la duda a más gente que llegue hasta esta página 🙂
 
[MENTION=3486]iNeedYou[/MENTION] genial el tuto.
Consulta has probado el plugin de AdSense realizado por google para WordPress?
 
Akela dijo:
[MENTION=3486]iNeedYou[/MENTION] genial el tuto.
Consulta has probado el plugin de AdSense realizado por google para WordPress?
Hacer clic para expandir...
No, ni tenía idea de su existencia, ¿dejas su link, por favor? Y le echo un ojo cuando pueda 😀
 
iNeedYou dijo:
No, ni tenía idea de su existencia, ¿dejas su link, por favor? Y le echo un ojo cuando pueda 😀
Hacer clic para expandir...
Estoy en la calle.. Pero desde WordPress pones AdSense y te aparece el plugin desarrollado por google... Cualquier cosa mas tarde te paso el link.

Beso
 
Muy útil esto de los anuncios adaptables y prácticamente obligatorio hoy día con el tráfico móvil cada vez mayor. un tuto muy fácil de entender para que todos puedan aplicarlo y ponerse al día 🙂
 
Gracias x el aporte! Oyes, deberías hacer un libro o algo; sabes mucho y muy bueno.
Gracias sinceras y felicidades!
[emoji6]


Enviado desde mi iPhone con Tapatalk
 
Bueno yo aquí dejo mi pequeño aporte en CSS y HTML, sin necesidad de el asqueroso javascript odioso.

Podeis modificar exactamente como quereis que salga vuestro anuncio cambiando el width / height en estas clases:
PHP: 
.promoPc p {width: 100%; height: 100px;}
.promoPhone p {width: 100%; height: 100px; display: inherit;}

Esta parte solo sera apto para que el anuncio solo se imprima en entradas de Blogger:
Antes de el </head>:
PHP: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Promo Header by RaikND */
  	.promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;}
	.promoPc, .promoPhone {width: 100%;}
	.promoPc p {width: 100%; height: 100px;}
	.promoPhone p {display: none;}


/* Responsive Phone by RaikND */
  @ media (max-width: 480px) {
    .promoContent {height:100px;}
	.promoPc p {display: none;}
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;}
    .promoPhone p {width: 100%; height: 100px; display: inherit;}
}
</style>
</b:if>

Y en el sitio que quieres ubicar tu anuncio en la parte HTML, claro despues de la etiqueta <body>:
HTML: 
<!-- Promo Header by RaikND -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promoContent'>
    <div class='promoPc'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
	</div>
	<div class='promoPhone'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
	</div>
</div>
</b:if>

Todas las plataformas "WordPress" y ponen esto antes de el </head>:

PHP: 
/* Promo Header by RaikND */ 
      .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;} 
    .promoPc, .promoPhone {width: 100%;} 
    .promoPc p {width: 100%; height: 100px;} 
    .promoPhone p {display: none;} 


/* Responsive Phone by RaikND */ 
  @ media (max-width: 480px) { 
    .promoContent {height:100px;} 
    .promoPc p {display: none;} 
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;} 
    .promoPhone p {width: 100%; height: 100px; display: inherit;} 
}

Y aqui despues del <body>:
HTML: 
<!-- Promo Header by RaikND -->
<div class='promoContent'>
    <div class='promoPc'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
	</div>
	<div class='promoPhone'>
		<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
	</div>
</div>

Aquí esta mi pequeño aporte, lo que necesiten, avisarme :encouragement:
 
Última edición:
RaikND dijo:
Bueno yo aquí dejo mi pequeño aporte en CSS y HTML, sin necesidad de el asqueroso javascript odioso.

Podeis modificar exactamente como quereis que salga vuestro anuncio cambiando el width / height en estas clases:
PHP: 
.promoPc p {width: 100%; height: 100px;}
.promoPhone p {width: 100%; height: 100px; display: inherit;}

Esta parte solo sera apto para que el anuncio solo se imprima en entradas de Blogger:
Antes de el </head>:
PHP: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Promo Header by RaikND */
  .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;}
.promoPc, .promoPhone {width: 100%;}
.promoPc p {width: 100%; height: 100px;}
.promoPhone p {display: none;}


/* Responsive Phone by RaikND */
  @ media (max-width: 480px) {
    .promoContent {height:100px;}
.promoPc p {display: none;}
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;}
    .promoPhone p {width: 100%; height: 100px; display: inherit;}
}
</style>
</b:if>

Y en el sitio que quieres ubicar tu anuncio en la parte HTML, claro despues de la etiqueta <body>:
HTML: 
<!-- Promo Header by RaikND -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promoContent'>
    <div class='promoPc'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
</div>
<div class='promoPhone'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
</div>
</div>
</b:if>

Todas las plataformas y ponen esto antes de el </head>:

PHP: 
/* Promo Header by RaikND */ 
      .promoContent {background-color: #F3F3F5; width:100%; text-align:center; margin: 5px 0 0 0; padding: 2px;} 
    .promoPc, .promoPhone {width: 100%;} 
    .promoPc p {width: 100%; height: 100px;} 
    .promoPhone p {display: none;} 


/* Responsive Phone by RaikND */ 
  @ media (max-width: 480px) { 
    .promoContent {height:100px;} 
    .promoPc p {display: none;} 
    .promoPhone { float:left; width: 100%; margin-bottom: 5px;} 
    .promoPhone p {width: 100%; height: 100px; display: inherit;} 
}

Y aqui despues del <body>:
HTML: 
<!-- Promo Header by RaikND -->
<div class='promoContent'>
    <div class='promoPc'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL PC</p>
</div>
<div class='promoPhone'>
<p>EDITAR CODIGO PARA IMPRIMIR DESDE EL MOVIL</p>
</div>
</div>

Aquí esta mi pequeño aporte, lo que necesiten, avisarme :encouragement:
Hacer clic para expandir...
Consultonta... Que archivos son en WordPress
 
Gracias por el código [MENTION=47896]RaikND[/MENTION] :encouragement:
 
Una duda que tengo, si yo a la caja contenedora del anuncio le doy un width: 100% y un height: 100px; mostrara los anuncios ajustando el ancho pero manteniendo siempre el alto ? Porque lo he intentado pero el anuncio se sale del contenedor, no se ajusta al alto.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

C
¿Se pueden poner valores '0px' en los anuncios adaptables de Adsense?
Respuestas
2
Visitas
344
cesardpaz
C
Guillermo Castillo
Cómo crear Bloques de Anuncios Adaptables sin Adsense
Respuestas
1
Visitas
261
Daniel Muñoz
Daniel Muñoz
Gary Reyes
¿Qué tan efectivos son los anuncios adaptables de AdSense?
Respuestas
16
Visitas
2K
deifar
D
A
Creación de anuncios adaptables con AdSense
Respuestas
15
Visitas
2K
sixpack001
sixpack001
Atrás
Arriba